MOS
/
OpenBoard
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

widget resized to avoid scrollbars, and some wording

Browse Source
preferencesAboutTextFull
Claudio Valerio 12 years ago
parent 553c99df87
commit ec09f1604f
9 changed files with 679 additions and 663 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      resources/library/interactivities/Memory.wgt/config.xml
  2. 252
      resources/library/interactivities/Memory.wgt/css/main.css
  3. 296
      resources/library/interactivities/Memory.wgt/css/ubw-main.css
  4. 4
      resources/library/interactivities/Memory.wgt/i18n/Messages.properties
  5. 2
      resources/library/interactivities/Memory.wgt/i18n/Messages_fr.properties
  6. 2
      resources/library/interactivities/Memory.wgt/js/help_fr-template.js
  7. 447
      resources/library/interactivities/Memory.wgt/js/lib/ubw-main.js
  8. 321
      resources/library/interactivities/Memory.wgt/js/main.js
  9. 4
      resources/library/interactivities/Transformation.wgt/config.xml

2
resources/library/interactivities/Memory.wgt/config.xml
Unescape View File

@ -4,7 +4,7 @@
id="http://www.njin.fr/sankore/apps/memory"
version="1.0"
width="820"
height="575"
height="670"
ub:resizable="true">
<name>Memory</name>

252
resources/library/interactivities/Memory.wgt/css/main.css
Unescape View File

@ -1,236 +1,246 @@
#table {
display: table;
text-align: center;
display: table;
text-align: center;
}
#table > div {
display: table-row;
display: table-row;
}
#table > div > div {
display: table-cell;
display: table-cell;
}
.card-container {
padding: 20px 10px;
padding: 20px 10px;
}
.switch {
display: none;
color: #FFF;
display: none;
color: #FFF;
}
.onEdit .switch {
display: block;
display: block;
}
.onEdit .front .switch {
visibility: hidden;
visibility: hidden;
}
.card {
position: relative;
white-space: normal;
width: 180px;
height: 180px;
position: relative;
white-space: normal;
width: 180px;
height: 180px;
overflow: hidden;
overflow: hidden;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
}
.front{
height: 100%;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
}
.front .card {
background: url("images/pile-bg.png") center no-repeat, url("images/mark.png") center no-repeat;
background: url("images/pile-bg.png") center no-repeat, url("images/mark.png") center no-repeat;
}
.back .card {
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, 0.65);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, 0.65);
-ms-box-shadow: 0 1px 3px rgba(0,0,0, 0.65);
box-shadow: 0 1px 3px rgba(0,0,0, 0.65);
background-image: linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%);
background-image: -o-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%);
background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%);
background-image: -webkit-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%);
background-image: -ms-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%);
background-image: -webkit-gradient(
linear,
50% top,
50% bottom,
color-stop(0, rgb(255,255,255)),
color-stop(1, rgb(204,204,204))
);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, 0.65);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, 0.65);
-ms-box-shadow: 0 1px 3px rgba(0,0,0, 0.65);
box-shadow: 0 1px 3px rgba(0,0,0, 0.65);
background-image: linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%);
background-image: -o-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%);
background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%);
background-image: -webkit-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%);
background-image: -ms-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%);
background-image: -webkit-gradient(
linear,
50% top,
50% bottom,
color-stop(0, rgb(255,255,255)),
color-stop(1, rgb(204,204,204))
);
}
.card > div {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 180px;
height: 180px;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 180px;
height: 180px;
}
.card .text {
padding: 0px 20px;
font-family: "SFToontimeRegular";
font-size: 28px;
color: #000;
padding: 0px 20px;
font-family: "SFToontimeRegular";
font-size: 28px;
color: #000;
}
.usePicture .card .text, .front .card .text {
display: none;
display: none;
}
.card .picture {
display: none;
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
}
.usePicture .card .picture {
display: block;
display: block;
}
.card .picture > div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
}
.card .picture > div:first-child {
position: relative;
display: table-cell;
vertical-align: middle;
width: 180px;
height: 180px;
position: relative;
display: table-cell;
vertical-align: middle;
width: 180px;
height: 180px;
}
.card .picture > div img {
max-width: 100%;
vertical-align: middle;
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
.card .picture > div.dropzone {
border: 1px dashed black;
display: none;
border: 1px dashed black;
display: none;
}
.onEdit .card .picture > div.dropzone {
display: block;
display: block;
}
.card .picture > div.dropzone div {
padding: 10px 10px 10px 50px;
text-align: left;
color: rgba(255, 255, 255, 0.5);
background: rgba(0, 0, 0, 0.4) url("images/drop-label-bg.png") 10px center no-repeat;
padding: 10px 10px 10px 50px;
text-align: left;
color: rgba(255, 255, 255, 0.5);
background: rgba(0, 0, 0, 0.4) url("images/drop-label-bg.png") 10px center no-repeat;
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
-ms-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
-ms-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
.card .picture > div.dropzone.hover div {
background-image: url("images/drop-label-ondrop-bg.png");
color: rgba(255, 255, 255, 1);
background-image: url("images/drop-label-ondrop-bg.png");
color: rgba(255, 255, 255, 1);
}
.card-container .actions {
position: relative;
margin-top: -35px;
display: none;
color: #FFF;
}
position: relative;
margin-top: -35px;
display: none;
color: #FFF;
} /*here!!!!!!!!!*/
.onEdit .card-container .actions {
display: block;
display: none;
}
.actions button[role="flip"] {
margin: 0;
padding: 0;
border: none;
cursor: pointer;
width: 50px;
height: 50px;
background: url("images/flip.png") left center no-repeat;
text-indent: -99999px;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
width: 50px;
height: 50px;
background: url("images/flip.png") left center no-repeat;
text-indent: -99999px;
}
.card-container {
-webkit-perspective: 600px;
position: relative;
width: 180px;
height: 180px;
/*-webkit-perspective: 600px;*/
position: relative;
width: 180px;
height: 180px;
}
.onEdit .card-container {
height: 200px;
height: 200px;
}
.cards {
position: relative;
width:100%;
height: 100%;
position: relative;
width:100%;
height: 100%;
overflow: hidden;
}
.cards > div {
position: absolute;
float: left;
}
.csstransforms3d .cards > div {
-webkit-transform-style: preserve-3d;
-webkit-transition: all .5s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transition: all .5s ease-in-out;
/*-webkit-backface-visibility: hidden;*/
}
.csstransforms3d .cards > div:first-child {
-webkit-transform: rotateY( 0deg );
/*-webkit-transform: rotateY( 0deg );*/
}
.no-csstransforms3d .cards > div:first-child {
display: block;
display: block;
}
.csstransforms3d .cards > div:last-child {
-webkit-transform: rotateY( -180deg );
/* -webkit-transform: rotateY( -180deg );*/
}
.no-csstransforms3d .cards > div:last-child {
display: none;
display: none;
}
.csstransforms3d .cards.flip > div:first-child {
-webkit-transform: rotateY( 180deg );
height: 0;
-webkit-transition-property: height;
-webkit-transition-duration: 0.5s;
/*transition-timing-function: ease;*/
}
.no-csstransforms3d .cards.flip > div:first-child {
display: none;
display: none;
}
.csstransforms3d .cards.flip > div:last-child {
-webkit-transform: rotateY( 0deg );
/*-webkit-transform: rotateY( 0deg );*/
}
.no-csstransforms3d .cards.flip > div:last-child {
display: block;
display: block;
}

296
resources/library/interactivities/Memory.wgt/css/ubw-main.css
Unescape View File

@ -1,310 +1,310 @@
html, body {
margin:0;
padding: 0;
font-family: "helvetica neue";
font-size: 14px;
color: #666666;
margin:0;
padding: 0;
font-family: "helvetica neue";
font-size: 14px;
color: #666666;
}
#ubwidget {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url("images/bg.png");
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url("images/bg.png");
}
.theme-pad #ubwidget {
border-radius: 40px;
border-width: 52px;
border-radius: 40px;
border-width: 52px;
-webkit-border-image: url("images/pad-bd.png") 52 repeat;
-moz-border-image: url("images/pad-bd.png") 52 repeat;
border-image: url("images/pad-bd.png") 52 repeat;
-webkit-border-image: url("images/pad-bd.png") 52 repeat;
-moz-border-image: url("images/pad-bd.png") 52 repeat;
border-image: url("images/pad-bd.png") 52 repeat;
}
.theme-slate #ubwidget {
border-radius: 44px;
border-width: 52px;
border-radius: 44px;
border-width: 52px;
-webkit-border-image: url("images/slate-bd.png") 52 repeat;
-moz-border-image: url("images/slate-bd.png") 52 repeat;
border-image: url("images/slate-bd.png") 52 repeat;
-webkit-border-image: url("images/slate-bd.png") 52 repeat;
-moz-border-image: url("images/slate-bd.png") 52 repeat;
border-image: url("images/slate-bd.png") 52 repeat;
}
#ubwidget > .wrapper {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: hidden;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: hidden;
}
.theme-slate #ubwidget > .wrapper, .theme-pad #ubwidget > .wrapper {
position: absolute;
top: -49px;
bottom: -5px;
left: -5px;
right: -5px;
overflow: hidden;
position: absolute;
top: -49px;
bottom: -5px;
left: -5px;
right: -5px;
overflow: hidden;
}
#toolbar {
display: table;
width: 100%;
height: 44px;
font-family: "Lobster13Regular";
font-size: 24px;
color: #FFCC99;
padding:0 10px;
display: table;
width: 100%;
height: 44px;
font-family: "Lobster13Regular";
font-size: 24px;
color: #FFCC99;
padding:0 10px;
}
.theme-pad #toolbar, .theme-slate #toolbar {
height: 38px;
padding: 6px 0 0;
height: 38px;
padding: 6px 0 0;
}
.theme-slate #toolbar {
color: #7F613F;
text-shadow: #FFDCA9 0 1px 0;
color: #7F613F;
text-shadow: #FFDCA9 0 1px 0;
}
#toolbar > * {
display: table-cell;
height: 100%;
vertical-align: middle;
display: table-cell;
height: 100%;
vertical-align: middle;
}
#toolbar .actions {
text-align: right;
text-align: right;
}
#toolbar button, h1 {
font-weight: normal;
font-family: "Lobster13Regular";
font-size: 24px;
color: #FFCC99;
margin: 0;
font-weight: normal;
font-family: "Lobster13Regular";
font-size: 24px;
color: #FFCC99;
margin: 0;
}
.theme-slate #toolbar button, .theme-slate h1 {
color: #7F613F;
text-shadow: #FFDCA9 0 1px 0;
color: #7F613F;
text-shadow: #FFDCA9 0 1px 0;
}
#toolbar button {
border: none;
padding: none;
outline: none;
background: none;
border: none;
padding: none;
outline: none;
background: none;
cursor: pointer;
padding-left: 34px;
margin-left: 10px;
height: 32px;
cursor: pointer;
padding-left: 34px;
margin-left: 10px;
height: 32px;
}
#toolbar button span {
display: block;
line-height: 32px;
display: block;
line-height: 32px;
}
#toolbar button[role='edit'] {
background: url("images/toolbar-edit.png") left top no-repeat;
background: url("images/toolbar-edit.png") left top no-repeat;
}
#toolbar button[role='view'] {
display: none;
color: #FFF;
background: url("images/toolbar-edit.png") left -32px no-repeat;
display: none;
color: #FFF;
background: url("images/toolbar-edit.png") left -32px no-repeat;
}
#toolbar button[role='reload'] {
background: url("images/toolbar-reload.png") left top no-repeat;
background: url("images/toolbar-reload.png") left top no-repeat;
}
#toolbar button[role='help'] {
background: url("images/toolbar-help.png") left top no-repeat;
display: none;
background: url("images/toolbar-help.png") left top no-repeat;
display: none;
}
.hasHelp #toolbar button[role='help'] {
display: inline-block;
display: inline-block;
}
.showHelp #toolbar button[role='help'] {
color: #FFF;
background-position: left -32px;
color: #FFF;
background-position: left -32px;
}
.theme-slate #toolbar button[role='edit'] {
background-image: url("images/slate-toolbar-edit.png");
background-image: url("images/slate-toolbar-edit.png");
}
.theme-slate #toolbar button[role='view'] {
text-shadow: #7F613F 0 -1px 0;
background: url("images/slate-toolbar-edit.png") left -32px no-repeat;
text-shadow: #7F613F 0 -1px 0;
background: url("images/slate-toolbar-edit.png") left -32px no-repeat;
}
.theme-slate #toolbar button[role='reload'] {
background-image: url("images/slate-toolbar-reload.png");
background-image: url("images/slate-toolbar-reload.png");
}
.theme-slate #toolbar button[role='help'] {
background-image: url("images/slate-toolbar-help.png");
background-image: url("images/slate-toolbar-help.png");
}
.showHelp.theme-slate #toolbar button[role='help'] {
text-shadow: #7F613F 0 -1px 0;
text-shadow: #7F613F 0 -1px 0;
}
.onEdit #toolbar button[role='view'] {
display: inline-block;
display: inline-block;
}
.onEdit #toolbar button[role='edit'] {
display: none;
display: none;
}
#help {
width: 300px;
height: 400px;
position: absolute;
margin-top: 10px;
right: 10px;
z-index: 10000;
display: none;
width: 300px;
height: 400px;
position: absolute;
margin-top: 10px;
right: 10px;
z-index: 10000;
display: none;
}
.showHelp #help {
display: block;
display: block;
}
#content {
position: absolute;
top: 44px;
bottom: 0;
overflow: auto;
left: 0;
right: 0;
position: absolute;
top: 44px;
bottom: 0;
overflow: auto;
left: 0;
right: 0;
background-image: -moz-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%);
background-image: -webkit-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%);
background-image: -o-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%);
background-image: -ms-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%);
background-image: radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%);
background-image: -moz-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%);
background-image: -webkit-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%);
background-image: -o-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%);
background-image: -ms-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%);
background-image: radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%);
}
#parameters {
display:none;
padding: 10px 20px;
background: url("images/parameters-bg.png");
display:none;
padding: 10px 20px;
background: url("images/parameters-bg.png");
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
-mz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
-mz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
#parameters label {
font-style: italic;
font-style: italic;
}
#parameters label > select, #parameters label > input{
margin-left: 10px;
margin-left: 10px;
}
#parameters > div.inline {
display: inline-block;
display: inline-block;
}
#parameters > div.inline+div.inline {
margin-left: 20px;
margin-left: 20px;
}
#parameters input[type=text],
#parameters input[type=number] {
height: 26px;
border: 1px solid #BBB;
background-color: #FFF;
height: 26px;
border: 1px solid #BBB;
background-color: #FFF;
padding: 0 4px;
padding: 0 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 0 #FFF;
-moz-box-shadow: 0 1px 0 #FFF;
-ms-box-shadow: 0 1px 0 #FFF;
box-shadow: 0 1px 0 #FFF;
-webkit-box-shadow: 0 1px 0 #FFF;
-moz-box-shadow: 0 1px 0 #FFF;
-ms-box-shadow: 0 1px 0 #FFF;
box-shadow: 0 1px 0 #FFF;
}
#parameters input.tiny {
width: 40px;
width: 40px;
}
#parameters input.small {
width: 80px;
width: 80px;
}
#parameters input.medium {
width: 120px;
width: 120px;
}
#parameters input.long {
width: 160px;
width: 160px;
}
#scene {
padding: 20px;
padding: 20px;
}
#scene > * {
margin: 0 auto;
margin: 0 auto;
}
.onEdit #scene {
}
.onEdit #parameters {
display: block;
display: block;
}
/*
.card-container {
-webkit-perspective: 600px;
width:100%;
height: 100%;
-webkit-perspective: 600px;
width:100%;
height: 100%;
}
.card {
position: relative;
width:100%;
height: 100%;
position: relative;
width:100%;
height: 100%;
}
.card > div {
position: absolute;
width:100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: all .5s ease-in-out;
-webkit-backface-visibility: hidden;
position: absolute;
width:100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: all .5s ease-in-out;
-webkit-backface-visibility: hidden;
}
.card > div:first-child {
-webkit-transform: rotateY( 0deg );
-webkit-transform: rotateY( 0deg );
}
.card > div:last-child {
-webkit-transform: rotateY( -180deg );
-webkit-transform: rotateY( -180deg );
}
.card.flip > div:first-child {
-webkit-transform: rotateY( 180deg );
-webkit-transform: rotateY( 180deg );
}
.card.flip > div:last-child {
-webkit-transform: rotateY( 0deg );
-webkit-transform: rotateY( 0deg );
}
*/

4
resources/library/interactivities/Memory.wgt/i18n/Messages.properties
Unescape View File

@ -1,7 +1,7 @@
fr.njin.i18n.document.title = Memory
fr.njin.i18n.toolbar.edit = Display
fr.njin.i18n.toolbar.view = Close
fr.njin.i18n.toolbar.edit = Edit
fr.njin.i18n.toolbar.view = Display
fr.njin.i18n.toolbar.reload = Reload
fr.njin.i18n.toolbar.help = Help

2
resources/library/interactivities/Memory.wgt/i18n/Messages_fr.properties
Unescape View File

@ -5,7 +5,7 @@ fr.njin.i18n.toolbar.view = Afficher
fr.njin.i18n.toolbar.reload = Recharger
fr.njin.i18n.toolbar.help = Aide
fr.njin.i18n.parameters.label.themes = Thèmes
fr.njin.i18n.parameters.label.themes = Thème
fr.njin.i18n.parameters.label.slate.themes = ardoise
fr.njin.i18n.parameters.label.pad.themes = tablette
fr.njin.i18n.parameters.label.none.themes = aucun

2
resources/library/interactivities/Memory.wgt/js/help_fr-template.js
Unescape View File

@ -12,5 +12,5 @@
<li>éditer directement une carte.</li>
</ul>
<p>Les cartes possèdent par défaut un champ texte. Pour insérer du texte, cliquez sur cette dernière et saisissez le texte désiré. Pour ajouter une image depuis votre bibliothèque, cochez la case “utiliser une image” et utilisez le glisser-déposer. Il faut au préalable retourner la carte avec le bouton bleu.</p>
<p>Attention, la paire de cartes doit être disposée en colonne lors de l'édition.</p>
<p>Les cartes sont disposées de manière aléatoire dans le mode jeu.</p>
<p>L’App est capable d’identifier les écritures mathématiques équivalentes (signes autorisés : “+”, “*”, “-”, “/” et les parenthèses).</p>

