BoldGrid /
controls
| Lines of Code | 101 |
| Duplicated Lines | 0 |
| Ratio | 0 % |
| Changes | 1 | ||
| Bugs | 0 | Features | 0 |
| 1 | import { Direction } from '../direction'; |
||
| 2 | import template from './template.html'; |
||
| 3 | import './style.scss'; |
||
| 4 | |||
| 5 | export class Border extends Direction { |
||
| 6 | |||
| 7 | constructor( options ) { |
||
| 8 | super( options ); |
||
| 9 | |||
| 10 | this.controlOptions = { |
||
| 11 | 'control': { |
||
| 12 | 'title': 'Border Width', |
||
| 13 | 'name': 'border-width', |
||
| 14 | 'units': { |
||
| 15 | 'default': 'px', |
||
| 16 | 'enabled': [ |
||
| 17 | 'px' |
||
| 18 | ] |
||
| 19 | } |
||
| 20 | }, |
||
| 21 | 'slider': { |
||
| 22 | 'px': { |
||
| 23 | 'min': 0, |
||
| 24 | 'max': 15 |
||
| 25 | } |
||
| 26 | } |
||
| 27 | }; |
||
| 28 | } |
||
| 29 | |||
| 30 | /** |
||
| 31 | * Create a control. |
||
| 32 | * |
||
| 33 | * @since 1.0.0 |
||
| 34 | * |
||
| 35 | * @return {jQuery} Control. |
||
| 36 | */ |
||
| 37 | render() { |
||
| 38 | let $control; |
||
| 39 | |||
| 40 | super.render(); |
||
| 41 | |||
| 42 | this.$typeControl = $( template ); |
||
| 43 | |||
| 44 | this.bindEvents(); |
||
| 45 | |||
| 46 | $control = this.$typeControl.add( this.$control ); |
||
| 47 | |||
| 48 | return $control; |
||
| 49 | } |
||
| 50 | |||
| 51 | /** |
||
| 52 | * Bind all events. |
||
| 53 | * |
||
| 54 | * @since 1.0.0 |
||
| 55 | */ |
||
| 56 | bindEvents() { |
||
| 57 | this._bindTypeChange(); |
||
| 58 | this.setDefaultType( this.$target.css( 'border-style' ) ); |
||
| 59 | } |
||
| 60 | |||
| 61 | /** |
||
| 62 | * Set the default type. |
||
| 63 | * |
||
| 64 | * @since 1.0.0 |
||
| 65 | * |
||
| 66 | * @param {string} style Border style. |
||
| 67 | */ |
||
| 68 | setDefaultType( style ) { |
||
| 69 | this.$typeControl.find( 'input' ) |
||
| 70 | .filter( '[value="' + style + '"]' ) |
||
| 71 | .prop( 'checked', true ) |
||
| 72 | .change(); |
||
| 73 | } |
||
| 74 | |||
| 75 | /** |
||
| 76 | * When the border type changes, update the css. |
||
| 77 | * |
||
| 78 | * @since 1.0.0 |
||
| 79 | */ |
||
| 80 | _bindTypeChange() { |
||
| 81 | this.$typeControl.find( 'input' ).on( 'change', ( e ) => { |
||
| 82 | let $this = $( e.target ), |
||
| 83 | val = $this.val(); |
||
| 84 | |||
| 85 | this.$target.css( { |
||
| 86 | 'border-style': val |
||
| 87 | } ); |
||
| 88 | |||
| 89 | this.$control.trigger( 'type-change', val ); |
||
| 90 | |||
| 91 | if ( val ) { |
||
| 92 | this.$control.show(); |
||
| 93 | } else { |
||
| 94 | this.$control.hide(); |
||
| 95 | } |
||
| 96 | } ); |
||
| 97 | } |
||
| 98 | |||
| 99 | } |
||
| 100 | |||
| 101 | export { Border as default }; |
||
| 102 |
