Incorportate changes to remie: edition screen headers and button for tag addition for CurrentSegmentInfobox + corresponding style, and fix try for Jquery-ui/lab.js bug
authordurandn
Thu, 24 Sep 2015 12:25:05 +0200
changeset 164 b3fe63cdb3fd
parent 163 f7cc6a0670fd
child 165 d7e38162478a
Incorportate changes to remie: edition screen headers and button for tag addition for CurrentSegmentInfobox + corresponding style, and fix try for Jquery-ui/lab.js bug
server/src/remie/static/remie/css/style.css
server/src/remie/static/remie/css/teacher.css
server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.css
server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.js
server/src/remie/static/remie/metadataplayer/LdtPlayer-core.js
server/src/remie/templates/remie/iframe_teacher.html
--- a/server/src/remie/static/remie/css/style.css	Tue Sep 22 17:07:01 2015 +0200
+++ b/server/src/remie/static/remie/css/style.css	Thu Sep 24 12:25:05 2015 +0200
@@ -132,15 +132,6 @@
     visibility: hidden;
 }
 
-.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-SubmitButton {
-    background-color: #a2cf18 !important;
-}
-
-.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-CancelButton {
-    background-color: #cd000b !important;
-    left: 95px;
-}
-
 .Ldt-CurrentSegmentInfobox-Tags-Ul{
     padding:0;
 }
@@ -163,6 +154,46 @@
     display: inline-block;
 }
 
+/* -------- Override buttons style -------- */
+
+.Ldt-LatestAnnotation-box .Ldt-LatestAnnotation-CopyEditButton,
+.Ldt-AnnotationsController-Button.Ldt-AnnotationsController-ShowAnnotationsListButton,
+.Ldt-AnnotationsController-Button.Ldt-AnnotationsController-ShowCreateAnnotationButton,
+.Ldt-CreateAnnotation-Screen.Ldt-CreateAnnotation-Main input,
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-CancelButton,
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-SubmitButton,
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-EditButton,
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-CreateTagInput-Add {
+    background: inherit;
+    border: none;
+    background-color: #848484;
+    font-family: Open-Sans-Light;
+    font-size: 14px;
+    border-radius: 0 0 3px 0;
+}
+
+.Ldt-LatestAnnotation-box .Ldt-LatestAnnotation-CopyEditButton:hover,
+.Ldt-AnnotationsController-Button.Ldt-AnnotationsController-ShowAnnotationsListButton:hover,
+.Ldt-AnnotationsController-Button.Ldt-AnnotationsController-ShowCreateAnnotationButton:hover,
+.Ldt-CreateAnnotation-Screen.Ldt-CreateAnnotation-Main input:hover,
+.Ldt-AnnotationsController-Button.selected,
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-EditButton:hover,
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-CancelButton:hover,
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-SubmitButton:hover,
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-CreateTagInput-Add:hover {
+    background-color: #b7b7b7;
+}
+
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-SubmitButton,
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-CreateTagInput-Add {
+    background-color: #a2cf18;
+}
+
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-CancelButton {
+    background-color: #cd000b;
+    left: 95px;
+}
+
 /* -------- Override LatestAnnotation style -------- */
 
 #LatestAnnotation_container .Ldt-LatestAnnotation-Box {
@@ -187,30 +218,6 @@
 .Ldt-LatestAnnotation-Element.Ldt-LatestAnnotation-Content{
     font-size: 16px;
 }
-
-.Ldt-LatestAnnotation-box .Ldt-LatestAnnotation-CopyEditButton,
-.Ldt-AnnotationsController-Button.Ldt-AnnotationsController-ShowAnnotationsListButton,
-.Ldt-AnnotationsController-Button.Ldt-AnnotationsController-ShowCreateAnnotationButton,
-.Ldt-CreateAnnotation-Screen.Ldt-CreateAnnotation-Main input,
-.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-CancelButton,
-.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-SubmitButton,
-.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-EditButton {
-    background: inherit;
-    border: none;
-    background-color: #848484;
-    font-family: Open-Sans-Light;
-    font-size: 14px;
-    border-radius: 0 0 3px 0;
-}
-
-.Ldt-LatestAnnotation-box .Ldt-LatestAnnotation-CopyEditButton:hover,
-.Ldt-AnnotationsController-Button.Ldt-AnnotationsController-ShowAnnotationsListButton:hover,
-.Ldt-AnnotationsController-Button.Ldt-AnnotationsController-ShowCreateAnnotationButton:hover,
-.Ldt-CreateAnnotation-Screen.Ldt-CreateAnnotation-Main input:hover,
-.Ldt-AnnotationsController-Button.selected,
-.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-EditButton:hover {
-    background-color: #b7b7b7;
-}
     
 .Ldt-LatestAnnotation-box .Ldt-LatestAnnotation-CopyEditButton{
     height: 22px;
--- a/server/src/remie/static/remie/css/teacher.css	Tue Sep 22 17:07:01 2015 +0200
+++ b/server/src/remie/static/remie/css/teacher.css	Thu Sep 24 12:25:05 2015 +0200
@@ -4,8 +4,8 @@
 }
 
 .Ldt-CurrentSegmentInfobox-Tags-Li .Ldt-CurrentSegmentInfobox-Tags-Li-Input{
-    border: none;
-    background: none;
+    border: 2px solid #848484;
+    background-color: #ffffff;
     font-size: 17px;
     font-weight: lighter;
 }
