<commit_before><!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>&lt;pj-sortable-tiles&gt;</title>

    <!-- Importing Web Component's Polyfill -->
    
    <script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.2.2/platform.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.2.2/polymer.js"></script>
    <!--
    <script src="bower_components/platform/platform.js"></script>
    <script src="bower_components/polymer/polymer.js"></script>
    -->
    <!-- Importing Custom Elements -->
    <link rel="import" href="src/pj-sortable-tiles.html">
<style>
* {
  margin:0px;
  padding:0px;
}
pj-sortable-tiles{
    /*width: 300px;
    height: 150px;*/
    width: 616px;
    margin: 2em;
    padding:1em;
    box-shadow:     inset 0px 0px 10px 0px rgba(50, 50, 50, 0.6);
}
pj-sortable-tiles>*{
    box-shadow:         0px 0px 10px 0px rgba(50, 50, 50, 0.75);
}
pj-sortable-tiles>:first-child {
    background:lightgreen;
}

pj-sortable-tiles>:nth-child(2) {
    background:lightblue;
}

pj-sortable-tiles>:nth-child(3) {
    background:yellow;
    overflow:auto;
}

pj-sortable-tiles>:nth-child(4) {
    background:gray;
    overflow:auto;
}

pj-sortable-tiles>:nth-child(5) {
    background:orange;
    max-height: 100px;
    overflow:auto;
}
section input{
    width: 4em;
}
</style>

<body>
    <template bind>
        <pj-sortable-tiles setup="{{setup}}">
            <div>Item 0 </div>
            <div>
                <button>Item 1</button>
            </div>
            <div>
                <input value="Input2">
            </div>
            <section>Item3</section>
        </pj-sortable-tiles>
    </template>
    <script type="text/javascript">
        // 011
        // 233
        // 2
        // 
        // prioritized
        // 
        // 110
        // 233
        // 2
        model = {
            setup: {
                gap: 8,
                items:[
                    // 011
                    // 233
                    // 2
                    // prioritized
                    // 
                    // 110
                    // 233
                    // 2
                    {
                        index:0,
                        priority:0.9,// 0.6,
                        height: 100,
                        width: 200
                    },
                    {
                        index:1,
                        priority:0.8,// 0.9,
                        height: 100,
                        width:400
                    },
                    {
                        index:2,
                        priority:0.6,// 0.3,
                        height: 100,
                        width: 400
                    },
                    {
                        index:3,
                        priority:0.4,
                        height: 200,
                        width: 200
                    }
                    // 
                    // 122
                    // 145
                    // 333
                    // 
                    // {
                    //   width: 200,
                    //   height: 2
                    // }, {
                    //   width: 400,
                    //   height:  100
                    // }, {
                    //   width: 600,
                    //   height:  100
                    // }, {
                    //   width: 200,
                    //   height:  100
                    // }, {
                    //   width: 200,
                    //   height:  100
                    // }
                ]
            }
        };
        document.addEventListener("polymer-ready", function(){
            document.querySelector("template").model = model;
            
        })




    </script>
    <section>
        <h3>API</h3>
        <ul>
            <li><code>pjSortableTiles.resizeItem</code>(<input placeholder="itemIndex">, <input placeholder="width">, <input placeholder="height">) <button id="callResize">call</button></li>
                
            <li><code>pjSortableTiles.reprioritizeItem</code>(<input placeholder="itemIndex">, <input placeholder="increase" title="Boolean (0|1)">, <input placeholder="end" title="Boolean (0|1)">) <button id="callReprioritize">call</button></li>
        </ul>
        <script type="text/javascript">
        document.addEventListener("polymer-ready", function(){
            function callMethod(element, method, event){
                var args = event.target.parentElement.querySelectorAll("input")
                            .array().map(function(e){return parseInt(e.value)});
                element[method].apply(element, args);
            }
            document.getElementById("callResize").addEventListener("click", function (event){
                callMethod( document.querySelector("pj-sortable-tiles"), "resizeItem", event );
            });
            document.getElementById("callReprioritize").addEventListener("click", function (event){
                callMethod( document.querySelector("pj-sortable-tiles"), "reprioritizeItem", event );
            });
        });
        </script>
    </section>
    <footer>
        <h4>Other examples</h4>
        <ul>
            <li><a href="examples/prioritized.html">Prioritized/weighted tiles</a></li>
            <li><a href="examples/verticalLayers.html">Vertical layers</a></li>
            <li><a href="examples/fullWidth.html">Full width package</a></li>
            <li><a href="examples/nested.html">Nested packages</a></li>
        </ul>
    </footer>


</body><commit_msg>add a link to the editor demo<commit_after><!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>&lt;pj-sortable-tiles&gt;</title>

    <!-- Importing Web Component's Polyfill -->
    
    <script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.2.2/platform.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.2.2/polymer.js"></script>
    <!--
    <script src="bower_components/platform/platform.js"></script>
    <script src="bower_components/polymer/polymer.js"></script>
    -->
    <!-- Importing Custom Elements -->
    <link rel="import" href="src/pj-sortable-tiles.html">
