Skip to content

O
OpenBoard
Commit 9fcd791c authored by unknown's avatar unknown
Browse files
Options

upgraded interactivities

parent b5ec557b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 660 additions and 200 deletions
resources/library/interactivities/spl-word.wgt/index.html
View file @ 9fcd791c
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> "http://www.w3.org/TR/html4/loose.dtd">
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Template</title> <title>Template</title>
<!--Styles--> <!--Styles-->
<link rel="stylesheet" type="text/css" href="styles/master.css"> <link rel="stylesheet" type="text/css" href="styles/master.css">
<link rel="stylesheet" type="text/css" href="styles/wcontainer.css"> <link rel="stylesheet" type="text/css" href="styles/wcontainer.css">
<link rel="stylesheet" type="text/css" href="styles/spl-word.css"> <link rel="stylesheet" type="text/css" href="styles/spl-word.css">
<!--Scripts--> <!--Scripts-->
<script type="text/javascript" src="scripts/jquery144.js"></script> <script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.8.9.custom.min.js"></script> <script type="text/javascript" src="scripts/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="scripts/ext.js"></script> <script type="text/javascript" src="scripts/ext.js"></script>
<script type="text/javascript" src="scripts/wcontainer.js"></script> <script type="text/javascript" src="scripts/wcontainer.js"></script>
<script type="text/javascript" src="scripts/spl-word.js"></script> <script type="text/javascript" src="scripts/spl-word.js"></script>
<script type="text/javascript">
</head> $(document).ready(function(){
if(window.sankore)
sankore.enableDropOnWidget(false);
var lang = ""; //locale language
if(window.sankore){
lang = sankore.locale().substr(0,2);
} else
lang = "en";
if(lang != "en"){
returnStatus(lang);
}
function returnStatus(lang){
$.ajax({
type: 'POST',
url:'locales/' + lang + '/index.html',
statusCode: {
404: function() {
alert(lang)
},
200: function(){
window.location.href = 'locales/' + lang + '/index.html';
}
}
});
}
});
</script>
</head>
<body> <body>
<div id="ub-widget"> <div id="ub-widget">
</div> </div>
</body> </body>
</html> </html>
\ No newline at end of file
resources/library/interactivities/spl-word.wgt/locales/fr/index.html 0 → 100644
View file @ 9fcd791c
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Template</title>
<!--Styles-->
<link rel="stylesheet" type="text/css" href="../../styles/master.css">
<link rel="stylesheet" type="text/css" href="../../styles/wcontainer.css">
<link rel="stylesheet" type="text/css" href="../../styles/spl-word.css">
<!--Scripts-->
<script type="text/javascript" src="../../scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="../../scripts/ext.js"></script>
<script type="text/javascript" src="scripts/wcontainer.js"></script>
<script type="text/javascript" src="../../scripts/spl-word.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if(window.sankore)
sankore.enableDropOnWidget(false);
});
</script>
</head>
<body>
<div id="ub-widget">
</div>
</body>
</html>
\ No newline at end of file
resources/library/interactivities/spl-word.wgt/locales/fr/scripts/wcontainer.js 0 → 100644
View file @ 9fcd791c
var sankoreLang = {
view: "D'affichage",
edit: "Modifier",
example: "so*phis*ti*qué"
};
// if use the "view/edit" button or rely on the api instead
var isSankore = false;
// whether to do window.resize or not (window = widget area)
var isBrowser = ( typeof( widget ) == "undefined" );
function wcontainer( containerID )
{
// some protecred variables
var thisInstance = this;
this.editMode = false;
var data = {}; // see setData and getData
// widget size parameters
this.minHeight = 100;
this.minWidth = 400;
// set to 0 for no max width restriction
this.maxWidth = 0;
// links to the elements of the widget
this.elements = {};
/*
============
create
============
- creates html base, inits this.elements, assings events
*/
this.create = function( containerID )
{
var html =
'<div id="mp_setup">' +
'<div class="viewmode">' +
'<button>' + sankoreLang.edit + '</button>' +
'</div>' +
'<div class="editmode">' +
'<button>' + sankoreLang.view + '</button>' +
'</div>' +
'</div>' +
'<div id="mp_content">' +
'<div class="viewmode" id="mp_view">' +
'</div>' +
'<div class="editmode" id="mp_edit">' +
'</div>' +
'</div>';
var container = $( containerID );
container.append( html );
this.elements.edit = container.find( ".editmode" );
this.elements.view = container.find( ".viewmode" );
this.elements.container = container;
this.elements.subcontainer = container.find( "#mp_content" );
this.elements.containerView = this.elements.subcontainer.find( ".viewmode" );
this.elements.containerEdit = this.elements.subcontainer.find( ".editmode" );
container.find( ".viewmode button" ).click( function(){
thisInstance.modeEdit();
} );
container.find( ".editmode button" ).click( function(){
thisInstance.modeView();
} );
};
/*
===============
setViewContent
===============
- assigns custom html to the viewmode container
*/
this.setViewContent = function( html )
{
this.elements.container.find( "#mp_content .viewmode" ).html( html );
};
/*
===============
setEditContent
===============
- assigns custom html to the editmode container
*/
this.setEditContent = function( html )
{
this.elements.container.find( "#mp_content .editmode" ).html( html );
};
/*
=========================
modeEdit and modeView
=========================
- switch the widget betweed modes
* for customization extend onEditMode and onViewMode
*/
this.modeEdit = function()
{
this.onEditMode();
this.editMode = true;
this.elements.edit.removeClass( "hide" );
this.elements.view.addClass( "hide" );
this.adjustSize();
};
this.modeView = function()
{
this.onViewMode();
this.editMode = false;
this.elements.edit.addClass( "hide" );
this.elements.view.removeClass( "hide" );
this.adjustSize();
};
/*
================
adjustSize
================
- changes the widget size (window and container)
*/
this.adjustSize = function( width, height )
{
// retrieve the arguments
if( arguments.length < 2 )
{
var s = ( this.editMode )? this.editSize() : this.viewSize();
var width = s.w;
var height = s.h;
}
// check for validity
if( width + height == 0 )
return;
// add view/edit bar height
if( !isSankore ){
height += $( this.elements.container ).find( "#mp_setup" ).outerHeight();
}
// apply min and max restrictions
width = Math.max( this.minWidth, width );
height = Math.max( this.minHeight, height );
if( this.maxWidth ){
width = Math.min( width, this.maxWidth );
}
// if viewed as a widget, resize the window
if( !isBrowser )
{
var dw = this.getData( "dw" );
var dh = this.getData( "dh" );
if( width == 0 ){
width = widget.width;
}
if( height == 0 ){
height = widget.height;
}
window.resizeTo( width + dw, height + dh );
}
// resize the container
var params = {};
if( width != 0 ){
params.width = width;
}
if( height != 0 ){
params.height = height;
}
this.elements.container.animate( params );
};
/*
======================
setData and getData
======================
- store some data inside
*/
this.setData = function( name, value ){
data[name] = value;
};
this.getData = function( name ){
if( typeof( data[name] ) == "undefined" ){
return null;
} else return data[name];
};
// redefinable methods
/*
==========================
onEditMode and onViewMode
==========================
- these are called when the mode is being changed
*/
this.onEditMode = function(){
//
};
this.onViewMode = function(){
//
};
/*
======================
viewSize and editSize
======================
- calculate container size for the adjustSize method
* they are likely to be redefined for each particular widget
*/
this.viewSize = function(){
return {
w: this.elements.containerView.outerWidth(),
h: this.elements.containerView.outerHeight()
};
};
this.editSize = function(){
return {
w: this.elements.containerEdit.outerWidth(),
h: this.elements.containerEdit.outerHeight()
};
};
/*
=====================
checkAnswer
=====================
- check if the exercise in the view mode was done right
* redefine it for each particular widget
*/
this.checkAnswer = function()
{
//
};
// constructor end
// if the constructor was called with a parameter,
// call create() automatically
if( arguments.length > 0 ){
this.create( containerID );
}
this.setData( "dw", this.elements.container.outerWidth( true ) - this.elements.container.width() );
this.setData( "dh", this.elements.container.outerHeight( true ) - this.elements.container.height() );
window.winstance = thisInstance;
}
resources/library/interactivities/spl-word.wgt/locales/ru/index.html 0 → 100644
View file @ 9fcd791c
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Template</title>
<!--Styles-->
<link rel="stylesheet" type="text/css" href="../../styles/master.css">
<link rel="stylesheet" type="text/css" href="../../styles/wcontainer.css">
<link rel="stylesheet" type="text/css" href="../../styles/spl-word.css">
<!--Scripts-->
<script type="text/javascript" src="../../scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="../../scripts/ext.js"></script>
<script type="text/javascript" src="scripts/wcontainer.js"></script>
<script type="text/javascript" src="../../scripts/spl-word.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if(window.sankore)
sankore.enableDropOnWidget(false);
});
</script>
</head>
<body>
<div id="ub-widget">
</div>
</body>
</html>
\ No newline at end of file
resources/library/interactivities/spl-word.wgt/locales/ru/scripts/wcontainer.js 0 → 100644
View file @ 9fcd791c
var sankoreLang = {
view: "Показать",
edit: "Изменить",
example: "слож*ный"
};
// if use the "view/edit" button or rely on the api instead
var isSankore = false;
// whether to do window.resize or not (window = widget area)
var isBrowser = ( typeof( widget ) == "undefined" );
function wcontainer( containerID )
{
// some protecred variables
var thisInstance = this;
this.editMode = false;
var data = {}; // see setData and getData
// widget size parameters
this.minHeight = 100;
this.minWidth = 400;
// links to the elements of the widget
this.elements = {};
/*
============
create
============
- creates html base, inits this.elements, assings events
*/
this.create = function( containerID )
{
var html =
'<div id="mp_setup">' +
'<div class="viewmode">' +
'<button>' + sankoreLang.edit + '</button>' +
'</div>' +
'<div class="editmode">' +
'<button>' + sankoreLang.view + '</button>' +
'</div>' +
'</div>' +
'<div id="mp_content">' +
'<div class="viewmode">' +
'</div>' +
'<div class="editmode">' +
'</div>' +
'</div>';
var container = $( containerID );
container.append( html );
this.elements.edit = container.find( ".editmode" );
this.elements.view = container.find( ".viewmode" );
this.elements.container = container;
this.elements.containerView = container.find( "#mp_content .viewmode" );
this.elements.containerEdit = container.find( "#mp_content .editmode" );
container.find( ".viewmode button" ).click( function(){
thisInstance.modeEdit();
} );
container.find( ".editmode button" ).click( function(){
thisInstance.modeView();
} );
};
/*
===============
setViewContent
===============
- assigns custom html to the viewmode container
*/
this.setViewContent = function( html )
{
this.elements.container.find( "#mp_content .viewmode" ).html( html );
};
/*
===============
setEditContent
===============
- assigns custom html to the editmode container
*/
this.setEditContent = function( html )
{
this.elements.container.find( "#mp_content .editmode" ).html( html );
};
/*
=========================
modeEdit and modeView
=========================
- switch the widget betweed modes
* for customization extend onEditMode and onViewMode
*/
this.modeEdit = function()
{
this.onEditMode();
this.editMode = true;
this.elements.edit.removeClass( "hide" );
this.elements.view.addClass( "hide" );
this.adjustSize();
};
this.modeView = function()
{
this.onViewMode();
this.editMode = false;
this.elements.edit.addClass( "hide" );
this.elements.view.removeClass( "hide" );
this.adjustSize();
};
/*
================
adjustSize
================
- changes the widget size (window and container)
*/
this.adjustSize = function( width, height )
{
if( arguments.length < 2 )
{
var s = ( this.editMode )? this.editSize() : this.viewSize();
var width = s.w;
var height = s.h;
}
if( width + height == 0 )
return;
width = Math.max( this.minWidth, width );
height = Math.max( this.minHeight, height );
// if viewed as a widget, resize the window
if( !isBrowser )
{
var dw = this.getData( "dw" );
var dh = this.getData( "dh" );
if( width == 0 ){
width = widget.width;
}
if( height == 0 ){
height = widget.height;
}
window.resizeTo( width + dw, height + dh );
}
var params = {};
if( width != 0 ){
params.width = width;
}
if( height != 0 ){
params.height = height;
}
this.elements.container.animate( params );
};
/*
======================
setData and getData
======================
- store some data inside
*/
this.setData = function( name, value ){
data[name] = value;
};
this.getData = function( name ){
if( typeof( data[name] ) == "undefined" ){
return null;
} else return data[name];
};
// redefinable methods
/*
==========================
onEditMode and onViewMode
==========================
- these are called when the mode is being changed
*/
this.onEditMode = function(){
//
};
this.onViewMode = function(){
//
};
/*
======================
viewSize and editSize
======================
- calculate container size for the adjustSize method
* they are likely to be redefined for each particular widget
*/
this.viewSize = function(){
return {
w: this.elements.containerView.outerWidth(),
h: this.elements.containerView.outerHeight()
};
};
this.editSize = function(){
return {
w: this.elements.containerEdit.outerWidth(),
h: this.elements.containerEdit.outerHeight()
};
};
/*
=====================
checkAnswer
=====================
- check if the exercise in the view mode was done right
* redefine it for each particular widget
*/
this.checkAnswer = function()
{
//
};
// constructor end
// if the constructor was called with a parameter,
// call create() automatically
if( arguments.length > 0 ){
this.create( containerID );
}
this.setData( "dw", this.elements.container.outerWidth( true ) - this.elements.container.width() );
this.setData( "dh", this.elements.container.outerHeight( true ) - this.elements.container.height() );
window.winstance = thisInstance;
}
resources/library/interactivities/spl-word.wgt/scripts/spl-word.js
View file @ 9fcd791c
...@@ -21,9 +21,9 @@ $(document).ready(function() ...@@ -21,9 +21,9 @@ $(document).ready(function()
var words = ""; var words = "";
if(window.sankore) if(window.sankore)
words = (sankore.preference("ordSplWords", ""))?sankore.preference("ordSplWords", ""):"so*phis*ti*ca*ted"; words = (sankore.preference("ordSplWords", ""))?sankore.preference("ordSplWords", ""):sankoreLang.example;
else else
words = "so*phis*ti*ca*ted"; words = sankoreLang.example;
w.setEditContent( '<div class="inputwrap"><input class="percent" value="' + words + '"></div>' ); w.setEditContent( '<div class="inputwrap"><input class="percent" value="' + words + '"></div>' );
w.setViewContent( '<span class="upper"><span class="dash fixed">&mdash;</span></span>' ); w.setViewContent( '<span class="upper"><span class="dash fixed">&mdash;</span></span>' );
w.setData( "dashWidth", w.elements.container.find( "span.dash" ).outerWidth() ); w.setData( "dashWidth", w.elements.container.find( "span.dash" ).outerWidth() );
...@@ -104,10 +104,13 @@ $(document).ready(function() ...@@ -104,10 +104,13 @@ $(document).ready(function()
w.modeView(); w.modeView();
$(window).mouseout(function(){ if (window.widget) {
if(window.sankore){ window.widget.onleave = function(){
sankore.setPreference("ordSplWords", w.getData("word")); if(w.editMode)
sankore.setPreference("ordSplWords", w.elements.container.find( "input" ).val().trim( ['*'] ));
else
sankore.setPreference("ordSplWords", w.getData("word"));
} }
}); }
}); });
\ No newline at end of file
resources/library/interactivities/spl-word.wgt/scripts/wcontainer.js
View file @ 9fcd791c
var sankoreLang = {
view: "View",
edit: "Edit",
example: "so*phis*ti*ca*ted"
};
// if use the "view/edit" button or rely on the api instead // if use the "view/edit" button or rely on the api instead
var isSankore = false; var isSankore = false;
// whether to do window.resize or not (window = widget area) // whether to do window.resize or not (window = widget area)
...@@ -7,7 +13,7 @@ function wcontainer( containerID ) ...@@ -7,7 +13,7 @@ function wcontainer( containerID )
{ {
// some protecred variables // some protecred variables
var thisInstance = this; var thisInstance = this;
var editMode = false; this.editMode = false;
var data = {}; // see setData and getData var data = {}; // see setData and getData
// widget size parameters // widget size parameters
...@@ -28,10 +34,10 @@ function wcontainer( containerID ) ...@@ -28,10 +34,10 @@ function wcontainer( containerID )
var html = var html =
'<div id="mp_setup">' + '<div id="mp_setup">' +
'<div class="viewmode">' + '<div class="viewmode">' +
'<button>Edit</button>' + '<button>' + sankoreLang.edit + '</button>' +
'</div>' + '</div>' +
'<div class="editmode">' + '<div class="editmode">' +
'<button>View</button>' + '<button>' + sankoreLang.view + '</button>' +
'</div>' + '</div>' +
'</div>' + '</div>' +
'<div id="mp_content">' + '<div id="mp_content">' +
...@@ -94,7 +100,7 @@ function wcontainer( containerID ) ...@@ -94,7 +100,7 @@ function wcontainer( containerID )
this.modeEdit = function() this.modeEdit = function()
{ {
this.onEditMode(); this.onEditMode();
editMode = true; this.editMode = true;
this.elements.edit.removeClass( "hide" ); this.elements.edit.removeClass( "hide" );
this.elements.view.addClass( "hide" ); this.elements.view.addClass( "hide" );
...@@ -103,7 +109,7 @@ function wcontainer( containerID ) ...@@ -103,7 +109,7 @@ function wcontainer( containerID )
this.modeView = function() this.modeView = function()
{ {
this.onViewMode(); this.onViewMode();
editMode = false; this.editMode = false;
this.elements.edit.addClass( "hide" ); this.elements.edit.addClass( "hide" );
this.elements.view.removeClass( "hide" ); this.elements.view.removeClass( "hide" );
...@@ -122,7 +128,7 @@ function wcontainer( containerID ) ...@@ -122,7 +128,7 @@ function wcontainer( containerID )
{ {
if( arguments.length < 2 ) if( arguments.length < 2 )
{ {
var s = ( editMode )? this.editSize() : this.viewSize(); var s = ( this.editMode )? this.editSize() : this.viewSize();
var width = s.w; var width = s.w;
var height = s.h; var height = s.h;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment