widget resized to avoid scrollbars, and some wording

preferencesAboutTextFull
Claudio Valerio 12 years ago
parent 553c99df87
commit ec09f1604f
  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

@ -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>

@ -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;
}

@ -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 );
}
*/

@ -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

@ -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

@ -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>LApp est capable didentifier les écritures mathématiques équivalentes (signes autorisés : +, *, -, / et les parenthèses).</p>

@ -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;
})();

@ -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);
});

@ -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>

Loading…
Cancel
Save