447
resources/library/interactivities/Memory.wgt/js/lib/ubw-main.js
Unescape View File

@ -13,257 +13,260 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
function log(object) {
console.log(object);
console.log(object);
}
function initAfterI18nMessagesLoaded(reload, templates, callbacks) {
document.title = fr.njin.i18n.document.title;
document.title = fr.njin.i18n.document.title;
var ubwidget = $("#ubwidget");
var ubwidget = $("#ubwidget");
var parameters = Object.create(Parameters,{
container: {
value: ubwidget
},
delegate: {
value: window.sankore || Object.create(ParametersDelegate)
}
});
var parameters = Object.create(Parameters,{
container: {
value: ubwidget
},
delegate: {
value: window.sankore || Object.create(ParametersDelegate)
}
});
var app = Object.create(App, {
container: {
value: ubwidget
},
parameters: {
value: parameters
},
reload: {
value: reload
}
});
var app = Object.create(App, {
container: {
value: ubwidget
},
parameters: {
value: parameters
},
reload: {
value: reload
}
});
app.init();
app.onEdit = false;
app.init();
app.onEdit = false;
if(templates.toolbar) {
$("#toolbar").html(Mustache.render(templates.toolbar, window));
}
if(templates.parameters) {
$("#parameters").html(Mustache.render(templates.parameters, window));
}
if(templates.toolbar) {
$("#toolbar").html(Mustache.render(templates.toolbar, window));
}
if(templates.parameters) {
$("#parameters").html(Mustache.render(templates.parameters, window));
}
if(callbacks.onTemplatesLoaded && typeof callbacks.onTemplatesLoaded === 'function') {
callbacks.onTemplatesLoaded(app);
}
if(callbacks.onTemplatesLoaded && typeof callbacks.onTemplatesLoaded === 'function') {
callbacks.onTemplatesLoaded(app);
}
log("Update setting views with stored parameters");
$("#parameters (input|select)[role=parameter]").each(function(i, input) {
(function(input){
var key = input.name;
var type = input.type;
var isRadioOrcheckbox = (type !== undefined && (type === "checkbox" || type === "radio"));
var stored = parameters.value(key);
if(isRadioOrcheckbox)
$(input).attr("checked", (typeof stored === "string" ? stored === "true" : stored));
else
$(input).val(stored);
$(input).change(function(){
var val = (isRadioOrcheckbox ? $(this).is(":checked") : $(this).val());
parameters.value(key, val);
});
})(input);
});
log("Update setting views with stored parameters");
$("#parameters (input|select)[role=parameter]").each(function(i, input) {
(function(input){
var key = input.name;
var type = input.type;
var isRadioOrcheckbox = (type !== undefined && (type === "checkbox" || type === "radio"));
var stored = parameters.value(key);
if(isRadioOrcheckbox)
$(input).attr("checked", (typeof stored === "string" ? stored === "true" : stored));
else
$(input).val(stored);
$(input).change(function(){
var val = (isRadioOrcheckbox ? $(this).is(":checked") : $(this).val());
parameters.value(key, val);
});
})(input);
});
log("Toobar Initialisation");
$("button[role=edit]").click(function(){
app.onEdit = true;
$(document.body).addClass("onEdit");
if(callbacks.onEdit && typeof callbacks.onEdit === 'function') {
callbacks.onEdit(app);
}
});
$("button[role=view]").click(function(){
app.onEdit = false;
$(document.body).removeClass("onEdit");
if(callbacks.onView && typeof callbacks.onView === 'function') {
callbacks.onView(app);
}
});
$("button[role=reload]").click(function(){
app.reload();
});
$("button[role=help]").click(function(){
$("body").toggleClass("showHelp");
});
log("Toobar Initialisation");
$("button[role=edit]").click(function(){
app.onEdit = true;
$(document.body).addClass("onEdit");
if(callbacks.onEdit && typeof callbacks.onEdit === 'function') {
callbacks.onEdit(app);
}
});
$("button[role=view]").click(function(){
app.onEdit = false;
$(document.body).removeClass("onEdit");
if(callbacks.onView && typeof callbacks.onView === 'function') {
callbacks.onView(app);
}
});
$("button[role=reload]").click(function(){
app.reload();
});
$("button[role=help]").click(function(){
$("body").toggleClass("showHelp");
});
$("select[name='themes']").change(function() {
$("body").get(0).className = $("body")[0].className.replace(/\btheme-[^\s]*\b/gi, '');
$("body").addClass("theme-"+$(this).val());
});
$("body").addClass("theme-"+$("select[name='themes']").val());
$("select[name='themes']").change(function() {
$("body").get(0).className = $("body")[0].className.replace(/\btheme-[^\s]*\b/gi, '');
$("body").addClass("theme-"+$(this).val());
});
$("body").addClass("theme-"+$("select[name='themes']").val());
}
function init(reload, templates, callbacks){
var locale = window.sankore ? sankore.locale() : "";
$.i18n.properties({
name: 'Messages',
path: 'i18n/',
language: locale,
callback: function(){
initAfterI18nMessagesLoaded(reload, templates, callbacks);
}
});
var locale = window.sankore ? sankore.locale() : "";
$.i18n.properties({
name: 'Messages',
path: 'i18n/',
language: locale,
callback: function(){
initAfterI18nMessagesLoaded(reload, templates, callbacks);
}
});
}
var Parameters = (function(){
var self = Object.create({}, {
container: {
value: null
},
delegate: {
value: null
},
value: {
value: function(key, value) {
if(value === undefined) {
var val = this.delegate.preference(key);
log("Retrieve parameter value ["+val+"] as type ["+(typeof val)+"] for key : ["+key+"]");
return (val !== undefined && (typeof val !== "string" || val)) ? val : $("#ubwidget").data(key);
}
else {
log("Set parameter value ["+value+"] for key : ["+key+"]");
this.delegate.setPreference(key, value);
this.container.trigger("preferenceChange", {key: key, value: value});
}
}
}
});
return self;
var self = Object.create({}, {
container: {
value: null
},
delegate: {
value: null
},
value: {
value: function(key, value) {
if(value === undefined) {
var val = this.delegate.preference(key);
log("Retrieve parameter value ["+val+"] as type ["+(typeof val)+"] for key : ["+key+"]");
return (val !== undefined && (typeof val !== "string" || val)) ? val : $("#ubwidget").data(key);
}
else {
log("Set parameter value ["+value+"] for key : ["+key+"]");
this.delegate.setPreference(key, value);
this.container.trigger("preferenceChange", {
key: key,
value: value
});
}
}
}
});
return self;
})();
var ParametersDelegate = (function(){
var self = Object.create({}, {
preference: {
value: function(key) {
return this[key];
}
},
setPreference: {
value: function(key, value) {
this[key] = value;
}
}
});
return self;
var self = Object.create({}, {
preference: {
value: function(key) {
return this[key];
}
},
setPreference: {
value: function(key, value) {
this[key] = value;
}
}
});
return self;
})();
var App = (function() {
var self = Object.create({}, {
container: {
value: null
},
parameters: {
value: null
},
container: {
value: null
},
parameters: {
value: null
},
init: {
value: function() {
var that = this;
this.container.bind("preferenceChange", function(evt, parameter) {
that.reload(parameter);
});
this.reload();
}
value: function() {
var that = this;
this.container.bind("preferenceChange", function(evt, parameter) {
that.reload(parameter);
});
this.reload();
}
},
reload: {
value: function(parameter) {
if(parameter === undefined)
log("Reload");
else
log("Update");
}
},
reload: {
value: function(parameter) {
if(parameter === undefined)
log("Reload");
else
log("Update");
}
},
utils: {
value: Object.create({}, {
shuffle: {
value: function(array) {
var unpickedSize = array.length;
while(unpickedSize > 0) {
var n = Math.floor(Math.random()*unpickedSize);
var temp = array[unpickedSize-1];
array[unpickedSize-1] = array[n];
array[n] = temp;
unpickedSize--;
}
}
},
guid: {
value: function() {
var S4 = function() {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
};
return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}
},
droppable: {
value: function($e, callback) {
$e.bind("dragover", function(){
$(this).addClass("hover");
return false;
});
$e.bind("dragleave", function(){
$(this).removeClass("hover");
return false;
});
$e.bind("drop", function(e){
$(this).removeClass("hover");
e = e || window.event;
e.preventDefault();
// jQuery wraps the originalEvent, so we try to detect that here...
e = e.originalEvent || e;
utils: {
value: Object.create({}, {
shuffle: {
value: function(array) {
var unpickedSize = array.length;
while(unpickedSize > 0) {
var n = Math.floor(Math.random()*unpickedSize);
var temp = array[unpickedSize-1];
array[unpickedSize-1] = array[n];
array[n] = temp;
unpickedSize--;
}
}
},
guid: {
value: function() {
var S4 = function() {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
};
return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}
},
droppable: {
value: function($e, callback) {
$e.bind("dragover", function(){
$(this).addClass("hover");
return false;
});
$e.bind("dragleave", function(){
$(this).removeClass("hover");
return false;
});
$e.bind("drop", function(e){
$(this).removeClass("hover");
e = e || window.event;
e.preventDefault();
// jQuery wraps the originalEvent, so we try to detect that here...
e = e.originalEvent || e;
if(window.sankore) {
function stringToXML(text){
if (window.ActiveXObject){
var doc=new ActiveXObject('Microsoft.XMLDOM');
doc.async='false';
doc.loadXML(text);
} else {
var parser=new DOMParser();
doc=parser.parseFromString(text,'text/xml');
}
return doc;
}
var file = stringToXML(e.dataTransfer.getData("text/plain"));
callback({
src: $(file).find("path:eq(0)").text()
});
return false;
}
if(window.sankore) {
function stringToXML(text){
if (window.ActiveXObject){
var doc=new ActiveXObject('Microsoft.XMLDOM');
doc.async='false';
doc.loadXML(text);
} else {
var parser=new DOMParser();
doc=parser.parseFromString(text,'text/xml');
}
return doc;
}
var file = stringToXML(e.dataTransfer.getData("text/plain"));
callback({
src: $(file).find("path:eq(0)").text()
});
return false;
}
// Using e.files with fallback because e.dataTransfer is immutable and can't be overridden in Polyfills (http://sandbox.knarly.com/js/dropfiles/).
var files = (e.files || e.dataTransfer.files);
for (var i = 0; i < files.length; i++) {
// Loop through our files with a closure so each of our FileReader's are isolated.
(function (i) {
if(typeof FileReader !== "undefined") {
var reader = new FileReader();
reader.onload = function (event) {
callback({
src: event.target.result,
title: (files[i].name),
alt: (files[i].name)
});
};
reader.readAsDataURL(files[i]);
}
})(i);
}
return false;
});
}
}
})
}
// Using e.files with fallback because e.dataTransfer is immutable and can't be overridden in Polyfills (http://sandbox.knarly.com/js/dropfiles/).
var files = (e.files || e.dataTransfer.files);
for (var i = 0; i < files.length; i++) {
// Loop through our files with a closure so each of our FileReader's are isolated.
(function (i) {
if(typeof FileReader !== "undefined") {
var reader = new FileReader();
reader.onload = function (event) {
callback({
src: event.target.result,
title: (files[i].name),
alt: (files[i].name)
});
};
reader.readAsDataURL(files[i]);
}
})(i);
}
return false;
});
}
}
})
}
});
return self;
})();

