oxe/dev/web/binders.html

A mighty tiny web components framework/library

<base href="/">
<script>document.querySelector('base').href = window.location.hostname === 'vokeio.github.io' ? '/oxe/' : '/web/';</script>

<meta charset="utf-8">
<meta name="theme-color" content="darkorange">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="keywords" content="oxe, tiny, web, components, framework, library">
<meta name="description" content="A mighty tiny web components framework">

<title>Oxe</title>
<link rel="stylesheet" href="./index.css">

<div class="title">
    <h1><span>O</span>xe</h1>
    <h2>A mighty tiny web components framework</h2>
</div>

<div class="menu">
    <a href="./">Home</a>
    <a href="./performance" o-external>Performance</a>
    <a href="./binders">Binders</a>
</div>

<x-binders>

    <style>
        .default {
            border: solid 5px transparent;
        }
        .lightblue {
            border-color: lightblue;
        }
    </style>

    <section id="text">
        <h3>Text Binder</h3>
        <pre bind="text:'<span bind=\'text:text\'></span>'"></pre>
        <pre>
        <span bind="text:'<span bind=\'text:text\'>'"></span><span bind='text:text'></span><span bind="text:'</span>'"></span>
        </pre>
    </section>

        <!--
    <section id="checked">
        <h3>Checked Binder</h3>
        <br>
        <pre bind="text:`<input type='checkbox' bind='value:checked, checked:checked=$checked, onchange:checkInput()'>`"></pre>
            <pre>${Code(`<input type="checkbox" value="{{checked}}"{{checked ? ' checked' : ''}}>`)}</pre>
        <br>
        <label>
            <input bind="value:checked, checked:checked=$checked??[1,'two']??{test:'test',foo:bar}, onchange:checkInput()" type="checkbox"> Checkbox
        </label>
        <br>
        <pre>${Code(`
        <input type="radio" name="radio" value="one">
        <input type="radio" name="radio" value="two">
        `, true)}</pre>
        <pre>${Code(`
        <input type="radio" name="radio" value="one"{{r1 ? ' checked': ''}}>
        <input type="radio" name="radio" value="two"{{r2 ? ' checked': ''}}>
        `)}</pre>
        <br>
        <label>
            <input type="radio" name="radio" value="one" checked="{{r1=$checked}}"> Radio One
        </label>
        <label>
            <input type="radio" name="radio" value="two" checked="{{r2=$checked}}"> Radio Two
        </label>
    </section>

    <section id="style">
        <h2>Style Binder</h2>
        <br>
        <pre style="color: {{color}}">${Code(`<div style="color: {{color}}">Look at my style</div>`, true)}</pre>
        <pre style="color: {{color}}">${Code(`<div style="color: {{color}}">Look at my style</div>`)}</pre>
        <br>
        <button onclick="{{colorChange()}}">Change Color</button>
    </section>

    <section id="class">
        <h3>Class Binder</h3>
        <br>
        <pre class="default {{lightblue(active)}}">${Code(`class="default {{lightblue(active)}}"`, true)}</pre>
        <pre class="default {{lightblue(active)}}">${Code(`class="default {{lightblue(active)}}"`)}</pre>
        <pre class="default {{active ? 'lightblue' : ''}}">${Code(`class="default {{active ? 'lightblue' : ''}}"`, true)}</pre>
        <pre class="default {{active ? 'lightblue' : ''}}">${Code(`class="default {{active ? 'lightblue' : ''}}"`)}</pre>
        <br>
        <button onclick="{{classToggle()}}">Toggle Active</button>
    </section>

    <section id="value">
        <h3>Value Binder</h3>
        <br>
        <pre>${Code(`
        <strong>{{value.text}}</strong>
        <input value="{{value.text = $value.toUpperCase() }}">
        <input value="{{(value.text = $value).toLowerCase()}}">`, true)}</pre>
        <br>
        <strong>{{value.text}}</strong>
        <br>
        <input value="{{value.text = $value.toUpperCase() }}">
        <input value="{{(value.text = $value).toLowerCase()}}">
    </section>

    <section id="each">
        <h3>Each Binder</h3>
        <br>
        <pre>${Code(`
        <div each="{{key, index, fruit of fruits}}">
            <div id="{{fruit.name}}">
                <strong>Key: </strong>{{key}},
                <strong>Index: </strong>{{index}},
                <strong>Value: </strong>{{fruit}}
            </div>
        </div>`, true)}</pre>
        <br>
        <div each="{{key, index, fruit of fruits}}">
            <div id="{{fruit}}">
                <strong>Key: </strong>{{key}},
                <strong>Index: </strong>{{index}},
                <strong>Value: </strong>{{fruit}}
            </div>
        </div>
    </section>

    <section id="select">
        <h3>Select Binder</h3>
        <br>
        <pre>${Code(`
        <div>{{selectPlant}}</div>
        <select value="{{selectedPlant = $value}}">
            <option value="tree">Tree</option>
            <option value="cactus">Cactus</option>
        </select>`, true)}</pre>
        <br>
        <div>{{selectedPlant}}</div>
        <select value="{{selectedPlant = $value}}">
            <option value="tree">Tree</option>
            <option value="cactus">Cactus</option>
        </select>
        <br>
        <pre>${Code(`
        <div>{{selectEachResult}}</div>
        <select value="{{selectEachResult = $value}}" each="{{fruit of fruits}}">
            <option value="{{fruit}}">{{fruit}}</option>
        </select>`, true)}</pre>
        <br>
        <div>{{selectEachResult}}</div>
        <select value="{{selectEachResult = $value}}" each="{{fruit of fruits}}">
            <option value="{{fruit}}">{{fruit}}</option>
        </select>
        <br>
        <pre>${Code(`
        <div>{{multipleSelectResult}}</div>
        <select value="{{multipleSelectResult = $value}}" multiple>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="opel">Opel</option>
            <option value="audi">Audi</option>
        </select>`, true)}</pre>
        <br>
        <div>{{multipleSelectResult}}</div>
        <select value="{{multipleSelectResult = $value}}" multiple>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="opel">Opel</option>
            <option value="audi">Audi</option>
        </select>
    </section>

    <section>
        <h3>Submit Binder</h3>
        <br>
        <form onsubmit="{{submit($form)}}">
            <div>{{firstName}}</div>
            <input name="name.first" value="{{firstName = $value}}" placeholder="first name">
            <div>{{lastName}}</div>
            <input name="name.last" value="{{$value ?? lastName}}" placeholder="last name">
            <br>
            <br>
            <input type="checkbox" name="agree" value="{{agree ? 'yes' : 'no'}}" checked="{{agree = $checked}}">Agree? {{agree ? 'yes': 'no'}}
            <br>
            <br>
            <strong>Animal:</strong>
            <input type="radio" name="animal" value="{{'dogs'}}" checked="{{$checked}}">Dogs
            <input type="radio" name="animal" value="cats" checked="{{$checked}}">Cats
            <br>
            <br>
            <div>{{favoriteNumber}}</div>
            <input name="favoriteNumber" type="number" value="{{favoriteNumber = $value}}">
            <br>
            <br>
            <input type="submit" value="submit">
        </form>
    </section>

    <section>
        <h3>HTML Binder</h3>
        <br>
        <pre>${Code(`<div html="{{hyperText}}"></div>`, true)}</pre>
        <br>
        <div html="{{hyperText}}"></div>
    </section>

        -->
