video-tagging/optional-tags.html at master · CatalystCode/video-tagging · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!--
   optional-tags control for tag functionality
       of the video-tagging control
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="video-taggingstyles.html">

<dom-module id="optional-tags">

  <template>
    <style include="video-taggingstyles"></style>
        <div id = "tagsContainer">
             <div id = "buttonsContainer"></div>
           </div>
   </template>
   <script>

  Polymer({

       is: 'optional-tags',

       properties: {
       },
       attached: function() {
             this.tagsContainer = this.$$('#tagsContainer');
             this.buttonsContainer = this.$$('#buttonsContainer');
       },
       createTagControls: function(tagsArray)  {
          $('#buttonsContainer').empty();
          for(var index = 0;index < tagsArray.length;index++){
                var btn = document.createElement("input");
                btn.id = tagsArray[index];
                btn.type = "button";
                btn.className = "tagButtons clickableControl";
                btn.onclick = this.submitTextClicked;
                btn.disabled = 'disabled';
                var self = this;
                btn.addEventListener("click", function(e) {
                  if($(e.target).hasClass('tagOn')){
                      self.setUnselected(e.target);
                      self.fire('ontagdeleted', {tagid:e.target.id});
                  }
                  else {
                      self.setSelected(e.target);
                      self.fire('ontagsubmitted', {tagid:e.target.id});
                  }
                });
                btn.value = tagsArray[index];
                Polymer.dom(this.$.buttonsContainer).appendChild(btn);
          }
       },
       displaySelectedTags: function(tagsArray){
            if(tagsArray && tagsArray !== null){

              for(var index=0;index<tagsArray.length;index++){
                    for (var i=0;i<this.buttonsContainer.childNodes.length;i++) {

                        if(tagsArray[index] === this.buttonsContainer.childNodes[i].value){
                              this.setSelected(this.buttonsContainer.childNodes[i]);
                        }
                    }
              }
            }
       },
       setSelected: function(btn){
            btn.classList.remove('tagOff');
            btn.classList.add('tagOn');
       },
       setUnselected: function(btn){
            btn.classList.remove('tagOn');
            btn.classList.add('tagOff');
       },
       getSelectedTags :function(){
            return $(this.buttonsContainer).find(".tagOn");
       },
       resetSelected: function(){
            var self = this;
            $(this.buttonsContainer).find('.tagButtons').each(function(index){
                      self.setUnselected(this);
            });
       },
       toggleEnableButtons: function(enable){
            var self = this;
            $(this.buttonsContainer).find('.tagButtons').each(function(index){
                      this.disabled = !enable;
            });
       }
   });
</script>
</dom-module>