src/widgets/CurrentSegmentInfobox.js
changeset 1069 2409cb4cebaf
parent 1067 539c9bee5372
child 1072 ac1eacb3aa33
equal deleted inserted replaced
1068:7623f9af9272 1069:2409cb4cebaf
    14     api_serializer: "ldt_annotate",
    14     api_serializer: "ldt_annotate",
    15     api_method: "PUT",
    15     api_method: "PUT",
    16     api_endpoint_template: "",
    16     api_endpoint_template: "",
    17     new_tag_button: true,
    17     new_tag_button: true,
    18     show_headers: false,
    18     show_headers: false,
       
    19     custom_edit_text: false,
       
    20     empty_description_placeholder: false,
    19 };
    21 };
    20 
    22 
    21 IriSP.Widgets.CurrentSegmentInfobox.prototype.template = 
    23 IriSP.Widgets.CurrentSegmentInfobox.prototype.template = 
    22       '<div class="Ldt-CurrentSegmentInfobox">'
    24       '<div class="Ldt-CurrentSegmentInfobox">'
       
    25     +   '<div class="Ldt-CurrentSegmentInfobox-SelectedSegment">'
    23     +     '{{#editable_segments}}<div class="Ldt-CurrentSegmentInfobox-EditButton">{{edit}}</div>{{/editable_segments}}'
    26     +     '{{#editable_segments}}<div class="Ldt-CurrentSegmentInfobox-EditButton">{{edit}}</div>{{/editable_segments}}'
    24     +     '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Title">{{title}}</div>'
    27     +     '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Title">{{title}}</div>'
    25     +     '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Description">{{description}}</div>' 
    28     +     '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Description">{{description}}</div>' 
       
    29     +     '{{^description}}{{^tags.length}}{{#description_placeholder}}<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Description-placeholder">{{description_placeholder}}</div>{{/description_placeholder}}{{/tags.length}}{{/description}}' 
    26     +     '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">'
    30     +     '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">'
    27     +         '{{#tags.length}}'
    31     +         '{{#tags.length}}'
    28     +         '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">'
    32     +         '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">'
    29     +         '{{#tags}}'
    33     +         '{{#tags}}'
    30     +             '{{#.}}'
    34     +             '{{#.}}'
    34     +             '{{/.}}'
    38     +             '{{/.}}'
    35     +         '{{/tags}}'
    39     +         '{{/tags}}'
    36     +         '</ul>'
    40     +         '</ul>'
    37     +         '{{/tags.length}}'
    41     +         '{{/tags.length}}'
    38     +     '</div>'
    42     +     '</div>'
       
    43     +   '</div>'
    39     + '</div>'
    44     + '</div>'
    40 
    45 
    41 IriSP.Widgets.CurrentSegmentInfobox.prototype.editTemplate = 
    46 IriSP.Widgets.CurrentSegmentInfobox.prototype.editTemplate = 
    42       '<div class="Ldt-CurrentSegmentInfobox">'
    47       '<div class="Ldt-CurrentSegmentInfobox">'
       
    48     +   '<div class="Ldt-CurrentSegmentInfobox-SelectedSegment">'
    43     +     '{{#headers}}<div class="Ldt-CurrentSegmentInfobox-FieldsHeader">{{fields_header}}</div>{{/headers}}'
    49     +     '{{#headers}}<div class="Ldt-CurrentSegmentInfobox-FieldsHeader">{{fields_header}}</div>{{/headers}}'
    44     +     '<input type="text" class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-TitleInput Ldt-CurrentSegmentInfobox-Title" value="{{title}}"></input>'   
    50     +     '<input type="text" class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-TitleInput Ldt-CurrentSegmentInfobox-Title" value="{{title}}"></input>'   
    45     +     '<div class="Ldt-CurrentSegmentInfobox-CancelButton">{{cancel}}</div>'
       
    46     +     '<div class="Ldt-CurrentSegmentInfobox-SubmitButton">{{submit}}</div>'
       
    47     +     '<textarea class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-DescriptionInput Ldt-CurrentSegmentInfobox-Description">{{description}}</textarea>'
    51     +     '<textarea class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-DescriptionInput Ldt-CurrentSegmentInfobox-Description">{{description}}</textarea>'
    48     +     '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">'
    52     +     '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">'
    49     +         '{{#headers}}<div class="Ldt-CurrentSegmentInfobox-TagsHeader">{{tags_header}}</div>{{/headers}}'
    53     +         '{{#headers}}<div class="Ldt-CurrentSegmentInfobox-TagsHeader">{{tags_header}}</div>{{/headers}}'
    50     +     '{{#new_tag_button}}'
    54     +     '{{#new_tag_button}}'
    51     +         '<div class="Ldt-CurrentSegmentInfobox-CreateTagButton">{{new_tag}}</div>'
    55     +         '<div class="Ldt-CurrentSegmentInfobox-CreateTagButton">{{new_tag}}</div>'
    52     +     '{{/new_tag_button}}'
    56     +     '{{/new_tag_button}}'
    53     +     '{{^new_tag_button}}'
    57     +     '{{^new_tag_button}}'
    54     +         '<input class="Ldt-CurrentSegmentInfobox-CreateTagInput" placeholder="{{new_tag}}"></input>'
    58     +         '<input class="Ldt-CurrentSegmentInfobox-CreateTagInput" placeholder="{{new_tag}}"></input>'
    55     +         '<div class="Ldt-CurrentSegmentInfobox-CreateTagInput-Add">+</div>'
    59     +         '<div class="Ldt-CurrentSegmentInfobox-CreateTagInput-Add">+</div>'
    56     +     '{{/new_tag_button}}'
    60     +     '{{/new_tag_button}}'
    57     +         '{{#tags.length}}'
       
    58     +         '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">'
    61     +         '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">'
    59     +         '{{#tags}}'
    62     +         '{{#tags}}'
    60     +             '{{#.}}'
    63     +             '{{#.}}'
    61     +             '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">'
    64     +             '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">'
    62     +                 '<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value="{{.}}"></input>'
    65     +                 '<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value="{{.}}"></input>'
    63     +                 '<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">{{delete_tag}}</div>'
    66     +                 '<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">{{delete_tag}}</div>'
    64     +             '</li>'
    67     +             '</li>'
    65     +             '{{/.}}'
    68     +             '{{/.}}'
    66     +         '{{/tags}}'
    69     +         '{{/tags}}'
    67     +         '</ul>'
    70     +         '</ul>'
    68     +         '{{/tags.length}}'
       
    69     +     '</div>'
    71     +     '</div>'
       
    72     +     '<div class="Ldt-CurrentSegmentInfobox-SubmitButton">{{submit}}</div>'
       
    73     +     '<div class="Ldt-CurrentSegmentInfobox-CancelButton">{{cancel}}</div>'
       
    74     +   '</div>'
    70     + '</div>'
    75     + '</div>'
    71     
    76     
    72 IriSP.Widgets.CurrentSegmentInfobox.prototype.messages = {
    77 IriSP.Widgets.CurrentSegmentInfobox.prototype.messages = {
    73     fr : {
    78     fr : {
    74         submit : "Soumettre",
    79         submit : "Soumettre",
    75         cancel : "Annuler",
    80         cancel : "Annuler",
    76         edit : "Editer",
    81         edit : "Editer",
    77         new_tag : "Nouveau tag",
    82         new_tag : "Nouveau tag",
    78         delete_tag : "Supprimer",
    83         delete_tag : "Supprimer",
    79         fields_header : "Contenu du segment courant",
    84         fields_header : "Commentaire associé à ce segment",
    80         tags_header : "Mots-clés du segment courant",
    85         tags_header : "Mots-clés associés à ce segment",
    81         empty : "Le player vidéo ne lit actuellement aucun segment"
    86         empty : "Le player vidéo ne lit actuellement aucun segment"
    82     },
    87     },
    83     en: {
    88     en: {
    84         submit : "Submit",
    89         submit : "Submit",
    85         cancel : "Cancel",
    90         cancel : "Cancel",
   110             _this.$.toggleClass("editing", false);
   115             _this.$.toggleClass("editing", false);
   111             if (_this.currentSegment.id != _list[0].id){
   116             if (_this.currentSegment.id != _list[0].id){
   112                 _this.currentSegment = _list[0];
   117                 _this.currentSegment = _list[0];
   113                 _data = {
   118                 _data = {
   114                         editable_segments: _this.editable_segments,
   119                         editable_segments: _this.editable_segments,
   115                         edit: _this.l10n.edit,
   120                         edit: _this.custom_edit_text ? _this.custom_edit_text : _this.l10n.edit,
   116                         title: _this.currentSegment.title,
   121                         title: _this.currentSegment.title,
   117                         description : _this.currentSegment.description,
   122                         description : _this.currentSegment.description,
       
   123                         description_placeholder : _this.empty_description_placeholder,
   118                         tags : _this.currentSegment.getTagTexts()
   124                         tags : _this.currentSegment.getTagTexts()
   119                 }
   125                 }
   120                 _this.$.html(Mustache.to_html(_this.template, _data))
   126                 _this.$.html(Mustache.to_html(_this.template, _data))
   121                 if(_this.editable_segments&&_this.currentSegment){
   127                 if(_this.editable_segments&&_this.currentSegment){
   122                     _this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode"));            
   128                     _this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode"));            
   162 
   168 
   163 IriSP.Widgets.CurrentSegmentInfobox.prototype.disableEditMode = function() {
   169 IriSP.Widgets.CurrentSegmentInfobox.prototype.disableEditMode = function() {
   164     if(this.currentSegment){
   170     if(this.currentSegment){
   165         _data = {
   171         _data = {
   166                 editable_segments: this.editable_segments,
   172                 editable_segments: this.editable_segments,
   167                 edit: this.l10n.edit,
   173                 edit: this.custom_edit_text ? this.custom_edit_text : this.l10n.edit,
   168                 title: this.currentSegment.title,
   174                 title: this.currentSegment.title,
   169                 description : this.currentSegment.description,
   175                 description : this.currentSegment.description,
       
   176                 description_placeholder : this.empty_description_placeholder,
   170                 tags : this.currentSegment.getTagTexts()
   177                 tags : this.currentSegment.getTagTexts()
   171             }
   178             }
   172         this.$.toggleClass("editing", false);
   179         this.$.toggleClass("editing", false);
   173         this.$.html(Mustache.to_html(this.template, _data));
   180         this.$.html(Mustache.to_html(this.template, _data));
   174         this.$.find(".Ldt-CurrentSegmentInfobox").click(this.functionWrapper("enableEditMode")); 
   181         this.$.find(".Ldt-CurrentSegmentInfobox").click(this.functionWrapper("enableEditMode")); 
   266             })
   273             })
   267             _this.segments.push(_annotation)
   274             _this.segments.push(_annotation)
   268             _this.currentSegment = _annotation
   275             _this.currentSegment = _annotation
   269             _data = {
   276             _data = {
   270                     editable_segments: _this.editable_segments,
   277                     editable_segments: _this.editable_segments,
   271                     edit: _this.l10n.edit,
   278                     edit: _this.custom_edit_text ? _this.custom_edit_text : _this.l10n.edit,
   272                     title: _this.currentSegment.title,
   279                     title: _this.currentSegment.title,
   273                     description : _this.currentSegment.description,
   280                     description : _this.currentSegment.description,
       
   281                     description_placeholder : _this.empty_description_placeholder,
   274                     tags : _this.currentSegment.getTagTexts()
   282                     tags : _this.currentSegment.getTagTexts()
   275                 }
   283                 }
   276             _this.$.html(Mustache.to_html(_this.template, _data))
   284             _this.$.html(Mustache.to_html(_this.template, _data))
   277             if(_this.editable_segments&&_this.currentSegment){
   285             if(_this.editable_segments&&_this.currentSegment){
   278                 _this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode"));             
   286                 _this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode"));             
   296         if (_list.length > 0){
   304         if (_list.length > 0){
   297             if (this.currentSegment.id != _list[0].id){
   305             if (this.currentSegment.id != _list[0].id){
   298                 this.currentSegment = _list[0];
   306                 this.currentSegment = _list[0];
   299                 _data = {
   307                 _data = {
   300                     editable_segments: this.editable_segments,
   308                     editable_segments: this.editable_segments,
   301                     edit: this.l10n.edit,
   309                     edit: this.custom_edit_text ? this.custom_edit_text : this.l10n.edit,
   302                     title: this.currentSegment.title,
   310                     title: this.currentSegment.title,
   303                     description : this.currentSegment.description,
   311                     description : this.currentSegment.description,
       
   312                     description_placeholder : this.empty_description_placeholder,
   304                     tags : this.currentSegment.getTagTexts()
   313                     tags : this.currentSegment.getTagTexts()
   305                 }
   314                 }
   306                 this.$.html(Mustache.to_html(this.template, _data))
   315                 this.$.html(Mustache.to_html(this.template, _data))
   307                 if(this.editable_segments&&this.currentSegment){
   316                 if(this.editable_segments&&this.currentSegment){
   308                     this.$.find(".Ldt-CurrentSegmentInfobox").click(this.functionWrapper("enableEditMode"));             
   317                     this.$.find(".Ldt-CurrentSegmentInfobox").click(this.functionWrapper("enableEditMode"));