| 282 | } |
| 283 | |
| 284 | static html() { |
| 285 | return '' + |
| 286 | '<div class="ptro-color-widget-wrapper ptro-common-widget-wrapper ptro-v-middle" hidden>' + |
| 287 | '<div class="ptro-pallet ptro-color-main ptro-v-middle-in">' + |
| 288 | '<canvas></canvas>' + |
| 289 | '<canvas class="ptro-canvas-light"></canvas>' + |
| 290 | '<span class="ptro-color-light-regulator ptro-bordered-control"></span>' + |
| 291 | '<canvas class="ptro-canvas-alpha"></canvas>' + |
| 292 | '<span class="alpha-checkers"></span>' + |
| 293 | '<span class="ptro-color-alpha-regulator ptro-bordered-control"></span>' + |
| 294 | '<div class="ptro-colors"></div>' + |
| 295 | '<div class="ptro-color-edit">' + |
| 296 | '<button type="button" aria-label="pipette" class="ptro-icon-btn ptro-pipette ptro-color-control" style="float: left; margin-right: 5px">' + |
| 297 | '<i class="ptro-icon ptro-icon-pipette"></i>' + |
| 298 | '</button>' + |
| 299 | '<input class="ptro-input ptro-color" type="text" size="7"/>' + |
| 300 | '<button type="button" aria-label="close" class="ptro-named-btn ptro-close-color-picker ptro-color-control" >' + |
| 301 | `${tr('close')}</button>` + |
| 302 | '</div>' + |
| 303 | '</div>' + |
| 304 | '</div>'; |
| 305 | } |
| 306 | |
| 307 | drawLighter() { |
| 308 | const lightGradient = this.ctxLight.createLinearGradient(0, 0, this.w, 0); |