From e7bf50e5232ab2de8d2b30db8167e64d9d4f6532 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=A7=84=EC=9A=B0?= Date: Mon, 2 Dec 2019 13:44:58 +0900 Subject: [PATCH 1/4] fix: filter checkbox behavior bug for filter --- examples/example01-includeUi.html | 30 ++++++-- src/css/buttons.styl | 22 +++--- src/css/checkbox.styl | 9 ++- src/css/colorpicker.styl | 5 +- src/css/icon.styl | 4 +- src/css/submenu.styl | 6 +- src/js/ui/crop.js | 6 +- src/js/ui/draw.js | 2 +- src/js/ui/filter.js | 18 ++--- src/js/ui/flip.js | 2 +- src/js/ui/icon.js | 4 +- src/js/ui/mask.js | 4 +- src/js/ui/shape.js | 2 +- src/js/ui/template/style.js | 50 ++++++------- src/js/ui/template/submenu/crop.js | 4 +- src/js/ui/template/submenu/draw.js | 2 +- src/js/ui/template/submenu/filter.js | 106 +++++++++++++++++---------- src/js/ui/template/submenu/flip.js | 2 +- src/js/ui/template/submenu/icon.js | 6 +- src/js/ui/template/submenu/mask.js | 4 +- src/js/ui/template/submenu/shape.js | 2 +- src/js/ui/template/submenu/text.js | 4 +- src/js/ui/text.js | 4 +- 23 files changed, 173 insertions(+), 125 deletions(-) diff --git a/examples/example01-includeUi.html b/examples/example01-includeUi.html index 5c8f76e3d..c8d93de63 100644 --- a/examples/example01-includeUi.html +++ b/examples/example01-includeUi.html @@ -15,7 +15,8 @@ -
+
+
@@ -34,16 +35,31 @@ }, theme: blackTheme, // or whiteTheme initMenu: 'filter', - menuBarPosition: 'bottom' + menuBarPosition: 'bottom', + uiSize: { + width: '900px', + height: '700px' + } }, - cssMaxWidth: 700, - cssMaxHeight: 500, + cssMaxWidth: 300, + cssMaxHeight: 200, + usageStatistics: false + }); + var imageEditor2 = new tui.ImageEditor('#tui-image-editor-container2', { + includeUI: { + loadImage: { + path: 'img/sampleImage2.png', + name: 'SampleImage' + }, + theme: blackTheme, // or whiteTheme + initMenu: 'filter', + menuBarPosition: 'bottom', + }, + cssMaxWidth: 300, + cssMaxHeight: 200, usageStatistics: false }); - window.onresize = function() { - imageEditor.ui.resizeEditor(); - } diff --git a/src/css/buttons.styl b/src/css/buttons.styl index 3d46f510d..0a25839bd 100644 --- a/src/css/buttons.styl +++ b/src/css/buttons.styl @@ -1,5 +1,5 @@ /* ICON BUTTON */ -#tie-icon-add-button +.tie-icon-add-button &.icon-bubble .{prefix}-button[data-icontype="icon-bubble"] svg > use.active, &.icon-heart .{prefix}-button[data-icontype="icon-heart"] svg > use.active, &.icon-location .{prefix}-button[data-icontype="icon-location"] svg > use.active, @@ -13,7 +13,7 @@ display: block; /* DRAW BUTTON */ -#tie-draw-line-select-button +.tie-draw-line-select-button &.line .{prefix}-button.line svg > use.normal, &.free .{prefix}-button.free svg > use.normal display: none; @@ -23,7 +23,7 @@ display: block; /* FLIP BUTTON */ -#tie-flip-button +.tie-flip-button &.resetFlip .{prefix}-button.resetFlip, &.flipX .{prefix}-button.flipX, &.flipY .{prefix}-button.flipY @@ -33,15 +33,15 @@ display: block; /* MASK BUTTON */ -#tie-mask-apply.apply.active .{prefix}-button.apply +.tie-mask-apply.apply.active .{prefix}-button.apply label color: #fff; svg > use.active display: block; /* CROP BUTTON */ -#tie-crop-button, -#tie-crop-preset-button +.tie-crop-button, +.tie-crop-preset-button .{prefix}-button.apply margin-right: 24px; .{prefix}-button.preset.active svg > use.active @@ -51,7 +51,7 @@ /* SHAPE BUTTON */ -#tie-shape-button +.tie-shape-button &.rect .{prefix}-button.rect, &.circle .{prefix}-button.circle, &.triangle .{prefix}-button.triangle @@ -61,16 +61,16 @@ display: block; /* TEXT BUTTON */ -#tie-text-effect-button +.tie-text-effect-button .{prefix}-button.active svg > use.active display: block; -#tie-text-align-button +.tie-text-align-button &.left .{prefix}-button.left svg > use.active, &.center .{prefix}-button.center svg > use.active, &.right .{prefix}-button.right svg > use.active display: block; -#tie-mask-image-file, -#tie-icon-image-file +.tie-mask-image-file, +.tie-icon-image-file opacity: 0; position: absolute; width: 100%; diff --git a/src/css/checkbox.styl b/src/css/checkbox.styl index 2f0ab3bbd..214b21b28 100644 --- a/src/css/checkbox.styl +++ b/src/css/checkbox.styl @@ -17,11 +17,12 @@ width: 14px; height: 14px; opacity: 0; - input + label + > label > span color: #fff; height: 14px; position: relative; - input + label:before + input + label:before, + > label > span:before content: ''; position: absolute; width: 14px; @@ -37,7 +38,7 @@ border-radius: 2px; padding-top: 1px; box-sizing: border-box; - input[type='checkbox']:checked + label:before + input[type='checkbox']:checked + span:before background-size: cover; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAMBJREFUKBWVkjEOwjAMRe2WgZW7IIHEDdhghhuwcQ42rlJugAQS54Cxa5cq1QM5TUpByZfS2j9+dlJVt/tX5ZxbS4ZU9VLkQvSHKTIGRaVJYFmKrBbTCJxE2UgCdDzMZDkHrOV6b95V0US6UmgKodujEZbJg0B0ZgEModO5lrY1TMQf1TpyJGBEjD+E2NPN7ukIUDiF/BfEXgRiGEw8NgkffYGYwCi808fpn/6OvfUfsDr/Vc1IfRf8sKnFVqeiVQfDu0tf/nWH9gAAAABJRU5ErkJggg=='); @@ -82,4 +83,4 @@ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYBgFOEOAEVkmPDxc89+/f6eAYjzI4kD2FyYmJrOVK1deh4kzwRggGiQBVJCELAZig8SQNYHEmEEEMrh69eo1HR0dfqCYJUickZGxf9WqVf3IakBsFBthklpaWmVA9mEQhrJhUoTp0NBQCRAmrHL4qgAAuu4cWZOZIGsAAAAASUVORK5CYII='); background-size: cover; .{prefix}-selectlist-wrap select::-ms-expand - display:none; \ No newline at end of file + display:none; diff --git a/src/css/colorpicker.styl b/src/css/colorpicker.styl index e716d3338..a2d262401 100644 --- a/src/css/colorpicker.styl +++ b/src/css/colorpicker.styl @@ -71,7 +71,8 @@ margin-right: 7pxleft .tui-image-editor-checkbox margin-top: 0; - input + label:before + input + label:before, + > label:before left: -16px; .color-picker width: 100%; @@ -94,4 +95,4 @@ .{prefix}-submenu svg > use display: none; .{prefix}-submenu svg > use.normal - display: block; \ No newline at end of file + display: block; diff --git a/src/css/icon.styl b/src/css/icon.styl index 79c882f10..6099b631a 100644 --- a/src/css/icon.styl +++ b/src/css/icon.styl @@ -1,6 +1,6 @@ /* ICON */ .{prefix}-container - #tie-icon-add-button .{prefix}-button + .tie-icon-add-button .{prefix}-button min-width: 42px; .svg_ic-menu width: 24px; @@ -30,4 +30,4 @@ .enabled svg > use.normal display: none; .{prefix}-controls:hover - z-index: 3; \ No newline at end of file + z-index: 3; diff --git a/src/css/submenu.styl b/src/css/submenu.styl index 089edc7b7..1c1a81411 100644 --- a/src/css/submenu.styl +++ b/src/css/submenu.styl @@ -26,7 +26,7 @@ margin: 0 9px 0 9px; .{prefix}-button.preset margin: 0 9px 20px 5px; - label + label > span display: inline-block; cursor: pointer; padding-top: 5px; @@ -59,12 +59,12 @@ .{prefix}-submenu-align text-align: left; margin-right: 30px; - label + label > span width: 55px; white-space: nowrap; .{prefix}-submenu-align:first-child margin-right: 0; - label + label > span width: 70px; .{prefix}-main.{prefix}-menu-crop .{prefix}-submenu > div.{prefix}-menu-crop, .{prefix}-main.{prefix}-menu-flip .{prefix}-submenu > div.{prefix}-menu-flip, diff --git a/src/js/ui/crop.js b/src/js/ui/crop.js index b2bf1b428..526fd2bc5 100644 --- a/src/js/ui/crop.js +++ b/src/js/ui/crop.js @@ -21,9 +21,9 @@ class Crop extends Submenu { this.status = 'active'; this._els = { - apply: this.selector('#tie-crop-button .apply'), - cancel: this.selector('#tie-crop-button .cancel'), - preset: this.selector('#tie-crop-preset-button') + apply: this.selector('.tie-crop-button .apply'), + cancel: this.selector('.tie-crop-button .cancel'), + preset: this.selector('.tie-crop-preset-button') }; this.defaultPresetButton = this._els.preset.querySelector('.preset-none'); diff --git a/src/js/ui/draw.js b/src/js/ui/draw.js index 35e3b68e4..e59d3f4a3 100644 --- a/src/js/ui/draw.js +++ b/src/js/ui/draw.js @@ -23,7 +23,7 @@ class Draw extends Submenu { }); this._els = { - lineSelectButton: this.selector('#tie-draw-line-select-button'), + lineSelectButton: this.selector('.tie-draw-line-select-button'), drawColorpicker: new Colorpicker( this.selector('#tie-draw-color'), '#00a9ff', this.toggleDirection, this.usageStatistics ), diff --git a/src/js/ui/filter.js b/src/js/ui/filter.js index ac84acc9c..f8e8a1fd5 100644 --- a/src/js/ui/filter.js +++ b/src/js/ui/filter.js @@ -80,7 +80,7 @@ class Filter extends Submenu { const changeRangeValue = this._changeRangeValue.bind(this, applyFilter); snippet.forEach(FILTER_OPTIONS, filter => { - const filterCheckElement = this.selector(`#tie-${filter}`); + const filterCheckElement = this.selector(`.tie-${filter}`); const filterNameCamelCase = toCamelCase(filter); this.checkedMap[filterNameCamelCase] = filterCheckElement; @@ -179,33 +179,33 @@ class Filter extends Submenu { const {selector} = this; this._els = { removewhiteDistanceRange: new Range( - selector('#tie-removewhite-distance-range'), + selector('.tie-removewhite-distance-range'), FILTER_RANGE.removewhiteDistanceRange ), brightnessRange: new Range( - selector('#tie-brightness-range'), + selector('.tie-brightness-range'), FILTER_RANGE.brightnessRange ), noiseRange: new Range( - selector('#tie-noise-range'), + selector('.tie-noise-range'), FILTER_RANGE.noiseRange ), pixelateRange: new Range( - selector('#tie-pixelate-range'), + selector('.tie-pixelate-range'), FILTER_RANGE.pixelateRange ), colorfilterThresholeRange: new Range( - selector('#tie-colorfilter-threshole-range'), + selector('.tie-colorfilter-threshole-range'), FILTER_RANGE.colorfilterThresholeRange ), filterTintColor: new Colorpicker( - selector('#tie-filter-tint-color'), '#03bd9e', this.toggleDirection, this.usageStatistics + selector('.tie-filter-tint-color'), '#03bd9e', this.toggleDirection, this.usageStatistics ), filterMultiplyColor: new Colorpicker( - selector('#tie-filter-multiply-color'), '#515ce6', this.toggleDirection, this.usageStatistics + selector('.tie-filter-multiply-color'), '#515ce6', this.toggleDirection, this.usageStatistics ), filterBlendColor: new Colorpicker( - selector('#tie-filter-blend-color'), '#ffbb3b', this.toggleDirection, this.usageStatistics + selector('.tie-filter-blend-color'), '#ffbb3b', this.toggleDirection, this.usageStatistics ) }; diff --git a/src/js/ui/flip.js b/src/js/ui/flip.js index ff1fa6b45..00fd64a15 100644 --- a/src/js/ui/flip.js +++ b/src/js/ui/flip.js @@ -20,7 +20,7 @@ class Flip extends Submenu { this.flipStatus = false; this._els = { - flipButton: this.selector('#tie-flip-button') + flipButton: this.selector('.tie-flip-button') }; } diff --git a/src/js/ui/icon.js b/src/js/ui/icon.js index 9d8a9f866..8e99ba398 100644 --- a/src/js/ui/icon.js +++ b/src/js/ui/icon.js @@ -25,8 +25,8 @@ class Icon extends Submenu { this._iconMap = {}; this._els = { - registIconButton: this.selector('#tie-icon-image-file'), - addIconButton: this.selector('#tie-icon-add-button'), + registIconButton: this.selector('.tie-icon-image-file'), + addIconButton: this.selector('.tie-icon-add-button'), iconColorpicker: new Colorpicker( this.selector('#tie-icon-color'), '#ffbb3b', this.toggleDirection, this.usageStatistics ) diff --git a/src/js/ui/mask.js b/src/js/ui/mask.js index 53e8d6ceb..592366993 100644 --- a/src/js/ui/mask.js +++ b/src/js/ui/mask.js @@ -19,8 +19,8 @@ class Mask extends Submenu { }); this._els = { - applyButton: this.selector('#tie-mask-apply'), - maskImageButton: this.selector('#tie-mask-image-file') + applyButton: this.selector('.tie-mask-apply'), + maskImageButton: this.selector('.tie-mask-image-file') }; } diff --git a/src/js/ui/shape.js b/src/js/ui/shape.js index 7b6d016a2..af9840698 100644 --- a/src/js/ui/shape.js +++ b/src/js/ui/shape.js @@ -30,7 +30,7 @@ class Shape extends Submenu { this.options = SHAPE_DEFAULT_OPTION; this._els = { - shapeSelectButton: this.selector('#tie-shape-button'), + shapeSelectButton: this.selector('.tie-shape-button'), shapeColorButton: this.selector('#tie-shape-color-button'), strokeRange: new Range(this.selector('#tie-stroke-range'), defaultShapeStrokeValus), strokeRangeValue: this.selector('#tie-stroke-range-value'), diff --git a/src/js/ui/template/style.js b/src/js/ui/template/style.js index 073e57f15..e47f4a080 100644 --- a/src/js/ui/template/style.js +++ b/src/js/ui/template/style.js @@ -18,31 +18,31 @@ export default ({ menuIconSize, biSize }) => (` - #tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype="icon-bubble"] label, - #tie-icon-add-button.icon-heart .tui-image-editor-button[data-icontype="icon-heart"] label, - #tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype="icon-location"] label, - #tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype="icon-polygon"] label, - #tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype="icon-star"] label, - #tie-icon-add-button.icon-star-2 .tui-image-editor-button[data-icontype="icon-star-2"] label, - #tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype="icon-arrow-3"] label, - #tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype="icon-arrow-2"] label, - #tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype="icon-arrow"] label, - #tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype="icon-bubble"] label, - #tie-draw-line-select-button.line .tui-image-editor-button.line label, - #tie-draw-line-select-button.free .tui-image-editor-button.free label, - #tie-flip-button.flipX .tui-image-editor-button.flipX label, - #tie-flip-button.flipY .tui-image-editor-button.flipY label, - #tie-flip-button.resetFlip .tui-image-editor-button.resetFlip label, - #tie-crop-button .tui-image-editor-button.apply.active label, - #tie-crop-preset-button .tui-image-editor-button.preset.active label, - #tie-shape-button.rect .tui-image-editor-button.rect label, - #tie-shape-button.circle .tui-image-editor-button.circle label, - #tie-shape-button.triangle .tui-image-editor-button.triangle label, - #tie-text-effect-button .tui-image-editor-button.active label, - #tie-text-align-button.left .tui-image-editor-button.left label, - #tie-text-align-button.center .tui-image-editor-button.center label, - #tie-text-align-button.right .tui-image-editor-button.right label, - #tie-mask-apply.apply.active .tui-image-editor-button.apply label, + .tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype="icon-bubble"] label, + .tie-icon-add-button.icon-heart .tui-image-editor-button[data-icontype="icon-heart"] label, + .tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype="icon-location"] label, + .tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype="icon-polygon"] label, + .tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype="icon-star"] label, + .tie-icon-add-button.icon-star-2 .tui-image-editor-button[data-icontype="icon-star-2"] label, + .tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype="icon-arrow-3"] label, + .tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype="icon-arrow-2"] label, + .tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype="icon-arrow"] label, + .tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype="icon-bubble"] label, + .tie-draw-line-select-button.line .tui-image-editor-button.line label, + .tie-draw-line-select-button.free .tui-image-editor-button.free label, + .tie-flip-button.flipX .tui-image-editor-button.flipX label, + .tie-flip-button.flipY .tui-image-editor-button.flipY label, + .tie-flip-button.resetFlip .tui-image-editor-button.resetFlip label, + .tie-crop-button .tui-image-editor-button.apply.active label, + .tie-crop-preset-button .tui-image-editor-button.preset.active label, + .tie-shape-button.rect .tui-image-editor-button.rect label, + .tie-shape-button.circle .tui-image-editor-button.circle label, + .tie-shape-button.triangle .tui-image-editor-button.triangle label, + .tie-text-effect-button .tui-image-editor-button.active label, + .tie-text-align-button.left .tui-image-editor-button.left label, + .tie-text-align-button.center .tui-image-editor-button.center label, + .tie-text-align-button.right .tui-image-editor-button.right label, + .tie-mask-apply.apply.active .tui-image-editor-button.apply label, .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover > label, .tui-image-editor-container .tui-image-editor-checkbox input + label { ${subMenuLabelActive} diff --git a/src/js/ui/template/submenu/crop.js b/src/js/ui/template/submenu/crop.js index 6b94cd306..ed6d1a23f 100644 --- a/src/js/ui/template/submenu/crop.js +++ b/src/js/ui/template/submenu/crop.js @@ -6,7 +6,7 @@ */ export default ({locale, iconStyle: {normal, active}}) => (`