appmaker-components/input.html at master · mozilla/appmaker-components · 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<element name="app-input">
  <template>
    <link rel="stylesheet" href="{{ASSET_HOST}}/assets/style/app-input.css">
    <input type="text"/><button>Submit</button>
  </template>
  <friends>app-flickr</friends>
  <thumbnail>
    <div style="box-shadow: inset 0px 0px 3px rgba(0,0,0,.4); padding: .3rem 1rem .3rem .4rem; background: white; color: #999; font-size: 1.3rem">
      Lorem Ipsum <span style="color: #444; position: relative; top: -1px">|</span>
    </div>
  </thumbnail>
  <description>
    Broadcasts whatever message a user types
  </description>
  <script type="text/ceci">
    function Text(value) {
      this.value = value;
      this.editor = 'app-input';
    };
    Text.prototype.toString = function() {
      return String(this.value);
    };

    Ceci(this, {
      init: function (params) {
        var value = this.getAttribute('value');
        this.querySelector("input").value = value;
        var element = this;
        this.button = this.querySelector('button');
        this.input = this.querySelector('input');
        this.input.setAttribute('placeholder', 'Placeholder Text');
        this.querySelector('button').onclick = function (e) {
          var input = element.querySelector('input[type="text"]');
          element.broadcast(input.value);
          input.value = "";
        };
        this.input.addEventListener("keypress", function(e) {
          console.log(e.keyCode);
          if (e.keyCode === 13) {
            element.broadcast(element.input.value);
          }
        });
        this.input.addEventListener("input", function (e) {
          if (! element._fireonchange) return;
          element.broadcast(element.input.value);
        }, false);

        if (this.hasAttribute('fireonchange')) {
          this._fireonchange = this.getAttribute('fireonchange') == "true";
          this.updateConfig();
        }
        else {
          this.setAttribute("fireonchange", "false");
        }

        if (this.hasAttribute('placeholdertext')) {
          this.querySelector("input").setAttribute("placeholder", this.getAttribute('placeholdertext'));
        }
        else {
          this.setAttribute("placeholdertext", "Placeholder");
        }
        if (this.hasAttribute('buttontext')) {
          this.querySelector("button").innerHTML = this.getAttribute('buttontext');
        }
        else {
          this.setAttribute("buttontext", "OK");
        }

      },
      listeners: {
        setValue: function (val) {
          this.querySelector('input[type="text"]').value = val.toString();
        }
      },
      getCurrentValue: function() {
        return new Text(this.querySelector('input').value);
      },
      broadcast: function (e) {
        this.emit(e);
      },
      updateConfig: function() {
        if (this._fireonchange) {
          this.classList.add('onchange');
          this.button.classList.add('hidden');
        } else {
          this.classList.remove('onchange');
          this.button.classList.remove('hidden');
        }
      },
      editable: {
        placeholderText: {
          type: "text",
          description: "The text you want your input field to show by default.",
          postset: function(v) {
            this.querySelector("input").setAttribute("placeholder", v);
          }
        },
        buttonLabel: {
          type: "text",
          description: "The text label you want your button to have.",
          postset: function(v) {
            this.querySelector("button").innerHTML = v;
          }
        },
        emitOnChange: {
          type: "boolean",
          description: "Emit on change",
          postset: function(v) {
            this._fireonchange = v == "true";
            this.updateConfig();
          }
        }
      }
    });
  </script>
</element>