JSFiddle - React, Tailwind, and code Playground

by dimshik

HTML

<script src="https://elements.polymer-project.org/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://raw.githubusercontent.com/Polymer/polymer/master/polymer.html">

    <dom-module id="parent-element">
    <template> 
        <template is="dom-if" if="{{visible}}" restamp="restamp">
            <div>
                
            <template is="dom-repeat" items="{{orderSelectors}}" as="selector" restamp="restamp">
                <span>{{selector}}</span><br/>
                <div>
                    <content select="{{selector}}"></content>
                </div>
            </template>
                
            </div>
         </template>
    </template>
</dom-module>
  
<dom-module id="child-element">
    <template>
        <content></content>
    </template>
</dom-module>
    
<parent-element>
    <child-element filed-id="id-1">1</child-element>
    <child-element filed-id="id-2">2</child-element>
    <child-element filed-id="id-3">3</child-element>
    <child-element filed-id="id-4">4</child-element>
</parent-element>

<br/>
<br/>
<button class="show-children-btn">Show Children</button>
<button class="hide-children-btn">Hide Children</button>
    
<button class="change-order-btn">Change Order</button>

JavaScript

var $showChildrenBtn = $('.show-children-btn');
var $hideChildrenBtn = $('.hide-children-btn');

var $changeOrderBtn = $('.change-order-btn');

var parentElement = $('parent-element')[0];


$showChildrenBtn.on('click', function () {
    parentElement.visible = true;
});

$hideChildrenBtn.on('click', function () {
    parentElement.visible = false;
});
var decending = true;


$changeOrderBtn.on('click',function(){
    if(decending){ 
        parentElement.orderSelectors = ['[filed-id=id-4]',
                                        '[filed-id=id-3]',
                                        '[filed-id=id-2]',
                                        '[filed-id=id-1]'];  
    } else {      
        parentElement.orderSelectors = ['[filed-id=id-1]',
                                        '[filed-id=id-2]',
                                        '[filed-id=id-3]',
                                        '[filed-id=id-4]'];               
    }
    decending = !decending;
});

HTMLImports.whenReady(function () {

    Polymer({
        is: "parent-element",
        ready: function () {
            //...
        },
        properties: {
            visible: {
                type: Boolean,
                value: false,
                reflectToAttribute: true,
            },
            orderSelectors: {
                type: Object,
                value: ['[filed-id=id-1]',
                        '[filed-id=id-2]',
                        '[filed-id=id-3]',
                        '[filed-id=id-4]'],
                reflectToAttribute: true,
                observer: '_orderSelectorsChanged'
            },
        },
        _orderSelectorsChanged: function(newValue, oldValue) {
            this.distributeContent();
          },
    });

    Polymer({
        is: "child-element",
        properties: {

        },
        ready: function () {
            //...
        }
    });
});