<style>
* {
  margin:0px;
  padding:0px;
}
pj-sortable-tiles{
    /*width: 300px;
    height: 150px;*/
    width: 616px;
    margin: 2em;
    padding:1em;
    box-shadow:     inset 0px 0px 10px 0px rgba(50, 50, 50, 0.6);
}
pj-sortable-tiles>*{
    box-shadow:         0px 0px 10px 0px rgba(50, 50, 50, 0.75);
}
pj-sortable-tiles>:first-child {
    background:lightgreen;
}

pj-sortable-tiles>:nth-child(2) {
    background:lightblue;
}

pj-sortable-tiles>:nth-child(3) {
    background:yellow;
    overflow:auto;
}

pj-sortable-tiles>:nth-child(4) {
    background:gray;
    overflow:auto;
}

pj-sortable-tiles>:nth-child(5) {
    background:orange;
    max-height: 100px;
    overflow:auto;
}
section input{
    width: 4em;
}
</style>

<body>
    <template bind>
        <pj-sortable-tiles setup="{{setup}}">
            <div>Item 0 </div>
            <div>
                <button>Item 1</button>
            </div>
            <div>
                <input value="Input2">
            </div>
            <section>Item3</section>
        </pj-sortable-tiles>
    </template>
    <script type="text/javascript">
        // 011
        // 233
        // 2
        // 
        // prioritized
        // 
        // 110
        // 233
        // 2
        model = {
            setup: {
                gap: 8,
                items:[
                    // 011
                    // 233
                    // 2
                    // prioritized
                    // 
                    // 110
                    // 233
                    // 2
                    {
                        index:0,
                        priority:0.9,// 0.6,
                        height: 100,
                        width: 200
                    },
                    {
                        index:1,
                        priority:0.8,// 0.9,
                        height: 100,
                        width:400
                    },
                    {
                        index:2,
                        priority:0.6,// 0.3,
                        height: 100,
                        width: 400
                    },
                    {
                        index:3,
                        priority:0.4,
                        height: 200,
                        width: 200
                    }
                    // 
                    // 122
                    // 145
                    // 333
                    // 
                    // {
                    //   width: 200,
                    //   height: 2
                    // }, {
                    //   width: 400,
                    //   height:  100
                    // }, {
                    //   width: 600,
                    //   height:  100
                    // }, {
                    //   width: 200,
                    //   height:  100
                    // }, {
                    //   width: 200,
                    //   height:  100
                    // }
                ]
            }
        };
        document.addEventListener("polymer-ready", function(){
            document.querySelector("template").model = model;
            
        })




    </script>
    <section>
        <h3>API</h3>
        <ul>
            <li><code>pjSortableTiles.resizeItem</code>(<input placeholder="itemIndex">, <input placeholder="width">, <input placeholder="height">) <button id="callResize">call</button></li>
                
            <li><code>pjSortableTiles.reprioritizeItem</code>(<input placeholder="itemIndex">, <input placeholder="increase" title="Boolean (0|1)">, <input placeholder="end" title="Boolean (0|1)">) <button id="callReprioritize">call</button></li>
        </ul>
        <script type="text/javascript">
        document.addEventListener("polymer-ready", function(){
            function callMethod(element, method, event){
                var args = event.target.parentElement.querySelectorAll("input")
                            .array().map(function(e){return parseInt(e.value)});
                element[method].apply(element, args);
            }
            document.getElementById("callResize").addEventListener("click", function (event){
                callMethod( document.querySelector("pj-sortable-tiles"), "resizeItem", event );
            });
            document.getElementById("callReprioritize").addEventListener("click", function (event){
                callMethod( document.querySelector("pj-sortable-tiles"), "reprioritizeItem", event );
            });
        });
        </script>
    </section>
    <footer>
        <h4>Other examples</h4>
        <ul>
            <li><a href="examples/prioritized.html">Prioritized/weighted tiles</a></li>
            <li><a href="examples/verticalLayers.html">Vertical layers</a></li>
            <li><a href="examples/fullWidth.html">Full width package</a></li>
            <li><a href="examples/nested.html">Nested packages</a></li>
            <li><a href="http://polyjuice.github.io/pj-sortable-tiles-editor/">Editing the grid with &lt;pj-sortable-tiles-editor&gt;</a></li>
        </ul>
    </footer>


</body>
{'fraction_non_alphanumeric': 0.14302089762807513, 'fraction_numerical': 0.030861476060312143, 'mean_word_length': 1.1959341723136496, 'pattern_counts': {'":': 0, '<': 181, '<?xml version=': 0, '>': 193, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7263144', 'n_tokens_mistral': 3555, 'n_tokens_neox': 3103, 'n_words': 505}