From ec09f1604f1f366253f713040b0e6d896a5ba1d4 Mon Sep 17 00:00:00 2001 From: Claudio Valerio Date: Fri, 2 Nov 2012 11:59:47 +0100 Subject: [PATCH] widget resized to avoid scrollbars, and some wording --- .../interactivities/Memory.wgt/config.xml | 2 +- .../interactivities/Memory.wgt/css/main.css | 266 ++++++----- .../Memory.wgt/css/ubw-main.css | 310 ++++++------ .../Memory.wgt/i18n/Messages.properties | 6 +- .../Memory.wgt/i18n/Messages_fr.properties | 4 +- .../Memory.wgt/js/help_fr-template.js | 2 +- .../Memory.wgt/js/lib/ubw-main.js | 447 +++++++++--------- .../interactivities/Memory.wgt/js/main.js | 301 ++++++------ .../Transformation.wgt/config.xml | 4 +- 9 files changed, 679 insertions(+), 663 deletions(-) diff --git a/resources/library/interactivities/Memory.wgt/config.xml b/resources/library/interactivities/Memory.wgt/config.xml index be177a3b..1b953299 100644 --- a/resources/library/interactivities/Memory.wgt/config.xml +++ b/resources/library/interactivities/Memory.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"> Memory diff --git a/resources/library/interactivities/Memory.wgt/css/main.css b/resources/library/interactivities/Memory.wgt/css/main.css index 6d0fd8c3..064d41f4 100644 --- a/resources/library/interactivities/Memory.wgt/css/main.css +++ b/resources/library/interactivities/Memory.wgt/css/main.css @@ -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; - - overflow: hidden; - - -webkit-border-radius: 8px; - -moz-border-radius: 8px; - -ms-border-radius: 8px; - border-radius: 8px; + position: relative; + white-space: normal; + width: 180px; + height: 180px; + + overflow: hidden; + + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + -ms-border-radius: 8px; + border-radius: 8px; +} + +.front{ + height: 100%; + } .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; - - 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; + display: none; + + 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; } .usePicture .card .picture { - display: block; + display: block; } .card .picture > div { - 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; + 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; } .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; - - -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; + 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; } .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; -} \ No newline at end of file + display: block; +} diff --git a/resources/library/interactivities/Memory.wgt/css/ubw-main.css b/resources/library/interactivities/Memory.wgt/css/ubw-main.css index 09b0a91b..6c7df2dc 100644 --- a/resources/library/interactivities/Memory.wgt/css/ubw-main.css +++ b/resources/library/interactivities/Memory.wgt/css/ubw-main.css @@ -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; - - -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; + 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; } .theme-slate #ubwidget { - 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; + 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; } #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; - - cursor: pointer; - padding-left: 34px; - margin-left: 10px; - height: 32px; + border: none; + padding: none; + outline: none; + background: none; + + 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"); - - -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; + 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; } #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; - - padding: 0 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; + height: 26px; + border: 1px solid #BBB; + background-color: #FFF; + + padding: 0 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; } #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 ); } */ \ No newline at end of file diff --git a/resources/library/interactivities/Memory.wgt/i18n/Messages.properties b/resources/library/interactivities/Memory.wgt/i18n/Messages.properties index c610dea9..82c422ae 100644 --- a/resources/library/interactivities/Memory.wgt/i18n/Messages.properties +++ b/resources/library/interactivities/Memory.wgt/i18n/Messages.properties @@ -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 @@ -16,4 +16,4 @@ fr.njin.i18n.memory.parameters.label.timeout = Timeout fr.njin.i18n.memory.label.usePicture = Image fr.njin.i18n.memory.label.drop = Drag and drop here -fr.njin.i18n.memory.action.flip = Flip \ No newline at end of file +fr.njin.i18n.memory.action.flip = Flip diff --git a/resources/library/interactivities/Memory.wgt/i18n/Messages_fr.properties b/resources/library/interactivities/Memory.wgt/i18n/Messages_fr.properties index 3b35c9c6..36552eec 100644 --- a/resources/library/interactivities/Memory.wgt/i18n/Messages_fr.properties +++ b/resources/library/interactivities/Memory.wgt/i18n/Messages_fr.properties @@ -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 @@ -16,4 +16,4 @@ fr.njin.i18n.memory.parameters.label.timeout = Délai fr.njin.i18n.memory.label.usePicture = Utiliser une image fr.njin.i18n.memory.label.drop = Glisser une ressource ici -fr.njin.i18n.memory.action.flip = Tourner \ No newline at end of file +fr.njin.i18n.memory.action.flip = Tourner diff --git a/resources/library/interactivities/Memory.wgt/js/help_fr-template.js b/resources/library/interactivities/Memory.wgt/js/help_fr-template.js index 1d15950e..c9716d7d 100644 --- a/resources/library/interactivities/Memory.wgt/js/help_fr-template.js +++ b/resources/library/interactivities/Memory.wgt/js/help_fr-template.js @@ -12,5 +12,5 @@
  • éditer directement une carte.

    • 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.

    +

    Attention, la paire de cartes doit être disposée en colonne lors de l'édition.

    Les cartes sont disposées de manière aléatoire dans le mode jeu.

    -

    L’App est capable d’identifier les écritures mathématiques équivalentes (signes autorisés : “+”, “*”, “-”, “/” et les parenthèses).

    \ No newline at end of file diff --git a/resources/library/interactivities/Memory.wgt/js/lib/ubw-main.js b/resources/library/interactivities/Memory.wgt/js/lib/ubw-main.js index 06213d1c..1319acca 100644 --- a/resources/library/interactivities/Memory.wgt/js/lib/ubw-main.js +++ b/resources/library/interactivities/Memory.wgt/js/lib/ubw-main.js @@ -13,257 +13,260 @@ * along with this program. If not, see . */ 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; })(); \ No newline at end of file diff --git a/resources/library/interactivities/Memory.wgt/js/main.js b/resources/library/interactivities/Memory.wgt/js/main.js index 0377a27e..1becd0ce 100644 --- a/resources/library/interactivities/Memory.wgt/js/main.js +++ b/resources/library/interactivities/Memory.wgt/js/main.js @@ -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 = $("