mostly-elements/mostly-layout.html at master · MostlyJS/mostly-elements · 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="mostly-error.html">
<!--
An element to import and stamp layout elements.

Example:

    <mostly-layout href="playing-folder-view-layout.html" model='{"document": {...}}'></mostly-layout>

@group Mostly UI
@element mostly-layout
-->
<dom-module id="mostly-layout">
  <template>
    <mostly-error id="error" code="404" url="[[href]]" message="[[error]]" hidden></mostly-error>
    <div id="container"></div>
  </template>
  <script>
    Polymer({
      is: 'mostly-layout',

      behaviors: [Polymer.IronResizableBehavior],

      properties: {

        /**
         * The href of the element to import.
         * The name of the element is inferred from the filename.
         **/
        href: {
          type: String,
          observer: '_stamp'
        },

        /**
         * Model object with properties to set on the instantiated element.
         **/
        model: {
          type: Object,
          value: {}
        },

        /**
         * Error message to display if layout is not found.
         **/
        error: {
          type: String,
          value: 'Failed to find layout ' + this.href
        },

        /**
         * The stamped element.
         **/
        element: {
          type: Object,
          readOnly: true,
          notify: true
        }
      },

      observers: [
        '_update(model.*)'
      ],

      // Trigger the layout validation if it exists.
      validate: function() {
        if (this.element && ('function' === typeof this.element.validate)) {
          return this.element.validate();
        } else {
          // workaroud for https://github.com/PolymerElements/iron-form/issues/218, adapted from iron-form.html
          var valid = true;
          if (this.element) {
            var elements = this._getValidatableElements(this.element.root);
            for (var el, i = 0; el = elements[i], i < elements.length; i++) {
              valid = (el.validate? el.validate() : el.checkValidity()) && valid;
            }
          }
          return valid;
        }
      },

      _getValidatableElements: function(parent) {
        var nodes = Polymer.dom(parent).querySelectorAll('*');
        var submittable = [];
        for (var i = 0; i < nodes.length; i++) {
          var node = nodes[i];
          if (!node.disabled) {
            if (node.validate || node.checkValidity) {
              submittable.push(node);
            }
            else if (node.root) {
              Array.prototype.push.apply(submittable, this._getValidatableElements(node.root));
            }
          }
        }
        return submittable;
      },

      _stamp: function(href) {
        if (!href) {
          this.hidden = true;
          return;
        }

        this.$.error.hidden = true;
        this.hidden = this.$.container.hidden = false;

        var file = href.split('/').pop(),
            name = file.split('.')[0];

        this.importHref(href, () => {
          var element = document.createElement(name);

          if (this.$.container.hasChildNodes()) {
            this.$.container.replaceChild(element, this.$.container.firstChild);
          } else {
            this.$.container.appendChild(element);
          }

          this._setElement(element);
          this._update();
          this.notifyResize();
        }, e => {
          // error handling
          this._setElement(undefined);
          this.$.error.hidden = false;
          this.$.container.hidden = true;
          this.notifyResize()
        });
      },

      // setup data binding
      _update: function() {
        // Object.assign(element, model);
        if (this.element && this.model) {
          for (var prop in this.model) {
            this.element[prop] = this.model[prop];
            // TODO two-way binding?
            // this.element._addPropertyEffect(prop, Polymer.Base.PROPERTY_EFFECT_TYPES.NOTIFY, {
            //   fn: () => {
            //     console.log(arguments);
            //   }
            // });
          }
        }
      }
    });
  </script>
</dom-module>