Changeset 6550

Timestamp:

Dec 22, 2017, 2:28:53 PM (3 years ago)

Author:

joamuran

Message:

wip

Location:

classroom-assembly/trunk/fuentes

Files:

• classroom-assembly/src/components/weekday/weekday.css (modified) (3 diffs)
• classroom-assembly/src/components/weekday/weekday.js (modified) (8 diffs)
• classroom-assembly/src/js/main.js (modified) (2 diffs)
• classroom-assembly/src/locale/ca_ES.UTF-8.json (modified) (1 diff)
• classroom-assembly/src/locale/en_US.UTF-8.json (modified) (1 diff)
• classroom-assembly/src/locale/es_ES.UTF-8.json (modified) (1 diff)
• config_examples/oo/config.json (modified) (1 diff)

classroom-assembly/trunk/fuentes/classroom-assembly/src/components/weekday/weekday.css

@@ -133 +133 @@
 
 .weekdayConfigRow{
-    border: 1px solid #cccccc;
+    /*border: 1px solid #cccccc;*/
     border-radius: 2px;
     margin-bottom: 5px;
+    opacity: 0.3;
+    filter: grayscale(80%);
 }
 
@@ -143 +145 @@
 }
 
-.weekdayConfigRow.weekdayStatusActive:after{
-    background-image: url("../../css/images/icons/check.png");
+
+.weekdayConfigRow.weekdayStatusActive{
+    filter: grayscale(0%);
+    opacity: 1;
+}
+
+/*.weekdayConfigRow.weekdayStatusActive:after{
+    / *background-image: url("../../css/images/icons/check.png");* /
+    background-image: url("../../css/images/icons/eye.png");
     background-size: 24px 24px;
     background-position: center;
@@ -155 +164 @@
     margin-top: -12px;
     right: 10px;
+}*/
+
+
+.configureComponentButton{
+    background-image: url("../../css/images/icons/options.png");
+    width: 32px;
+    height:32px;
+    background-position: center;
+    margin-top:12px;
+    background-size: cover;
 }
 
 
-
-

classroom-assembly/trunk/fuentes/classroom-assembly/src/components/weekday/weekday.js

@@ -285 +285 @@
     for (var weekday in self.config){
         var configRow=$(document.createElement("div")).addClass("weekdayConfigRow").addClass("col-md-4 col-md-offset-4").attr("weekday_data", weekday);
+        
+        /**/
+        var configRowDay=$(document.createElement("div")).addClass("col-md-10").attr("weekday_data", weekday);
+        
         if (self.config[weekday]) $(configRow).addClass("weekdayStatusActive");
         
@@ -290 +294 @@
         
         var icon=$(document.createElement("div")).addClass(weekday).addClass("weekdayConfigIcon modifyable").attr("title", i18n.gettext("click.change.img"));
+        
         var text=$(document.createElement("div")).html(weekdayText).addClass("weekdayConfigText");
         /*var selected=$(document.createElement("input")).attr("type","checkbox");*/
         
-        $(configRow).append(icon);
-        $(configRow).append(text);
+        var iconConfigBt=$(document.createElement("div")).addClass("configureComponentButton col-md-1").attr("title", i18n.gettext("click.set.actions")).attr("weekday", weekday).attr("actions","");
+        
+        /**/
+        $(configRowDay).append(icon);
+        $(configRowDay).append(text);
+        $(configRow).append(configRowDay);
+        $(configRow).append(iconConfigBt);
+        
         /*$(configRow).append(selected);*/
         $(input).append(configRow);
@@ -309 +320 @@
             else $(this).addClass("weekdayStatusActive");
             });
+        
+        $(".configureComponentButton").on("click", function (event) {
+            event.stopPropagation();
+            event.preventDefault();
+            //console.log($(event.target).parent().attr("weekday_data"));
+            var weekday=$(event.target).attr("weekday");
+            console.log(self.config[weekday]);
+            if (self.hasOwnProperty("actions"))
+                self.showConfigActions(weekday);
+        });
         
         // Calling to parent class method to bind click event on icon for change its image
