Skip to content

Instantly share code, notes, and snippets.

@yesh0907

yesh0907/designer.html

Last active August 29, 2015 14:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save yesh0907/2a1e1eb69cf5a71424de to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save yesh0907/2a1e1eb69cf5a71424de to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. yesh0907 revised this gist Dec 17, 2014. 1 changed file with 294 additions and 11 deletions.
    305 changes: 294 additions & 11 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,33 +1,316 @@
    <!--
    Copyright 2013 The Polymer Authors. All rights reserved.
    Use of this source code is governed by a BSD-style
    license that can be found in the LICENSE file.
    -->
    <link rel="import" href="../polymer/polymer.html">

    <polymer-element name="x-abstract-editor" attributes="value">

    <template>
    <style>
    </style>
    </template>

    <script>

    Polymer({
    Polymer('x-abstract-editor', {
    value: '',
    meta: null,
    workingValue: null,
    valueChanged: function () {
    valueChanged: function() {
    this.workingValue = this.value;
    },
    commit: function () {
    commit: function() {
    this.value = this.format(this.workingValue);
    // it's critical to have an event from the editor UI so we know when
    // a user has changed a value, vs some other form of alteration
    // for the same reason, we float our own changed event
    this.fire('editor-value-changed');
    },
    format: function (value) {
    format: function(value) {
    return value;
    }
    });
    </script>
    </polymer-element>

    <polymer-element name="x-string-editor" extends="x-abstract-editor">
    <template>
    <style>
    :host {
    display: inline-block;
    width: 95%;
    }
    input {
    border: 1px solid #e4e4e4;
    border-top-color: #cecece;
    color: #333;
    background: #fff;
    padding: 9px 8px;
    margin: 0;
    width: 100%;
    font: inherit;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* -webkit-user-select: all;
    -moz-user-select: all;
    user-select: all; */
    }
    input:focus {
    outline: 1px solid #448afd;
    }
    input:invalid {
    outline: 1px solid #d84437;
    }
    input:active {
    background: #ededed;
    }
    </style>
    <input id="input" type="{{type}}" value="{{workingValue}}" autocapitalize="off"
    autocorrect="off" on-change="{{commit}}">
    </template>
    <script>
    Polymer('x-string-editor', {
    type: 'text',
    focus: function() {
    this.$.input.focus();
    }
    });
    </script>
    </polymer-element>

    <polymer-element name="x-number-editor" extends="x-string-editor">
    <script>
    Polymer('x-number-editor', {
    format: function(value) {
    return Number(value);
    }
    });
    </script>
    </polymer-element>

    <polymer-element name="x-color-editor" extends="x-string-editor">
    <script>
    Polymer('x-color-editor', {
    type: 'color',
    ready: function() {
    // TODO(sjmiles): box-sizing: border-box doesn't play nice with color inputs
    // TODO(sjmiles): is there a way to effect these styles via stylesheet?
    this.$.input.style.boxSizing = 'content-box';
    this.$.input.style.width = '95%';
    this.$.input.style.padding = '5px';
    // TODO(dfreedm): Workaround for http://crbug.com/234801, colorpicker
    // does not update swatch when in shadowdom because of focus issues
    this.$.input.tabindex = -1;
    },
    valueChanged: function() {
    this.workingValue = toHex(this.value);
    },
    format: function(value) {
    return toHex(value);
    }
    });
    function toHex(color) {
    if (!color || color.substr(0, 1) === "#") {
    return color;
    }
    var nums = /(.*?)rgb\((\d+),\s*(\d+),\s*(\d+)\)/i.exec(color);
    if (nums) {
    var r = parseInt(nums[2], 10).toString(16),
    g = parseInt(nums[3], 10).toString(16),
    b = parseInt(nums[4], 10).toString(16);
    return "#"+ (
    (r.length == 1 ? r + "0" : r) +
    (g.length == 1 ? g + "0" : g) +
    (b.length == 1 ? b + "0" : b)
    );
    }
    }
    </script>
    </polymer-element>

    <polymer-element name="x-boolean-editor" extends="x-abstract-editor">
    <template>
    <style>
    input {
    font: inherit;
    }
    </style>
    <input id="input" type="checkbox" checked="{{workingValue}}" on-change="{{inputChange}}">
    </template>
    <script>
    Polymer('x-boolean-editor', {
    inputChange: function(event) {
    this.workingValue = event.target.checked;
    this.commit();
    }
    });
    </script>
    </polymer-element>

    <polymer-element name="x-select-editor" extends="x-abstract-editor" attributes="options">
    <template>
    <style>
    :host {
    display: inline-block;
    width: 95%;
    position: relative;
    }
    select {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    font: inherit;
    -webkit-user-select: all;
    -moz-user-select: all;
    user-select: all;
    }
    </style>
    <select id="select" on-change="{{selectChange}}"></select>
    </template>
    <script>
    // TODO(sorvell): Template repeat functions specially inside a select
    // by using <option template repeat="{{options}}">{{}}</option>
    // However, this creates an extra space in the select; see
    // due to https://github.com/toolkitchen/mdv/issues/56.
    // For that reason, we're manually iterating these nodes.
    Polymer('x-select-editor', {
    metaChanged: function() {
    this.options = this.meta.options || [];
    // allow template to generate options before setting value
    this.asyncMethod(function() {
    this.$.select.value = this.workingValue;
    });
    },
    optionsChanged: function() {
    this.$.select.value = this.workingValue;
    this.$.select.textContent = '';
    this.options.forEach(function(o) {
    var option = document.createElement('option');
    option.textContent = o;
    this.$.select.appendChild(option);
    }, this);
    /*
    this.asyncMethod(function() {
    if (this.workingValue !== this.$.select.value) {
    this.selectChange();
    }
    });
    */
    },
    selectChange: function() {
    this.workingValue = this.$.select.value;
    this.commit();
    },
    focus: function() {
    this.$.select.focus();
    }
    });
    </script>
    </polymer-element>

    <polymer-element name="x-text-editor" extends="x-abstract-editor">
    <template>
    <style>
    textarea {
    padding: 6px;
    margin: 0;
    width: 95%;
    /* -webkit-user-select: all;
    -moz-user-select: all;
    user-select: all; */
    overflow: auto;
    vertical-align: middle;
    }
    </style>
    <textarea id="input" on-change="{{commit}}" rows="10"></textarea>
    </template>
    <script>
    Polymer('x-text-editor', {
    workingValueChanged: function() {
    this.$.input.textContent = this.workingValue;
    },
    commit: function() {
    this.workingValue = this.$.input.value;
    this.super();
    }
    });
    </script>
    </polymer-element>

    <polymer-element name="x-json-editor" extends="x-text-editor">
    <template>
    <shadow></shadow>
    </template>
    <script>
    Polymer('x-json-editor', {
    workingValueChanged: function() {
    this.$.input.textContent = JSON.stringify(this.workingValue);
    },
    format: function(value) {
    return JSON.parse(this.workingValue);
    }
    });
    </script>
    </polymer-element>

    <polymer-element name="x-range-editor" extends="x-abstract-editor" attributes="min max step defaultValue">
    <template>
    <style>
    :host {
    display: inline-block;
    width: 95%;
    position: relative;
    }
    input {
    padding: 7px 6px 8px;
    margin: 0;
    width: 95%;
    box-sizing: border-box;
    vertical-align: middle;
    -webkit-user-select: all;
    -moz-user-select: all;
    user-select: all;
    }
    </style>
    <input id="input" type="range" value="{{workingValue}}" min="{{min}}" max="{{max}}" step="{{step}}" on-change="{{commit}}">
    </template>
    <script>
    Polymer('x-range-editor', {
    min: 0,
    max: 1,
    step: 0.1,
    defaultValue: 0,
    metaChanged: function() {
    if (this.meta) {
    this.min = this.meta.min;
    this.max = this.meta.max;
    this.step = this.meta.step;
    this.defaultValue = this.meta.defaultvalue;
    }
    },
    defaultValueChanged: function() {
    if (this.workingValue === null || this.workingValue === '') {
    this.workingValue = this.defaultValue || this.min || 0;
    }
    }
    });
    </script>
    </polymer-element>

    <polymer-element name="x-speech-editor" extends="x-string-editor">
    <script>
    Polymer('x-speech-editor', {
    ready: function() {
    this.$.input.setAttribute('x-webkit-speech');
    }
    });
    </script>
    </polymer-element>

    <polymer-element name="x-compound-editor" extends="x-abstract-editor">
    <template>
    <x-string-editor style="width: 90px;"></x-string-editor>
    <x-select-editor style="width: 70px;" options="{{options}}"></x-select-editor>
    <x-range-editor style="width: 100px;"></x-range-editor>
    </template>
    <script>
    Polymer('x-compound-editor', {
    options: ['px', 'pt', '%', 'em', 'rem', '']
    });
    </script>
    </polymer-element>
  2. yesh0907 revised this gist Dec 17, 2014. No changes.
  3. yesh0907 created this gist Dec 17, 2014.
    33 changes: 33 additions & 0 deletions designer.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    <link rel="import" href="../polymer/polymer.html">

    <polymer-element name="x-abstract-editor" attributes="value">

    <template>
    <style>
    </style>
    </template>

    <script>

    Polymer({
    value: '',
    meta: null,
    workingValue: null,
    valueChanged: function () {
    this.workingValue = this.value;
    },
    commit: function () {
    this.value = this.format(this.workingValue);
    // it's critical to have an event from the editor UI so we know when
    // a user has changed a value, vs some other form of alteration
    // for the same reason, we float our own changed event
    this.fire('editor-value-changed');
    },
    format: function (value) {
    return value;
    }
    });

    </script>

    </polymer-element>