Fix/multi instance behavior

examples/example01-includeUi.html

@@ -24,7 +24,6 @@
  <script type="text/javascript" src="./js/theme/white-theme.js"></script>
  <script type="text/javascript" src="./js/theme/black-theme.js"></script>
  <script>
-
  // Image editor
  var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
  includeUI: {
@@ -40,7 +39,6 @@
  cssMaxHeight: 500,
  usageStatistics: false
  });
-
  window.onresize = function() {
  imageEditor.ui.resizeEditor();
  }

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%;

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;
+ display:none;

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;
+ display: block;

src/css/gridtable.styl

@@ -41,4 +41,4 @@
  left: -5px;
  td.dot.right-bottom:before
  bottom: -5px;
- right: -5px;
+ right: -5px;

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;
+ z-index: 3;

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,

src/js/action.js

@@ -333,6 +333,7 @@ export default {
  this.stopDrawingMode();
  this.ui.changeMenu('crop');
  },
+ /* eslint-disable */
  preset: presetType => {
  switch (presetType) {
  case 'preset-square':

src/js/ui.js

@@ -66,11 +66,11 @@ class Ui {
  this._initMenuEvent = false;
 
  this._els = {
- 'undo': this._menuElement.querySelector('#tie-btn-undo'),
- 'redo': this._menuElement.querySelector('#tie-btn-redo'),
- 'reset': this._menuElement.querySelector('#tie-btn-reset'),
- 'delete': this._menuElement.querySelector('#tie-btn-delete'),
- 'deleteAll': this._menuElement.querySelector('#tie-btn-delete-all'),
+ 'undo': this._menuElement.querySelector('.tie-btn-undo'),
+ 'redo': this._menuElement.querySelector('.tie-btn-redo'),
+ 'reset': this._menuElement.querySelector('.tie-btn-reset'),
+ 'delete': this._menuElement.querySelector('.tie-btn-delete'),
+ 'deleteAll': this._menuElement.querySelector('.tie-btn-delete-all'),
  'download': this._selectedElement.querySelectorAll('.tui-image-editor-download-btn'),
  'load': this._selectedElement.querySelectorAll('.tui-image-editor-load-btn')
  };

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');

src/js/ui/draw.js

@@ -23,12 +23,12 @@ 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
+ this.selector('.tie-draw-color'), '#00a9ff', this.toggleDirection, this.usageStatistics
  ),
- drawRange: new Range(this.selector('#tie-draw-range'), defaultDrawRangeValus),
- drawRangeValue: this.selector('#tie-draw-range-value')
+ drawRange: new Range(this.selector('.tie-draw-range'), defaultDrawRangeValus),
+ drawRangeValue: this.selector('.tie-draw-range-value')
  };
 
  this.type = null;

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;
 
@@ -176,36 +176,35 @@ class Filter extends Submenu {
  * @private
  */
  _makeControlElement() {
- const {selector} = this;
  this._els = {
  removewhiteDistanceRange: new Range(
- selector('#tie-removewhite-distance-range'),
+ this.selector('.tie-removewhite-distance-range'),
  FILTER_RANGE.removewhiteDistanceRange
  ),
  brightnessRange: new Range(
- selector('#tie-brightness-range'),
+ this.selector('.tie-brightness-range'),
  FILTER_RANGE.brightnessRange
  ),
  noiseRange: new Range(
- selector('#tie-noise-range'),
+ this.selector('.tie-noise-range'),
  FILTER_RANGE.noiseRange
  ),
  pixelateRange: new Range(
- selector('#tie-pixelate-range'),
+ this.selector('.tie-pixelate-range'),
  FILTER_RANGE.pixelateRange
  ),
  colorfilterThresholeRange: new Range(
- selector('#tie-colorfilter-threshole-range'),
+ this.selector('.tie-colorfilter-threshole-range'),
  FILTER_RANGE.colorfilterThresholeRange
  ),
  filterTintColor: new Colorpicker(
- selector('#tie-filter-tint-color'), '#03bd9e', this.toggleDirection, this.usageStatistics
+ this.selector('.tie-filter-tint-color'), '#03bd9e', this.toggleDirection, this.usageStatistics
  ),
  filterMultiplyColor: new Colorpicker(
- selector('#tie-filter-multiply-color'), '#515ce6', this.toggleDirection, this.usageStatistics
+ this.selector('.tie-filter-multiply-color'), '#515ce6', this.toggleDirection, this.usageStatistics
  ),
  filterBlendColor: new Colorpicker(
- selector('#tie-filter-blend-color'), '#ffbb3b', this.toggleDirection, this.usageStatistics
+ this.selector('.tie-filter-blend-color'), '#ffbb3b', this.toggleDirection, this.usageStatistics
  )
  };
 

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')
  };
  }
 

src/js/ui/icon.js

@@ -25,10 +25,10 @@ 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
+ this.selector('.tie-icon-color'), '#ffbb3b', this.toggleDirection, this.usageStatistics
  )
  };
  }

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')
  };
  }
 

src/js/ui/rotate.js

@@ -25,9 +25,9 @@ class Rotate extends Submenu {
  this._value = 0;
 
  this._els = {
- rotateButton: this.selector('#tie-retate-button'),
- rotateRange: new Range(this.selector('#tie-rotate-range'), defaultRotateRangeValus),
- rotateRangeValue: this.selector('#tie-ratate-range-value')
+ rotateButton: this.selector('.tie-retate-button'),
+ rotateRange: new Range(this.selector('.tie-rotate-range'), defaultRotateRangeValus),
+ rotateRangeValue: this.selector('.tie-ratate-range-value')
  };
  }
 

src/js/ui/shape.js

@@ -30,15 +30,15 @@ class Shape extends Submenu {
  this.options = SHAPE_DEFAULT_OPTION;
 
  this._els = {
- 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'),
+ 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'),
  fillColorpicker: new Colorpicker(
- this.selector('#tie-color-fill'), '', this.toggleDirection, this.usageStatistics
+ this.selector('.tie-color-fill'), '', this.toggleDirection, this.usageStatistics
  ),
  strokeColorpicker: new Colorpicker(
- this.selector('#tie-color-stroke'), '#ffbb3b', this.toggleDirection, this.usageStatistics
+ this.selector('.tie-color-stroke'), '#ffbb3b', this.toggleDirection, this.usageStatistics
  )
  };