@@ -330 +351 @@
 };
 
+
+weekdayComponentClass.prototype.createFormRadios=function createFormRadios(data){
+    
+    
+    var ret=$(document.createElement("div")).addClass("custom-controls-stacked");
+    var legend=$(document.createElement("legend")).html(data.name);
+    
+    $(ret.append(legend));
+    
+    for (radio in data.radios){
+        console.log(data.radios[radio].id);
+        
+        // WIP
+        // https://getbootstrap.com/docs/4.0/components/forms/#default-stacked
+        var div=$(document.createElement("div")).addClass("form-check");
+        var input=$(document.createElement("input")).attr("id", data.radios[radio].id).attr("type","radio").attr("name", data.name).addClass("form-check-input");
+        var label=$(document.createElement("label")).addClass("form-check-label");
+        var spanlabel=$(document.createElement("span")).html(data.radios[radio].label).css("margin-left", "20px");
+        
+        var divtext=$(document.createElement("div")).addClass("col-md-8 col-md-offset-2");
+        var labeltext=$(document.createElement("span")).addClass("col-md-4").html("Text");
+        var text=$(document.createElement("input")).attr("type", "text").addClass("col-md-6");
+        $(divtext).append(labeltext, text);
+        
+                
+        $(label).append(input, spanlabel);
+        $(div).append(label, divtext);
+        $(ret).append(div);
+    }
+    
+    return ret;
+    
+}
+
+weekdayComponentClass.prototype.showConfigActions=function showConfigActions(weekday){
+    
+        var self=this;
+        // WIP: Construir-ho com a javascript per poder posar les traduccions
+        // Mirar també els laber for i tal de bootstrap i els form-control...
+        
+        //var input="";
+        /*var form=document.createElement("div");
+        var hdr1=$(document.createElement("h3")).html(i18n.gettext("actions.on.show"));
+        $(form).append(hdr1);*/
+        
+        var form;
+        var input="";
+        
+        form=self.createFormRadios({
+            "name":"Action.on.show",
+            "radios":{
+                "r1":{
+                    "id": "speakOnShow",
+                    "type": "text",
+                    "label": "Speak"
+                    },
+                "r2":{
+                    "id": "playOnShow",
+                    "type": "file",
+                    "label": "Play"
+                    }
+                }
+            });
+        
+        /*var row1=$(document.createElement("div")).addClass("col-md-8 col-md-offset-2");
+        var colShowSpeakRadio=$(document.createElement("div")).addClass("col-md-5");
+        
+        var label4inputShowSpeakRadio=$(document.createElement("label")).attr("for", "inputRadioOnShowSpeak").html("label.speak");
+        
+        var colShowSpeakText=$(document.createElement("div")).addClass("col-md-4");
+        var inputShowSpeakRadio=$(document.createElement("input")).attr("type", "radio").attr("value", "speak").attr("id", "inputRadioOnShowSpeak");
+        var inputTextOnShowSpeak=$(document.createElement("input")).attr("type", "text").attr("value", "aci el text").attr("id", "inputTextOnShowSpeak").addClass("col-md-4");
+        $(colShowSpeakRadio).append(inputShowSpeakRadio, label4inputShowSpeakRadio);
+        $(colShowSpeakText).append(inputTextOnShowSpeak);
+        $(row1).append(colShowSpeakRadio, colShowSpeakText);
+        $(form).append(row1);
+        */
+        
+        
+        
+        console.log(form);
+        input=input+form.prop("outerHTML");
+        
+        
+        
+        //var row1=$(document.createElement("div"));
+        
+        /*input='<h3>Actions on show</h3>\<div class="row" style="width: 60%">'
+        +'<div class="col-md-4"><input class="form-control" type="radio" name="onshow" value="speak" id="inputRadioOnShowSpeak"> Speak </div>'
+        +'<div class="col-md-4"><input type="text" value="text" id="inputTextOnShowSpeak"/></div></div>'
+        +'<div class="row"  style="width: 60%">'
+          +'<div class="col-md-4"><input type="radio" name="onshow" value="audio" id="inputRadioOnShowAudio"> Audio</div>'
+            +'<div class="col-md-4"><input type="file" value="bb" id="inputFileOnShow"/></div></div>'
+        +'<div>Media player</div>'
+        +'<div class="row" style="width: 60%">'
+            +'<div class="col-md-4"><input type="radio" name="onplay" value="audio" id="inputRadioOnPlayAudio"> Audio File</div>'
+            +'<div class="col-md-4"><input type="file" value="bb" id="inputOnPlayAudio"/></div></div>'
+        +'<div class="row" style="width: 60%">'
+            +'<div class="col-md-4"><input type="radio" name="onplay" value="video" id="inputRadioOnPlayVideo"> Video File</div>'
+                +'<div class="col-md-4"><input type="file" value="bb" id="inputOnPlayVideo"/></div></div>'
+        +'<div class="row" style="width: 60%">'
+            +'<div class="col-md-4"><input type="radio" name="onplay" value="youtube" id="inputRadioOnPlayYoutube">Youtube Resource</div>'
+            +'<div class="col-md-4"><input type="text" value="text" id="inputOnPlayYoutube"/></div></div>';
+        */
+        
+        
+
+         vex.dialog.open({
+            message: i18n.gettext(weekday),
+            input: input,
+            showCloseButton: true,
+            escapeButtonCloses: true,
+            /*buttons: {},*/
+            overlayClosesOnClick: true,
+            callback: function(data){ alert("done"); }
+            });
+    
+    
+};
+
+
+
 weekdayComponentClass.prototype.getPlayableContent=function getPlayableContent(){
     var self=this;
@@ -335 +478 @@
     var item=$(document.createElement("div")).addClass("PlayableContent");
     
-   
     var toptext=$(document.createElement("div")).html(i18n.gettext("today is")).css("text-align","center").css("top", "0px").attr("fontzoom", "1.2").addClass("textfluid").css("z-index","1001").css("position", "absolute");
     var icon=$(document.createElement("div")).addClass(self.info.weekday+" playBigIcon");
@@ -341 +483 @@
     
     try{
-    console.log("getting action: "+self.actions[self.info.weekday].onshow.action);
-    if(self.actions[self.info.weekday].onshow.action=="speech") {
+    console.log("Actions..");
+    
+    // pastafangà starts here
+    
+    
+    var defaultonshow="";
+    var defaultonshowcontent="";
+    var defaultonplay="";
+    var defaultonplaycontent="";
+    var defaultonplaytype="";
+    
+    /*console.log("1 "+self.hasOwnProperty("actions"));
+    console.log(self.actions[self.info.weekday]);
+    console.log(self.actions[self.info.weekday].onshow);
+    console.log("4 "+self.actions[self.info.weekday].onshow.action);*/
+    
+    
+    
+    if(self.hasOwnProperty("actions")){
+        // actions is defined
+        
+        // Setting default on show behaviour
+        if (typeof(self.actions.default!="undefined"))
+            {
+                defaultonshow=self.actions.default.onshow.action;
+                
+                if(self.actions.default.onshow.action=="speech") {
+                console.log("DEFAULT ACTION IS SPEECH...");
+                // Is content defined?
+                if (self.actions.default.onshow.content!==undefined &&
+                    self.actions.default.onshow.content!=="")
+                        { defaultonshowcontent=self.actions.default.onshow.content; }
+                    else {defaultonshowcontent=i18n.gettext("today is")+" "+i18n.gettext(self.info.weekday);}
+                } else { // action is not speech
+                    defaultonshowcontent=self.actions.default.onshow.content;
+                }
+                
+                // Setting default on play
+                defaultonplay=self.actions.default.onshow.action;  
+                
+                if(self.actions.default.onplay.action=="sound" ||
+                 self.actions.dedault.onplay.action=="video") {
+            
+                    if (self.actions.default.onplay.source!==undefined &&
+                        self.actions.default.onplay.source!=="")
+                            {
+                            defaultonplay=self.actions.default.onplay.action;
+                            defaultonplaycontent=self.actions.default.onplay.source;
+                            defaultonplaytype=self.actions.default.onplay.type;
+                            }
+                } 
+        }
+       
+       
+       
+        /* Setting behaviour for component */
+        
+        // On Show
+        if (self.actions.hasOwnProperty(self.info.weekday)){
+            if(typeof(self.actions[self.info.weekday].onshow.action)!=="undefined" &&
+            (self.actions[self.info.weekday].onshow.action!=="default")) {
+            // Si hi ha acció definida per al dia de la setmana
+            if(self.actions[self.info.weekday].onshow.action=="speech") {
+                // Is content defined?
+                if (self.actions[self.info.weekday].onshow.content!==undefined &&
+                    self.actions[self.info.weekday].onshow.content!=="")
+                        {$(item).attr("tts", self.actions[self.info.weekday].onshow.content);}
+                    else {$(item).attr("tts", i18n.gettext("today is")+" "+i18n.gettext(self.info.weekday));}
+                } else { // action is not speech
+                $(item).attr("audiofile",self.actions[self.info.weekday].onshow.content );
+                }
+            }} else{
+                // No hi ha acció definida per al dia de la setmana, agafem els valor per defecte
+                console.log("Setting up default actions for show...");
+                if (defaultonshow=="speech")  {$(item).attr("tts", defaultonshowcontent);}
+                else {$(item).attr("audiofile", defaultonshowcontent);}
+            }
+                    
+     
+        // On Play
+             if (self.actions.hasOwnProperty(self.info.weekday)){
+        if(self.actions[self.info.weekday].onplay.action=="sound" || self.actions[self.info.weekday].onplay.action=="video") {
+            // Is content defined?
+            if (self.actions[self.info.weekday].onplay.source!==undefined &&
+                self.actions[self.info.weekday].onplay.source!=="")
+                    {$(item).attr("playmediasource", self.actions[self.info.weekday].onplay.source);
+                    $(item).attr("playmediaaction", self.actions[self.info.weekday].onplay.action);
+                    $(item).attr("playmediatype", self.actions[self.info.weekday].onplay.type);
+                    }
+        }} else{
+                // Action is default or is undefined
+                console.log(defaultonplay);
+                console.log(defaultonplaycontent);
+                console.log(defaultonplaytype);
+                if (defaultonplay!==""){
+                    $(item).attr("playmediasource", defaultonplaycontent);
+                    $(item).attr("playmediaaction", defaultonplay);
+                    $(item).attr("playmediatype", defaultonplaytype); }
+            }
+     
+     
+    }
+    
+    // pastafangà ends here
+    
+    /*if(self.actions[self.info.weekday].onshow.action=="speech") {
         console.log("action is speech");
         // Is content defined?
@@ -351 +597 @@
         } else {
         $(item).attr("audiofile",self.actions[self.info.weekday].onshow.content );
-        }
-    
-    
-    console.log("getting action: "+self.actions[self.info.weekday].onplay.action);
+        }*/
+    
+    
+  /*  console.log("getting action: "+self.actions[self.info.weekday].onplay.action);
     if(self.actions[self.info.weekday].onplay.action=="sound" || self.actions[self.info.weekday].onplay.action=="video") {
         console.log("action is play media");
@@ -364 +610 @@
                 $(item).attr("playmediatype", self.actions[self.info.weekday].onplay.type);
                 }
-        }
+        }*/
     
         

classroom-assembly/trunk/fuentes/classroom-assembly/src/js/main.js

@@ -203 +203 @@
             
            $(closebutton).on("click", function(){
+            /*console.log($("#youtubeplayer").css("display"));
+            console.log($("#mediaplayer").css("display"));
+            console.log($("#youtubeplayer"));
+            console.log($("#mediaplayer"));*/
             
                 if ($("#youtubeplayer").css("display")!=="none")
@@ -209 +213 @@
                         $("#youtubeplayer").remove();
                         });
-                 else if ($("#mediaplayer").css("display")!=="none")
+                    
+                 if ($("#mediaplayer").css("display")!=="none")
                     $("#mediaplayer").fadeOut(function(){
                         $("#mediaplayer").remove();

classroom-assembly/trunk/fuentes/classroom-assembly/src/locale/ca_ES.UTF-8.json

@@ -30 +30 @@
   "sunday":"Diumenge",
   "click.change.img":"Feu click per canviar la imatge",
+  "click.set.actions":"Feu clic per configurar les accions",
   
   "month.component.title":"En quin mes estem?",

classroom-assembly/trunk/fuentes/classroom-assembly/src/locale/en_US.UTF-8.json

@@ -30 +30 @@
   "sunday":"Sunday",
   "click.change.img":"Click to change image",
+  "click.set.actions":"Clic to configure actions",
   
   "month.component.title":"In wich month we are?",

classroom-assembly/trunk/fuentes/classroom-assembly/src/locale/es_ES.UTF-8.json

@@ -30 +30 @@
   "sunday":"Domingo",
   "click.change.img":"Clic para cambiar la imagen",
+  "click.set.actions":"Clic para configurar acciones",
   
   "month.component.title":"¿En qué mes estamos?",

classroom-assembly/trunk/fuentes/config_examples/oo/config.json

@@ -60 +60 @@
                         "componentdata": "{\"weekday\":\"monday\"}",
                         "componentconfig": "{\"monday\":true,\"tuesday\":true,\"wednesday\":true,\"thursday\":true,\"friday\":true,\"saturday\":true,\"sunday\":true}",
-                        "componentactions": "{\"monday\":{\"onshow\":{\"action\":\"speech\",\"content\":\"Estem a dilluns, i tornem al cole\"},\"onplay\":{\"action\":\"sound\",\"type\":\"file\",\"source\":\"bondia.mp3\"}},\"tuesday\":{\"onshow\":{\"action\":\"sound\",\"content\":\"sound.mp3\"},\"onplay\":{\"action\":\"sound\",\"type\":\"file\",\"source\":\"sound.wav\"}},\"wednesday\":{\"onshow\":{\"action\":\"speech\",\"content\":\"\"},\"onplay\":{\"action\":\"video\",\"type\":\"youtube\",\"source\":\"BF7w-xJUlwM\"}},\"thursday\":{\"onshow\":{\"action\":\"speech\",\"content\":\"\"},\"onplay\":{\"action\":\"video\",\"type\":\"file\",\"source\":\"video.ogv\"}}}",
+                        "componentactions": "{\"default\":{\"onshow\":{\"action\":\"speech\",\"content\":\"\"},\"onplay\":{\"action\":\"sound\",\"type\":\"file\",\"source\":\"bondia.mp3\"}},\"monday\":{\"onshow\":{\"action\":\"speech\",\"content\":\"Estem a dilluns, i tornem al cole\"},\"onplay\":{\"action\":\"sound\",\"type\":\"file\",\"source\":\"bondia.mp3\"}},\"tuesday\":{\"onshow\":{\"action\":\"sound\",\"content\":\"sound.mp3\"},\"onplay\":{\"action\":\"sound\",\"type\":\"file\",\"source\":\"sound.wav\"}},\"wednesday\":{\"onshow\":{\"action\":\"speech\",\"content\":\"\"},\"onplay\":{\"action\":\"video\",\"type\":\"youtube\",\"source\":\"BF7w-xJUlwM\"}},\"thursday\":{\"onshow\":{\"action\":\"speech\",\"content\":\"\"},\"onplay\":{\"action\":\"video\",\"type\":\"file\",\"source\":\"video.ogv\"}}}",
                         "componentvisibility": "true",
                         "col": 1,