HTML Custom Elements

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Fri Feb 17 2017 11:54:20 GMT-0500 (EST)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: HTML Custom Elements
Description: 
Url: http://www.primordion.com/Xholon/gwt/
InternalName: 4c934ce7ea55ae562100fa6f2c3689af
Keywords: 

My Notes
--------
February 17, 2017

References
----------
(1) google: HTML Custom Elements
(2) https://developers.google.com/web/fundamentals/getting-started/primers/customelements
(3) https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/

]]></Notes> 

<_-.XholonClass>
  <PhysicalSystem/>
  
  <Brick/>
  
</_-.XholonClass>

<xholonClassDetails>
  
</xholonClassDetails>

<PhysicalSystem>
  <Brick multiplicity="1"/>
</PhysicalSystem>

<Brickbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
var me, iam, appdr, beh = {
postConfigure: function() {
  me = this.cnode.parent();
  iam = " red brick";
  appdr = null;
  
  //-----------------------------
  // see Reference [2]
  class AppDrawer extends $wnd.HTMLElement {

    // A getter/setter for an open property.
    get open() {
      return this.hasAttribute('open');
    }

    set open(val) {
      // Reflect the value of the open property as an HTML attribute.
      if (val) {
        this.setAttribute('open', '');
      } else {
        this.removeAttribute('open');
      }
      this.toggleDrawer();
    }

    // A getter/setter for a disabled property.
    get disabled() {
      return this.hasAttribute('disabled');
    }

    set disabled(val) {
      // Reflect the value of the disabled property as an HTML attribute.
      if (val) {
        this.setAttribute('disabled', '');
      } else {
        this.removeAttribute('disabled');
      }
    }

    // Can define constructor arguments if you wish.
    constructor() {
      // If you define a ctor, always call super() first!
      // This is specific to CE and required by the spec.
      super();

      // Setup a click listener on <app-drawer> itself.
      this.addEventListener('click', e => {
        // Don't toggle the drawer if it's disabled.
        if (this.disabled) {
          return;
        }
        this.toggleDrawer();
      });
    }

    toggleDrawer() {
      $wnd.xh.root().println($wnd.xh.root().name());
    }

    act() {
      me.println("ACTING appdr " + appdr.toString());
    }
  } // end class AppDrawer
  //--------------------------

  $wnd.customElements.define('app-drawer', AppDrawer);

  var as = $doc.querySelector("div#xhappspecific");
  as.innerHTML = "<app-drawer style='width: 100px; height: 50px; display: flex; padding: 20px; border-color: red; border-style: solid; border-width: 2px;'><p>click me, and watch output in out tab</p></app-drawer>";
  appdr = as.firstElementChild;
  $wnd.console.log(appdr);
}, // end postConfigure()

act: function() {
  $wnd.xh.root().println("ACTING");
  me.println("I am a" + iam);
  appdr.act();
} // end act()
}
//# sourceURL=Brickbehavior.js
]]></Brickbehavior>

<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>Brick</title>
    <rect id="PhysicalSystem/Brick" fill="#FB9898" height="50" width="50" x="25" y="0"/>
  </g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>