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" id="http://www.njin.fr/sankore/apps/memory"
version="1.0" version="1.0"
width="820" width="820"
height="575" height="670"
ub:resizable="true"> ub:resizable="true">
<name>Memory</name> <name>Memory</name>

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

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

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

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

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

Loading…
Cancel
Save