Skip to content

Instantly share code, notes, and snippets.

@pvolyntsev

pvolyntsev/colorPicker.js

Last active March 16, 2017 16:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save pvolyntsev/67acceebdbbdd55ab6a7f6e2369f099c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save pvolyntsev/67acceebdbbdd55ab6a7f6e2369f099c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. pvolyntsev revised this gist Mar 16, 2017. 4 changed files with 15 additions and 2 deletions.
    5 changes: 5 additions & 0 deletions demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <div id="demo"></div>

    <script type="text/x-template" id="demo-template">
    <color-picker v-model="color" placeholder="#000000"></color-picker>
    </script>
    7 changes: 7 additions & 0 deletions demo.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    var vm = new Vue({
    el: '#demo',
    template: '#demo-template',
    data: {
    color: '#ff0000' // this will be binded to wpColorPicker
    }
    })
    4 changes: 3 additions & 1 deletion readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,6 @@
    This may be used for WordPress themes and plugins bases on Vue
    Vue component for two-way binding of jQuery wpColorPicker plugin and Vue.js model

    This may be used for WordPress themes and plugins based on Vue.js

    Tested for <a href="https://wordpress.org/">WordPress</a> v 4.6.1 ... 4.7.3 and <a href="https://vuejs.org/v2/guide/">Vue</a> 2.2.1

    1 change: 0 additions & 1 deletion sample.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +0,0 @@
    <color-picker v-model="color" placeholder="#000000"></color-picker>
  2. pvolyntsev revised this gist Mar 16, 2017. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    This may be used for WordPress themes and plugins bases on Vue

    Tested for WordPress 4.6.1 ... 4.7.3 and Vue 2.2.1
    Tested for <a href="https://wordpress.org/">WordPress</a> v 4.6.1 ... 4.7.3 and <a href="https://vuejs.org/v2/guide/">Vue</a> 2.2.1

    Based on this sample: https://vuejs.org/v2/examples/select2.html
  3. pvolyntsev revised this gist Mar 16, 2017. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    This may be used for WordPress themes and plugins bases on Vue

    Tested for WordPress 4.6.1 ... 4.7.3 and Vue 2.2.1
  4. pvolyntsev revised this gist Mar 16, 2017. No changes.
  5. pvolyntsev created this gist Mar 16, 2017.
    25 changes: 25 additions & 0 deletions colorPicker.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    Vue.component('colorPicker', {
    props: ['value'],
    template: '<input type="text">',
    mounted: function () {
    var vm = this;
    $(this.$el)
    .val(this.value)
    // WordPress color picker
    .wpColorPicker({
    defaultColor: this.value,
    change: function(event, ui) {
    // emit change event on color change using mouse
    vm.$emit('input', ui.color.toString());
    }});
    },
    watch: {
    value: function (value) {
    // update value
    $(this.$el).wpColorPicker('color', value);
    }
    },
    destroyed: function () {
    $(this.$el).off().wpColorPicker('destroy'); // (!) Not tested
    }
    });
    1 change: 1 addition & 0 deletions sample.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <color-picker v-model="color" placeholder="#000000"></color-picker>