321
resources/library/interactivities/Memory.wgt/js/main.js
Unescape View File

@ -6,10 +6,10 @@ var Card = (function() {
value: -1,
writable: true
},
id: {
value: -1,
id: {
value: -1,
writable: true
},
},
index: {
value: -1,
writable: true
@ -39,32 +39,32 @@ var Game = (function() {
},
init: {
value: function(count) {
if(typeof count !== "number"){
log("Cards count must be an number");
return;
}
this.cards = new Array(count);
if(typeof count !== "number"){
log("Cards count must be an number");
return;
}
this.cards = new Array(count);
for (i = 0; i < this.cards.length / 2; i++) {
var card = Object.create(Card, {
val: {
value: i+1
},
id: {
value: i*2
}
id: {
value: i*2
}
});
card.index = card.id;
card.index = card.id;
var card2 = Object.create(Card, {
val: {
value: i+1
},
id: {
value: card.index+1
}
id: {
value: card.index+1
}
});
card2.index = card2.id;
this.cards[card.index] = card;
this.cards[card2.index] = card2;
card2.index = card2.id;
this.cards[card.index] = card;
this.cards[card2.index] = card2;
}
}
},
@ -77,17 +77,17 @@ var Game = (function() {
})();
function onTemplateLoadedCallback() {
$("select[name=count]").each(function(i, select) {
var min = $(select).data("min");
var max = $(select).data("max");
for(var i = min ; i <= max ; i=i+2) {
var option = $("<option/>");
option.val(i);
option.text(fr.njin.i18n.memory.parameters.option.cards(i));
$(select).append(option);
}
});
/*
$("select[name=count]").each(function(i, select) {
var min = $(select).data("min");
var max = $(select).data("max");
for(var i = min ; i <= max ; i=i+2) {
var option = $("<option/>");
option.val(i);
option.text(fr.njin.i18n.memory.parameters.option.cards(i));
$(select).append(option);
}
});
/*
$("#timeoutValue").text($("input[name=timeout]").val());
$("input[name=timeout]").change(function(){
$("#timeoutValue").text($(this).val());
@ -96,146 +96,149 @@ function onTemplateLoadedCallback() {
}
function reloadApp(app) {
var cardsCount = parseInt(app.parameters.value("count"));
var timeout = parseInt(app.parameters.value("timeout"))*1000;
var scene = $("#scene");
var table = $("<div id='table'/>");
scene.empty();
scene.append(table);
var game = Object.create(Game);
game.init(cardsCount);
var rows = new Array(game.cards.length/2);
for(i = 0 ; i < game.cards.length/2 ; i++) {
var row = $("<div/>");
table.append(row);
rows[i] = row;
}
if(!app.onEdit)
app.utils.shuffle(game.cards);
for(i = 0 ; i < game.cards.length ; i++) {
(function(){
var card = game.cards[i];
var defaultValue = defaults[card.index]
card.index = i;
var pFrontTextKey = cardTextParameterKey(card, 0);
var pBackTextKey = cardTextParameterKey(card, 1);
window.card = card;
window.frontDisplayValue = app.parameters.value(pFrontTextKey) || "?";
window.backDisplayValue = app.parameters.value(pBackTextKey) || defaultValue;
var cardView = $(Mustache.render(cardTemplate, window));
rows[i%2].append(cardView);
cardView.data("card", card);
var checkbox = cardView.find("input[name='switch']");
function setSwicth(index) {
var val = app.parameters.value("#UsePicture"+cardParameterKey(card, index)) === "true";
var $p = cardView.find(".cards > div").eq(index);
if(val) {
$p.addClass("usePicture");
}else {
$p.removeClass("usePicture");
}
checkbox.eq(index).attr("checked", val);
}
checkbox.each(function(index) {
$(this).change(function() {
app.parameters.value("#UsePicture"+cardParameterKey(card, index), $(this).is(':checked'));
setSwicth(index);
});
});
setSwicth(0);
setSwicth(1);
var dropzone = cardView.find(".dropzone");
function setPicture(index) {
var f = $.parseJSON(app.parameters.value("#Picture"+cardParameterKey(card, index)));
var pictureHolder = dropzone.eq(index).parent().find(">div:eq(0)");
if(f !== null) {
var $img = $('<img src="" class="uploadPic" title="" alt="" />').attr(f);
pictureHolder.empty();
pictureHolder.append($img);
}
}
dropzone.each(function(index){
app.utils.droppable($(this), function(f) {
app.parameters.value("#Picture"+cardParameterKey(card, index), JSON.stringify(f));
setPicture(index);
});
});
setPicture(0);
setPicture(1);
})();
}
if(!app.onEdit) {
$(".cards>div:first-child").click(function(){
var cardView = $(this).parent();
var card = cardView.parent().parent().data("card");
cardView.toggleClass("flip");
log("Flip card at index "+card.index+" w/ value "+card.val);
if(game.selected == null)
game.selected = card;
else{
var toCompare = game.selected;
log("Compare w/ card at index "+toCompare.index+" w/ value "+toCompare.val);
var isMatch = card.isMatch(toCompare);
if(!isMatch) {
var index = toCompare.index;
var otherCardView = rows[index%2].find(">div").eq(Math.floor(index/2)).find(".cards:eq(0)");
setTimeout(function(){
cardView.toggleClass("flip");
otherCardView.toggleClass("flip");
}, timeout);
}else{
game.matches++;
}
game.selected = null;
}
});
}else{
$(".card .text > div").each(function(i, e) {
var card = $(e).parent().parent().parent().parent().parent().parent().data("card");
var pKey = cardTextParameterKey(card, i);
e.contentEditable = true;
$(e).bind('blur keyup paste', function(){
app.parameters.value(pKey, $(this).text());
});
});
$(".card-container .actions button[role=flip]").click(function(){
var cardView = $(this).parent().parent().find(">.cards:eq(0)");
cardView.toggleClass("flip");
});
$(".card-container .actions button[role=flip]").click();
}
if(window.sankore)
window.sankore.enableDropOnWidget(app.onEdit);
var cardsCount = parseInt(app.parameters.value("count"));
var timeout = parseInt(app.parameters.value("timeout"))*1000;
var scene = $("#scene");
var table = $("<div id='table'/>");
scene.empty();
scene.append(table);
var game = Object.create(Game);
game.init(cardsCount);
var rows = new Array(game.cards.length/2);
for(i = 0 ; i < game.cards.length/2 ; i++) {
var row = $("<div/>");
table.append(row);
rows[i] = row;
}
if(!app.onEdit)
app.utils.shuffle(game.cards);
for(i = 0 ; i < game.cards.length ; i++) {
(function(){
var card = game.cards[i];
var defaultValue = defaults[card.index]
card.index = i;
var pFrontTextKey = cardTextParameterKey(card, 0);
var pBackTextKey = cardTextParameterKey(card, 1);
window.card = card;
window.frontDisplayValue = app.parameters.value(pFrontTextKey) || "?";
window.backDisplayValue = app.parameters.value(pBackTextKey) || defaultValue;
var cardView = $(Mustache.render(cardTemplate, window));
rows[i%2].append(cardView);
cardView.data("card", card);
var checkbox = cardView.find("input[name='switch']");
function setSwicth(index) {
var val = app.parameters.value("#UsePicture"+cardParameterKey(card, index)) === "true";
var $p = cardView.find(".cards > div").eq(index);
if(val) {
$p.addClass("usePicture");
}else {
$p.removeClass("usePicture");
}
checkbox.eq(index).attr("checked", val);
}
checkbox.each(function(index) {
$(this).change(function() {
app.parameters.value("#UsePicture"+cardParameterKey(card, index), $(this).is(':checked'));
setSwicth(index);
});
});
setSwicth(0);
setSwicth(1);
var dropzone = cardView.find(".dropzone");
function setPicture(index) {
var f = $.parseJSON(app.parameters.value("#Picture"+cardParameterKey(card, index)));
var pictureHolder = dropzone.eq(index).parent().find(">div:eq(0)");
if(f !== null) {
var $img = $('<img src="" class="uploadPic" title="" alt="" />').attr(f);
pictureHolder.empty();
pictureHolder.append($img);
}
}
dropzone.each(function(index){
app.utils.droppable($(this), function(f) {
app.parameters.value("#Picture"+cardParameterKey(card, index), JSON.stringify(f));
setPicture(index);
});
});
setPicture(0);
setPicture(1);
})();
}
if(!app.onEdit) {
$(".cards>div:first-child").click(function(){
var cardView = $(this).parent();
var card = cardView.parent().parent().data("card");
cardView.toggleClass("flip");
log("Flip card at index "+card.index+" w/ value "+card.val);
if(game.selected == null)
game.selected = card;
else{
var toCompare = game.selected;
log("Compare w/ card at index "+toCompare.index+" w/ value "+toCompare.val);
var isMatch = card.isMatch(toCompare);
if(!isMatch) {
var index = toCompare.index;
var otherCardView = rows[index%2].find(">div").eq(Math.floor(index/2)).find(".cards:eq(0)");
setTimeout(function(){
cardView.toggleClass("flip");
otherCardView.toggleClass("flip");
}, timeout);
}else{
game.matches++;
}
game.selected = null;
}
});
}else{
$(".card .text > div").each(function(i, e) {
var card = $(e).parent().parent().parent().parent().parent().parent().data("card");
var pKey = cardTextParameterKey(card, i);
e.contentEditable = true;
$(e).bind('blur keyup paste', function(){
app.parameters.value(pKey, $(this).text());
});
});
$(".card-container .actions button[role=flip]").click(function(){
var cardView = $(this).parent().parent().find(">.cards:eq(0)");
cardView.toggleClass("flip");
});
$(".card-container .actions button[role=flip]").click();
}
if(window.sankore)
window.sankore.enableDropOnWidget(app.onEdit);
}
function cardParameterKey(card, i) {
return "card"+card.id+(i%2==0 ? "Front":"Back");
return "card"+card.id+(i%2==0 ? "Front":"Back");
}
function cardTextParameterKey(card, i) {
return cardParameterKey(card, i)+"Text";
return cardParameterKey(card, i)+"Text";
}
function reloadCallback(parameter) {
if(parameter === undefined || parameter.key === "count")
reloadApp(this);
if(parameter === undefined || parameter.key === "count")
reloadApp(this);
}
$(document).ready(function(){
var callbacks = {
onTemplatesLoaded: onTemplateLoadedCallback,
onEdit: reloadApp,
onView: reloadApp
};
init(reloadCallback, {toolbar: toolbarTemplate, parameters: parametersTemplate}, callbacks);
var callbacks = {
onTemplatesLoaded: onTemplateLoadedCallback,
onEdit: reloadApp,
onView: reloadApp
};
init(reloadCallback, {
toolbar: toolbarTemplate,
parameters: parametersTemplate
}, callbacks);
});

4
resources/library/interactivities/Transformation.wgt/config.xml
Unescape View File

@ -3,8 +3,8 @@
xmlns:ub="http://uniboard.mnemis.com/widgets"
id="http://www.njin.fr/sankore/apps/tableur"
version="1.0"
width="972"
height="400"
width="1050"
height="560"
ub:resizable="true">
<name>La boite à transformation</name>

Write Preview
Loading…
Cancel
Save