</x-binders>

<script type="module">
import code from './modules/code.js';
import color from './modules/color.js';
import XElement from '../src/element.js';

class XBinders extends XElement {

    // static attributes = [ 'test' ];
    // async attributed () { console.log(arguments); }

    async connectedCallback () {
        await super.connectedCallback();
        console.log('binders connected');
    }

    data () {
        return {
            code, color,

            text: 'Hello World',

            checked: true,
            check: 'checked',
            checkResult: checked => checked ? 'checked' : '',
            checkInput () { console.log(this.checked); },

            r1: undefined,
            r2: undefined,

            colorChange () { this.color = color(); },

            active: true,
            lightblue: active => active ? 'lightblue' : '',
            classToggle () { this.active = !this.active; },

            value: {
                text: 'hello world',
                upper: text => text?.toUpperCase(),
            },

            fruits: [ 'apple', 'orange', 'tomato' ],
            log () { console.log(arguments); },

            selectedPlant: undefined,
            selectEachResult: 'orange',
            multipleSelectResult: [],

            radio: false,
            agree: true,
            lastName: 'bond',
            firstName: 'james',
            favoriteNumber: undefined,
            submit (form) { console.log(form); },

            hyperText: '<strong>Hyper Text Markup Language</strong>',
        }
    }

};

customElements.define('x-binders',XBinders);
</script>