--- a/server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.css	Tue Sep 22 17:07:01 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.css	Thu Sep 24 12:25:05 2015 +0200
@@ -134,7 +134,7 @@
 	line-height: 18px;
 }
 
-.Ldt-CurrentSegmentInfobox-EditButton:hover{
+.Ldt-CurrentSegmentInfobox-EditButton:hover, .Ldt-CurrentSegmentInfobox-CreateTagInput-Add:hover{
 	background-color: #e15581;
 	border-color: #222222 #e87d9f #f0adc3 #68273c;
 }
@@ -154,8 +154,37 @@
 	color: #e16e93
 }
 
+.Ldt-CurrentSegmentInfobox-FieldsHeader{
+	margin: 5px;
+}
+
+.Ldt-CurrentSegmentInfobox-TagsHeader{
+	margin-top: 10px;
+	margin-left: 5px;
+}
+
 .Ldt-CurrentSegmentInfobox-CreateTagInput{
     border: 2px solid #848484;
     margin: 5px 0;
     padding: 4px;
+}
+
+.Ldt-CurrentSegmentInfobox-CreateTagInput-Add{
+    margin: 5px;
+    padding: 4px;
+	display: inline-block;
+    background-color: #d93c71;
+    color: #ffffff;
+    cursor: pointer;
+    height: 14px;
+    width: 14px;
+    font-size: 14px;
+    font-style: bold;
+    border: 1px solid;
+    border-color: #eca3bc #631e34 #36101c #e16e93;
+    cursor: pointer;
+    padding: 4px;
+    text-align: center;
+	vertical-align: middle;
+	line-height: 14px;
 }
\ No newline at end of file
--- a/server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.js	Tue Sep 22 17:07:01 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/CurrentSegmentInfobox.js	Thu Sep 24 12:25:05 2015 +0200
@@ -15,6 +15,7 @@
     api_method: "PUT",
     api_endpoint_template: "",
     new_tag_button: true,
+    show_headers: false,
 };
 
 IriSP.Widgets.CurrentSegmentInfobox.prototype.template = 
@@ -39,16 +40,19 @@
 
 IriSP.Widgets.CurrentSegmentInfobox.prototype.editTemplate = 
       '<div class="Ldt-CurrentSegmentInfobox">'
+    +     '{{#headers}}<div class="Ldt-CurrentSegmentInfobox-FieldsHeader">{{fields_header}}</div>{{/headers}}'
     +     '<input type="text" class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-TitleInput Ldt-CurrentSegmentInfobox-Title" value="{{title}}"></input>'   
     +     '<div class="Ldt-CurrentSegmentInfobox-CancelButton">{{cancel}}</div>'
     +     '<div class="Ldt-CurrentSegmentInfobox-SubmitButton">{{submit}}</div>'
     +     '<textarea class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-DescriptionInput Ldt-CurrentSegmentInfobox-Description">{{description}}</textarea>'
     +     '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">'
+    +         '{{#headers}}<div class="Ldt-CurrentSegmentInfobox-TagsHeader">{{tags_header}}</div>{{/headers}}'
     +     '{{#new_tag_button}}'
     +         '<div class="Ldt-CurrentSegmentInfobox-CreateTagButton">{{new_tag}}</div>'
     +     '{{/new_tag_button}}'
     +     '{{^new_tag_button}}'
     +         '<input class="Ldt-CurrentSegmentInfobox-CreateTagInput" placeholder="{{new_tag}}"></input>'
+    +         '<div class="Ldt-CurrentSegmentInfobox-CreateTagInput-Add">+</div>'
     +     '{{/new_tag_button}}'
     +         '{{#tags.length}}'
     +         '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">'
@@ -72,6 +76,8 @@
         edit : "Editer",
         new_tag : "Nouveau tag",
         delete_tag : "Supprimer",
