at-core-view.html

<link rel="import" href="../tangere/tangere.html">
<link rel="import" href="../liquid.js/liquid-import.html">
<link rel="import" href="../at-theme/at-theme.html">

<script src="lib/set-dom.js"></script>

 <!-- dom-module only needed for _resolveUrl  -->
<dom-module id="at-core-view-hidden"></dom-module>

<script>
  (function () {
    var templateCache = {};

    Polymer({
      is: 'at-core-view',
      properties: {
        label: {
          type: String,
          value: ''
        },
        model: {
          type: Object,
          value: null
        },
        value: {
          type: Object,
          value: null,
          //value: function () {
          //  return {
          //    items: [
          //      {
          //        name: 'C-3PO'
          //      },
          //      {
          //        name: 'R2D2'
          //      }
          //  ]
          //  };
          //},
          xgridcols: "12",
          xtype: 'json'
        },
        view: {
          type: String,
          value: null, // "{% for item in items %}\n{{ item.name }}\n{% endfor %}",
          xtype: 'code',
          xgridcols: "12",
          mode: "carbon",
          hint: "Press 'ESC' to toggle full screen mode"
        },
        placeholder: {
          type: String,
          value: "<div class='m'> <div class='placeholder-text'></div><div class='placeholder-text mtsm'></div></div>",
          xtype: 'code',
          xgridcols: "12",
          mode: "html"
        },
        modelRoot: {
          type: String,
          value: ""
        },

        /**
         * Controls the DOM update mode
         * When "0" , innerHTML is used to update
         * When "1" , setDOM is used to update
         *
         * @property updateMode
         * @type String
         * @default "0"
         */
        updateMode: {
          type: String,
          value: "1",
          xtype: 'enum',
          xvaluelist: [
            { title: "Replace", value: "0" },
            { title: "Delta Update", value: "1" },
            { title: "Set Dom", value: "2" }
          ]
        }
      },

      observers: [
        'render(model.*,value.*,view,placeholder,updateMode)'
      ],

      $meta: [{
        title: "Liquid View",
        type: "element",
        xtype: "at-core-view",
        icon: "now:source-code"
      }],


      templateCache: {},

      created: function () {
        this.templateCache = templateCache;
        this._isFirstRender = true;
      },

      attached: function() {
        if(!this._isRendered) this.render();
      },

      ready: function () {},

      _getObjPath: function (obj, path) {

        if (!path) return obj;
        if (!obj) return null;

        var paths = path.split('.'),
          current = obj;

        for (var i = 0; i < paths.length; ++i) {
          if (current[paths[i]] == undefined) {
            return undefined;
          } else {
            current = current[paths[i]];
          }
        }
        return current;
      },

      actionListener: function (event) {

        this.value = this.modelRoot ? event.detail.model : event.detail.model.state;

      },

      render: function () {

        if (!this.parentNode) return;  // we can't render without parentNode as the parentNode provides the style scope

        if (this._isFirstRender && this.placeholder && this.view) {
          Polymer.dom(this).innerHTML = this.placeholder;
          Polymer.dom.flush();
        } 

        var tmpl = this._getCompiledTemplate();
        if (!tmpl) {
          return;
        }

        this._isRendered = true;
        this._root = this.value || this.model;
        if (this.modelRoot) this._root = this._getObjPath(this._root, this.modelRoot);

        var name = "view";
        if (this._gid) name = name + "_" + this._gid;
        if (this._root && this._root.id) name = name + "_" + this._root.id;
                

        // render immediately if all custom elements are already loaded
        if (tmpl.loaded) {
          Tangere.asyncQueue.add(name, function () {
            this._render(tmpl.compiledTemplate);
            return;
          }, this);
        }


        // delay importing of elements to allow container to render

        Tangere.asyncQueue.add(name, function () {

          // import all referenced custom elements, render template when imports are finished
          this._pendingImports = tmpl.customElements.length;
          this._tmpl = tmpl;

          for (var i = 0; i < tmpl.customElements.length; i++) {

            var el = tmpl.customElements[i];
            if(el=="at-carbon-tab") {      
              this._pendingImports--;
              continue; // loaded by at-carbon-tabs
            }
            
            var compUrl = this._resolveUrl("../");

            if (document.URL.indexOf("/elements/designer-element/") >= 0) {
              compUrl = "/components/";
            }

            if (window.ComponentsBase != undefined) compUrl = window.ComponentsBase;

            // import default.card by stripping -card from folder name
            var elf = el;
            if (elf != "at-app-card" && elf.indexOf("-card") > 0 && elf.substring(elf.length - 5) == "-card") elf = elf.substring(0, elf.length - 5);

            if (el.indexOf("/") < 0) el = elf + "/" + el;
            el = compUrl + el + ".html";

            this.importHref(el, function (e) {
              this._pendingImports--;

              // changing from < 1 to == 0 because in Polymer 2.x and FF 61, this callback gets called twice and _pending imports becomes -1
              if (this._pendingImports == 0) {
                this._tmpl.loaded = true;
                this._render(this._tmpl.compiledTemplate);
              }
            }, function (e) {
              // loading error
              var em = "import failed: " + e.target.href;
              console.log(em);
              var emdiv = document.createElement('div');
              emdiv.innerHTML = em;
              Polymer.dom(this.root).appendChild(emdiv);
            }, true);
          }
        }, this);
      },

      _resolveUrl: function (url) {
        var module = Polymer.DomModule.import("at-core-view-hidden");
        var root = '';
        if (module) {
          var assetPath = module.getAttribute('assetpath') || '';
          root = Polymer.ResolveUrl.resolveUrl(assetPath, module.ownerDocument.baseURI);
        }
        return Polymer.ResolveUrl.resolveUrl(url, root);
      },

      _render: function (tmpl) {

        try {
          this._parent = null;

          if (Polymer.dom(this).getOwnerRoot() != null) {
            this._parent = Polymer.dom(this).getOwnerRoot().host;
          }

          tmpl.assigns = {}; // initialize template data, this should probably happen in liquid.js .render() in the future

          // callback to localize
          tmpl.i18nCallback = function () {
            if (this._parent.T === undefined) return arguments[0]; // no T() available, return untranslated text
            var r = this._parent.T.apply(this._parent, arguments);
            return r;
          }.bind(this);
                
          var html = tmpl.render(this._root);
          
          var useSetDom = this.updateMode === "2" || (this.updateMode === "1" && !this._isFirstRender);
          
          if (this._isFirstRender == true) {
            this._isFirstRender = false;
          }

          if (useSetDom) {
            // place html into div.innerHTML so we have div's children prepared ahead of time
            var div = document.createElement('div');
            Polymer.dom(div).innerHTML = html;

            // NOTE div must be appended to document because FF/IE11/Edge do not upgrade
            // custom elements in div.innerHTML otherwise
            document.body.appendChild(div);
            document.body.removeChild(div);
            Polymer.dom.flush();

            // NOTE we need to clone refs to Polymer.dom(div).childNodes into newNodesArr because
            // setDOM can either replace or update the childNode
            // if replace happens length of Polymer.dom(div).childNodes decreases, which breaks DOM update
            var newNodesCount = Polymer.dom(div).childNodes.length;
            var newNodesArr = [];
            Array.prototype.forEach.call(Polymer.dom(div).childNodes, function(node) {
              newNodesArr.push(node);
            });

            for (var dcnIdx = 0; dcnIdx < newNodesCount; dcnIdx++) {
              var child = newNodesArr[dcnIdx];

              var existingChild = Polymer.dom(this.root).childNodes[dcnIdx];
              if (!existingChild) {
                // if child doesn't exist we create a new div, append it to root, and update the reference to existingChild
                var newChild = document.createElement('div');
                Polymer.dom(this.root).appendChild(newChild);
                existingChild = Polymer.dom(this.root).childNodes[dcnIdx];
                // existing child now exists
              }

              if (child.nodeType === 3) {
                // we need to clone textNodes because setDOM removes them their parent elements, WTF!?
                var clone = child.cloneNode();
                setDOM(existingChild, clone);

              } else {
                setDOM(existingChild, child);
              }
            }

            var dcLen = newNodesArr.length;
            var rcLen = Polymer.dom(this.root).childNodes.length;
            if (dcLen && dcLen < rcLen) {
              // remove children from DOM
              while(dcLen < rcLen) {
                var ctr = Polymer.dom(this.root).childNodes[dcLen];
                Polymer.dom(ctr.parentElement).removeChild(ctr);
                
                rcLen = Polymer.dom(this.root).childNodes.length;
              }
            }

            // setDOM updates the DOM but doesn't do style scoping; we do the style scoping manually
            var unscopedElements = Polymer.dom(this.root).childNodes;
            unscopedElements.forEach(function(node) {
              if (this._parent) {
                this._parent.scopeSubtree(node);

              } else {
                this.scopeSubtree(node);
              }
            }, this);

          } else {
            Polymer.dom(this.root).innerHTML = html;           
          }

          Polymer.dom.flush();

          if (this._parent) {
            // -- parse appened code for list of on-* event bindings for parent --
            var list = [];

            if(!Polymer.Annotations) {
              // console.log("FIXME Polymer.Annotations");
            } else {
              Polymer.Annotations._parseNodeAnnotations(this.root, list);
              
              // -- create listeners on parent node for on-* events
              list.forEach(function (a) {
                if (a.events && a.events.length) {
                  var node = this._findAnnotatedNode(this.root, a);
                  a.events.forEach(function (e) {
                    console.log("FIXME still using on-* " + e.name);
                    this._parent.listen(node, e.name, e.value);
                  }, this);
                }
              }, this);
            }
          }

          this.fire('content-changed', this, { bubbles: true });

        } catch (ex) {
          var em = 'Exception caught at-core-view.render: ' + (ex.stack || ex);
          console.log(em);
          var emdiv = document.createElement('div');
          emdiv.innerHTML = em;
          Polymer.dom(this.root).appendChild(emdiv);
        }
      },

      _findAnnotatedNode: function (root, annote) {
        // recursively ascend tree until we hit root
        var parent = annote.parent &&
          Polymer.Annotations.findAnnotatedNode(root, annote.parent);
        // unwind the stack, returning the indexed node at each level
        if (parent) {
          // note: marginally faster than indexing via childNodes
          // (http://jsperf.com/childnodes-lookup)
          for (var n = parent.firstChild, i = 0; n; n = n.nextSibling) {
            if (annote.index === i++) {
              return n;
            }
          }
        } else {
          return root;
        }
      },

      _getNodesInnerHTML: function (nodes) {
        // generates combined innerHTML of an array of nodes
        var html = "";
        for (var i = 0, ii = nodes.length; i < ii; i++) {
          var node = nodes[i];

          // text node
          if (node.nodeType == 3) html += node.textContent;

          // html node
          if (node.nodeType == 1) html += node.outerHTML;

        }

        return html;
      },

      _getCompiledTemplate: function () {

        // combined observer should ensure that both all props are set if (!this.model && !this.value) return; // model not yet initialized

        // if cached & static view - return compiled template for this node
        if (!!this._liquidTemplate && !this.view) return this._liquidTemplate;

        var cacheKey = "",
          cacheEntry;
        var tmpl = null;

        // if we is property use view itself as cachekey
        if (this.view) cacheKey = this.view;

        // use compiled template if already cached
        if (cacheKey) {
          cacheEntry = this.templateCache[cacheKey];
          if (cacheEntry) {
            return cacheEntry;
          }
        }

        // get template source
        var src = this.view; // start with view property

        // use inner template when provided
        if (!src) {
          var srctmpl = Polymer.dom(this).querySelector('template');
          if (!srctmpl && !src) return null;

          if (srctmpl) {
            // In Polymer 2.x _content is now just content
            var polymerVersion = parseInt(Polymer.version)
            if (polymerVersion == 2) {
              src = this._getNodesInnerHTML(srctmpl.content.childNodes);
            } else {
              src = this._getNodesInnerHTML(srctmpl._content.childNodes);
            }
            //src = srctmpl.innerHTML; // requires template to be wrapped into <template preserve-content> !
            this.view = src; // save initial static template, triggers observer
            return null;
          }
        }

        if (!src) return null;

        // use template as cacheKey if we don't have a key yet
        if (!cacheKey) {
          cacheKey = src;
          cacheEntry = this.templateCache[cacheKey];
          if (cacheEntry) {
            return cacheEntry;
          }
        }


        tmpl = Liquid.parse(src);

        var elPattern = /<\w+-[a-z0-9\-]+((\s+[a-z0-9\-]+(\s*=\s*(?:"(.|\n)*?"|'(.|\n)*?'|[^'">\s]+))?)+\s*|\s*)>/gi;
        var ctags = src.match(elPattern);
        var ces = {},
          p0 = 0,
          p1 = 0;

        // convert <a-b> <a-b checked> to distinct list of custom elment names
        if (ctags != null) {
          for (var i = 0; i < ctags.length; i++) {
            var tag = ctags[i];
            p0 = tag.indexOf(">");
            p1 = tag.indexOf(" ");

            if (p1 >= 0) p0 = p1;

            tag = tag.substr(1, p0 - 1);

            ces[tag] = true;
          }
        }

        // resolve relative tag names like <default.view
        var cex = {};
        var elName = "";

        elPattern = /<\w+\.[a-z0-9\-]+((\s+[a-z0-9\-]+(\s*=\s*(?:"(.|\n)*?"|'(.|\n)*?'|[^'">\s]+))?)+\s*|\s*)>/gi;
        src = src.replace(elPattern,function(tag) {
          p0 = tag.indexOf(">");
          p1 = tag.indexOf(" ");
          if (p1 >= 0) p0 = p1;

          elName = tag.substr(1, p0 - 1);

          var elNameOrg = elName;
          var resolve = { namePrefix: "" };
          this.fire("resolve-name-prefix", resolve);
          var prefix = resolve.namePrefix;

          if (elName == "default.view") elName = "";
          elName = elName.replace("default.", "");
          elName = prefix + (elName ? ("-" + elName.replace(".", "-")) : "");
          cex[elNameOrg] = { rel: elNameOrg, folder: prefix, el: elName };

          tag = "<" + elName + tag.substr(p0);

          return tag;

        }.bind(this));

        ces = Object.getOwnPropertyNames(ces);

        var cexc = Object.getOwnPropertyNames(cex);
        for (var i = 0; i < cexc.length; i++) {
          el = cex[cexc[i]];

          // replace closing tag
          src = src.split("</" + el.rel + ">").join("</" + el.el + ">");

          // save expanded name to list of elements to import
          ces.push(el.folder + "/" + el.el);
        }

        tmpl = {
          template: src,
          compiledTemplate: tmpl,
          customElements: ces,
          loaded: ces.length == 0
        };

        // store compiled template for parent element in cache
        if (cacheKey) {
          this.templateCache[cacheKey] = tmpl;
        }

        // store compiled template also per node
        this._liquidTemplate = tmpl;

        return tmpl;
      }


    });

  })();
</script>