+        fields_header : "Contenu du segment courant",
+        tags_header : "Mots-clés du segment courant",
         empty : "Le player vidéo ne lit actuellement aucun segment"
     },
     en: {
@@ -80,6 +86,8 @@
         edit : "Edit",
         new_tag : "New tag",
         delete_tag : "Delete tag",
+        fields_header : "Current segment content",
+        tags_header : "Current segment tags",
         empty : "The player currently doesn't read any segment"
     }
 }    
@@ -131,6 +139,9 @@
             tags : this.currentSegment.getTagTexts(),
             submit : this.l10n.submit,
             cancel : this.l10n.cancel,
+            headers : this.show_headers,
+            tags_header : this.custom_tags_header ? this.custom_tags_header : this.l10n.tags_header,
+            fields_header : this.custom_fields_header ? this.custom_fields_header : this.l10n.fields_header,
             new_tag : this.l10n.new_tag,
             delete_tag : this.l10n.delete_tag,
             new_tag_button : this.new_tag_button,
@@ -141,7 +152,8 @@
         if (this.new_tag_button){
             this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagButton").click(this.functionWrapper("insertTagInput"));            
         } else {
-            this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").keypress(this.functionWrapper("insertTagInputKeypress"));            
+            this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").keypress(this.functionWrapper("insertTagInputKeypress"));
+            this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput-Add").click(this.functionWrapper("insertTagInputKeypress"));
         }
         this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput"));
         this.$.find(".Ldt-CurrentSegmentInfobox-SubmitButton").click(this.functionWrapper("onSubmit"))
@@ -177,7 +189,7 @@
 
 IriSP.Widgets.CurrentSegmentInfobox.prototype.insertTagInputKeypress = function(event) {
     var keycode = (event.keyCode ? event.keyCode : event.which);
-    if(keycode == '13'){
+    if(keycode == '13' || event.type == 'click'){
         if((!this.currentSegment.getTagTexts().length)&&(!this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").length)){
             this.$.find(".Ldt-CurrentSegmentInfobox-Tags").prepend('<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul"></ul>')
         }
--- a/server/src/remie/static/remie/metadataplayer/LdtPlayer-core.js	Tue Sep 22 17:07:01 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/LdtPlayer-core.js	Thu Sep 24 12:25:05 2015 +0200
@@ -2329,7 +2329,20 @@
         $L.queueScript(ns.getLib("json"));
     }
     
-    $L.queueWait().queueScript(ns.getLib("jQueryUI")).queueWait();
+    $L.queueWait(function(){
+        if (typeof ns.jQuery === "undefined" && typeof window.jQuery !== "undefined") {
+            ns.jQuery = window.jQuery;
+            if (former$ || formerJQuery) {
+                window.jQuery.noConflict(formerJQuery);
+            }
+        }
+        if (typeof ns._ === "undefined" && typeof window._ !== "undefined") {
+            ns._ = window._;
+            if (formerUnderscore) {
+                _.noConflict();
+            }
+        }
+    }).queueScript(ns.getLib("jQueryUI")).queueWait();
 
     /* widget specific requirements */
     for(var _i = 0; _i < this.config.widgets.length; _i++) {
@@ -2352,18 +2365,7 @@
 
 Metadataplayer.prototype.onLibsLoaded = function() {
     ns.log("IriSP.Metadataplayer.prototype.onLibsLoaded");
-    if (typeof ns.jQuery === "undefined" && typeof window.jQuery !== "undefined") {
-        ns.jQuery = window.jQuery;
-        if (former$ || formerJQuery) {
-            window.jQuery.noConflict(formerJQuery);
-        }
-    }
-    if (typeof ns._ === "undefined" && typeof window._ !== "undefined") {
-        ns._ = window._;
-        if (formerUnderscore) {
-            _.noConflict();
-        }
-    }
+    
     ns.loadCss(ns.getLib("cssjQueryUI"));
     ns.loadCss(this.config.css);
     
--- a/server/src/remie/templates/remie/iframe_teacher.html	Tue Sep 22 17:07:01 2015 +0200
+++ b/server/src/remie/templates/remie/iframe_teacher.html	Thu Sep 24 12:25:05 2015 +0200
@@ -174,6 +174,7 @@
           project_id : "{{project_id}}",
           api_endpoint_template: "{% url 'api_dispatch_list' resource_name='annotations' api_name='1.0' %}{% templatetag openvariable %}annotation_id{% templatetag closevariable %}",
           new_tag_button: false,
+          show_headers: true,
         }
         
       ]