init the awkward code

static/html/photon/app/css/service-basic.css

@@ -0,0 +1,128 @@
+.border {
+  border: 1px solid black;
+}
+.body-container {
+  width: 1000px;
+}
+.tui-image-editor-controls {
+  min-height: 250px;
+}
+.menu {
+  padding: 0;
+  margin-bottom: 5px;
+  text-align: center;
+  color: #544b61;
+  font-weight: 400;
+  list-style-type: none;
+  user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+}
+.logo {
+  margin: 0 auto;
+  width: 300px;
+  vertical-align: middle;
+}
+.header .name {
+  padding: 10px;
+  line-height: 50px;
+  font-size: 30px;
+  font-weight: 100;
+  vertical-align: middle;
+}
+.header .menu {
+  display: inline-block;
+}
+.menu-item {
+  padding: 10px;
+  display: inline-block;
+  cursor: pointer;
+  vertical-align: middle;
+}
+.menu-item a {
+  text-decoration: none;
+}
+.menu-item.no-pointer {
+  cursor: default;
+}
+.menu-item.active,
+.menu-item:hover {
+  background-color: #f3f3f3;
+}
+.menu-item.disabled {
+  cursor: default;
+  color: #bfbebe;
+}
+.align-left-top {
+  text-align: left;
+  vertical-align: top;
+}
+.range-narrow {
+  width: 80px;
+}
+.sub-menu-container {
+  font-size: 14px;
+  margin-bottom: 1em;
+  display: none;
+}
+.tui-image-editor {
+  height: 500px;
+}
+.tui-image-editor-canvas-container {
+  margin: 0 auto;
+  top: 50%;
+  transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -webkit-transform: translateY(-50%);
+  border: 1px dashed black;
+  overflow: hidden;
+}
+.tui-colorpicker-container {
+  margin: 5px auto 0;
+}
+.tui-colorpicker-palette-toggle-slider {
+  display: none;
+}
+.input-wrapper {
+  position: relative;
+}
+.input-wrapper input {
+  cursor: pointer;
+  position: absolute;
+  font-size: 999px;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.btn-text-style {
+  padding: 5px;
+  margin: 3px 1px;
+  border: 1px dashed #bfbebe;
+  outline: 0;
+  background-color: #eee;
+  cursor: pointer;
+}
+.icon-text {
+  font-size: 20px;
+}
+.select-line-type {
+  outline: 0;
+  vertical-align: middle;
+}
+#tui-color-picker {
+  display: inline-block;
+  vertical-align: middle;
+}
+#tui-text-palette {
+  display: none;
+  position: absolute;
+  padding: 10px;
+  border: 1px solid #bfbebe;
+  background-color: #fff;
+  z-index: 9999;
+}

static/html/photon/app/css/service-mobile.css

@@ -0,0 +1,203 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: hidden;
+  background-color: #383838;
+  font-family: Sans-Serif;
+}
+ul,
+li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+input[type='button'],
+button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-color: #fff;
+}
+input[type='file'] {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  opacity: 0;
+  filter: alpha(opacity=0);
+}
+.header {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  background-color: #fff;
+  text-align: center;
+  z-index: 9999;
+}
+.header .logo {
+  margin: 10px 5px;
+  width: 180px;
+  vertical-align: middle;
+}
+.header .name {
+  font-size: 16px;
+  font-weight: bold;
+}
+.header .menu {
+  padding: 10px;
+  background-color: #000;
+}
+.header .menu input {
+  opacity: 0;
+}
+.header .menu img {
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+}
+.header .button {
+  position: relative;
+  display: inline-block;
+  margin: 0 5px;
+  padding: 0;
+  border-radius: 5px 5px;
+  width: 30px;
+  height: 30px;
+  border: 0;
+  background-color: #fff;
+  vertical-align: middle;
+}
+.header .button.disabled img {
+  opacity: 0.5;
+}
+.tui-image-editor {
+  height: 100%;
+}
+.tui-image-editor-canvas-container {
+  margin: 0 auto;
+  top: 50%;
+  transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -webkit-transform: translateY(-50%);
+  overflow: hidden;
+}
+.tui-image-editor-controls {
+  position: fixed;
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  background-color: #fff;
+}
+.tui-image-editor-controls .scrollable {
+  display: inline-block;
+  overflow-x: auto;
+  width: 100%;
+  height: 100%;
+  white-space: nowrap;
+  font-size: 0;
+  background-color: #000;
+  vertical-align: middle;
+}
+.tui-image-editor-controls .no-scrollable {
+  overflow-x: hidden;
+}
+.tui-image-editor-controls .menu-item {
+  display: inline-block;
+  height: 80px;
+  border-right: 1px solid #383838;
+  background-color: #ddd;
+  vertical-align: middle;
+}
+.tui-image-editor-controls .menu-button {
+  width: 80px;
+  height: 80px;
+  border: none;
+  vertical-align: middle;
+  background-color: #000;
+  color: #fff;
+  font-size: 12px;
+  font-weight: bold;
+  outline: 0;
+}
+.tui-image-editor-controls .submenu-button {
+  width: 80px;
+  height: 80px;
+  border: none;
+  background-color: #ddd;
+  vertical-align: middle;
+}
+.tui-image-editor-controls .hiddenmenu-button {
+  margin: 0 10px;
+  padding: 5px;
+  border: none;
+  color: #fff;
+  background-color: rgba(255, 255, 255, 0);
+}
+.tui-image-editor-controls .submenu {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  font-size: 0;
+}
+.tui-image-editor-controls .submenu.show {
+  display: block;
+}
+.tui-image-editor-controls .submenu .menu-item:last-child {
+  margin-right: 50px;
+}
+.tui-image-editor-controls .hiddenmenu {
+  position: absolute;
+  display: none;
+  padding: 40px;
+  width: 100%;
+  left: 0;
+  bottom: 80px;
+  background-color: rgba(0, 0, 0, 0.7);
+  text-align: center;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  z-index: 9999;
+}
+.tui-image-editor-controls .hiddenmenu.show {
+  display: block;
+}
+.tui-image-editor-controls .hiddenmenu .top {
+  font-size: 12px;
+  color: #fff;
+  margin-bottom: 20px;
+}
+.tui-image-editor-controls .btn-prev {
+  display: inline-block;
+  width: 30px;
+  height: 80px;
+  background-color: #000;
+  color: #fff;
+  border: none;
+  vertical-align: middle;
+}
+.tui-image-editor-controls .tui-colorpicker-container {
+  display: inline-block;
+}
+.tui-image-editor-controls .msg {
+  position: absolute;
+  margin-left: 50%;
+  padding: 5px 10px;
+  left: -86px;
+  top: -50px;
+  border-radius: 5px 5px;
+  background-color: rgba(255, 255, 255, 0.5);
+  font-size: 12px;
+}
+.tui-image-editor-controls .msg.hide {
+  display: none;
+}

static/html/photon/app/css/tui-example-style.css

@@ -0,0 +1,21 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+.code-description {
+  padding: 22px 52px;
+  background-color: rgba(81, 92, 230, 0.1);
+  line-height: 1.4em;
+}
+
+.code-description,
+.code-description a {
+  font-family: Arial;
+  font-size: 14px;
+  color: #515ce6;
+}
+
+.code-html {
+  padding: 20px 52px;
+}

static/html/photon/app/index.html

@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>0. Design</title>
+    <link
+      type="text/css"
+      href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css"
+      rel="stylesheet"
+    />
+    <link type="text/css" href="../dist/tui-image-editor.css" rel="stylesheet" />
+    <style>
+      @import url(https://fonts.googleapis.com/css?family=Noto+Sans);
+      html,
+      body {
+        height: 100%;
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="tui-image-editor-container"></div>
+    <script
+      type="text/javascript"
+      src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.4.0/fabric.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"
+    ></script>
+    <script type="text/javascript" src="../dist/tui-image-editor.js"></script>
+    <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: {
+          loadImage: {
+            path: 'img/sampleImage2.png',
+            name: 'SampleImage',
+          },
+          theme: blackTheme, // or whiteTheme,
+          initMenu: 'filter',
+          menuBarPosition: 'bottom',
+        },
+        cssMaxWidth: 700,
+        cssMaxHeight: 500,
+        usageStatistics: false,
+      });
+      window.onresize = function () {
+        imageEditor.ui.resizeEditor();
+      };
+    </script>
+
+
+    
+
+    <script>
+      var load_file_func = () => {
+        console.log('load_file_func');
+      }
+
+      var save_file_func = () => {
+        console.log('save_file_func');
+      }
+
+      var save_file_as_func = () => {
+        console.log('save_file_as_func');
+      }
+
+      var about_func = () => {
+        console.log('about_func')
+      }
+
+      function setup_ui(){
+        document.querySelector('.tui-image-editor-header-buttons').remove();
+        document.querySelector('.tui-image-editor-header-logo').remove();
+        
+        let open_btn = document.createElement('div');
+        open_btn.style.position = 'absolute';
+        open_btn.style.top = '13px';
+        open_btn.style.left = '10px';
+        open_btn.style.width = '70px';
+        open_btn.style.height = '30px';
+        open_btn.style.zIndex = 99999;
+        open_btn.innerHTML = `
+        <button 
+          onclick="load_file_func()"
+          style="width:70px;height:30px;border-radius:5px;background-color: #3b82f6;outline: none;color:#f1f5f9;border:none;">
+          Open
+        </button>
+        `;
+        document.body.append(open_btn);
+
+        let right_btns = document.createElement('div');
+        right_btns.style.position = 'absolute';
+        right_btns.style.top = '13px';
+        right_btns.style.right = '10px';
+        right_btns.style.width = '150px';
+        right_btns.style.height = '30px';
+        right_btns.style.display = 'flex';
+        right_btns.style.justifyContent = 'space-between';
+        right_btns.style.zIndex = 99999;
+        right_btns.innerHTML = `
+        <button 
+          onclick="save_file_func()"
+          style="width:70px;height:30px;border-radius:5px;background-color: #3b82f6;outline: none;color:#f1f5f9;border:none;">
+          Save
+        </button>
+        <button 
+          onclick="save_file_as_func()"
+          style="width:70px;height:30px;border-radius:5px;background-color: #3b82f6;outline: none;color:#f1f5f9;border:none;">
+          Save As
+        </button>
+        `;
+        document.body.append(right_btns);
+
+        let about_btn = document.createElement('div');
+        about_btn.style.position = 'absolute';
+        about_btn.style.bottom = '15px';
+        about_btn.style.right = '10px';
+        about_btn.style.width = '70px';
+        about_btn.style.height = '30px';
+        about_btn.style.zIndex = 99999;
+        about_btn.innerHTML = `
+        <button 
+          onclick="about_func()"
+          style="width:70px;height:30px;border-radius:5px;background-color:transparent;outline: none;color:#e2e8f0;border:solid 1px #f1f5f9;">
+          About
+        </button>
+        `;
+        document.body.append(about_btn);
+      }
+    </script>
+  </body>
+</html>

static/html/photon/app/js/service-basic.js

@@ -0,0 +1,922 @@
+/* eslint-disable vars-on-top,no-var,strict,prefer-template,prefer-arrow-callback,prefer-destructuring,object-shorthand,require-jsdoc,complexity,prefer-const,no-unused-vars */
+var PIXELATE_FILTER_DEFAULT_VALUE = 20;
+var supportingFileAPI = !!(window.File && window.FileList && window.FileReader);
+var rImageType = /data:(image\/.+);base64,/;
+var shapeOptions = {};
+var shapeType;
+var activeObjectId;
+
+// Buttons
+var $btns = $('.menu-item');
+var $btnsActivatable = $btns.filter('.activatable');
+var $inputImage = $('#input-image-file');
+var $btnDownload = $('#btn-download');
+
+var $btnUndo = $('#btn-undo');
+var $btnRedo = $('#btn-redo');
+var $btnClearObjects = $('#btn-clear-objects');
+var $btnRemoveActiveObject = $('#btn-remove-active-object');
+var $btnCrop = $('#btn-crop');
+var $btnFlip = $('#btn-flip');
+var $btnRotation = $('#btn-rotation');
+var $btnDrawLine = $('#btn-draw-line');
+var $btnDrawShape = $('#btn-draw-shape');
+var $btnApplyCrop = $('#btn-apply-crop');
+var $btnCancelCrop = $('#btn-cancel-crop');
+var $btnFlipX = $('#btn-flip-x');
+var $btnFlipY = $('#btn-flip-y');
+var $btnResetFlip = $('#btn-reset-flip');
+var $btnRotateClockwise = $('#btn-rotate-clockwise');
+var $btnRotateCounterClockWise = $('#btn-rotate-counter-clockwise');
+var $btnText = $('#btn-text');
+var $btnTextStyle = $('.btn-text-style');
+var $btnAddIcon = $('#btn-add-icon');
+var $btnRegisterIcon = $('#btn-register-icon');
+var $btnMaskFilter = $('#btn-mask-filter');
+var $btnImageFilter = $('#btn-image-filter');
+var $btnLoadMaskImage = $('#input-mask-image-file');
+var $btnApplyMask = $('#btn-apply-mask');
+var $btnClose = $('.close');
+
+// Input etc.
+var $inputRotationRange = $('#input-rotation-range');
+var $inputBrushWidthRange = $('#input-brush-width-range');
+var $inputFontSizeRange = $('#input-font-size-range');
+var $inputStrokeWidthRange = $('#input-stroke-width-range');
+var $inputCheckTransparent = $('#input-check-transparent');
+var $inputCheckFilter = $('#input-check-filter');
+var $inputCheckGrayscale = $('#input-check-grayscale');
+var $inputCheckInvert = $('#input-check-invert');
+var $inputCheckSepia = $('#input-check-sepia');
+var $inputCheckSepia2 = $('#input-check-sepia2');
+var $inputCheckBlur = $('#input-check-blur');
+var $inputCheckSharpen = $('#input-check-sharpen');
+var $inputCheckEmboss = $('#input-check-emboss');
+var $inputCheckRemoveWhite = $('#input-check-remove-white');
+var $inputRangeRemoveWhiteThreshold = $('#input-range-remove-white-threshold');
+var $inputRangeRemoveWhiteDistance = $('#input-range-remove-white-distance');
+var $inputCheckBrightness = $('#input-check-brightness');
+var $inputRangeBrightnessValue = $('#input-range-brightness-value');
+var $inputCheckNoise = $('#input-check-noise');
+var $inputRangeNoiseValue = $('#input-range-noise-value');
+var $inputCheckPixelate = $('#input-check-pixelate');
+var $inputRangePixelateValue = $('#input-range-pixelate-value');
+var $inputCheckTint = $('#input-check-tint');
+var $inputRangeTintOpacityValue = $('#input-range-tint-opacity-value');
+var $inputCheckMultiply = $('#input-check-multiply');
+var $inputCheckBlend = $('#input-check-blend');
+var $inputCheckColorFilter = $('#input-check-color-filter');
+var $inputRangeColorFilterValue = $('#input-range-color-filter-value');
+
+// Sub menus
+var $displayingSubMenu = $();
+var $cropSubMenu = $('#crop-sub-menu');
+var $flipSubMenu = $('#flip-sub-menu');
+var $rotationSubMenu = $('#rotation-sub-menu');
+var $freeDrawingSubMenu = $('#free-drawing-sub-menu');
+var $drawLineSubMenu = $('#draw-line-sub-menu');
+var $drawShapeSubMenu = $('#draw-shape-sub-menu');
+var $textSubMenu = $('#text-sub-menu');
+var $iconSubMenu = $('#icon-sub-menu');
+var $filterSubMenu = $('#filter-sub-menu');
+var $imageFilterSubMenu = $('#image-filter-sub-menu');
+
+// Select line type
+var $selectLine = $('[name="select-line-type"]');
+
+// Select shape type
+var $selectShapeType = $('[name="select-shape-type"]');
+
+// Select color of shape type
+var $selectColorType = $('[name="select-color-type"]');
+
+// Select blend type
+var $selectBlendType = $('[name="select-blend-type"]');
+
+// Image editor
+var imageEditor = new tui.ImageEditor('.tui-image-editor', {
+  cssMaxWidth: 700,
+  cssMaxHeight: 500,
+  selectionStyle: {
+    cornerSize: 20,
+    rotatingPointOffset: 70,
+  },
+});
+
+// Color picker for free drawing
+var brushColorpicker = tui.colorPicker.create({
+  container: $('#tui-brush-color-picker')[0],
+  color: '#000000',
+});
+
+// Color picker for text palette
+var textColorpicker = tui.colorPicker.create({
+  container: $('#tui-text-color-picker')[0],
+  color: '#000000',
+});
+
+// Color picker for shape
+var shapeColorpicker = tui.colorPicker.create({
+  container: $('#tui-shape-color-picker')[0],
+  color: '#000000',
+});
+
+// Color picker for icon
+var iconColorpicker = tui.colorPicker.create({
+  container: $('#tui-icon-color-picker')[0],
+  color: '#000000',
+});
+
+var tintColorpicker = tui.colorPicker.create({
+  container: $('#tui-tint-color-picker')[0],
+  color: '#000000',
+});
+
+var multiplyColorpicker = tui.colorPicker.create({
+  container: $('#tui-multiply-color-picker')[0],
+  color: '#000000',
+});
+
+var blendColorpicker = tui.colorPicker.create({
+  container: $('#tui-blend-color-picker')[0],
+  color: '#00FF00',
+});
+
+// Common global functions
+// HEX to RGBA
+function hexToRGBa(hex, alpha) {
+  var r = parseInt(hex.slice(1, 3), 16);
+  var g = parseInt(hex.slice(3, 5), 16);
+  var b = parseInt(hex.slice(5, 7), 16);
+  var a = alpha || 1;
+
+  return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
+}
+
+function base64ToBlob(data) {
+  var mimeString = '';
+  var raw, uInt8Array, i, rawLength;
+
+  raw = data.replace(rImageType, function (header, imageType) {
+    mimeString = imageType;
+
+    return '';
+  });
+
+  raw = atob(raw);
+  rawLength = raw.length;
+  uInt8Array = new Uint8Array(rawLength); // eslint-disable-line
+
+  for (i = 0; i < rawLength; i += 1) {
+    uInt8Array[i] = raw.charCodeAt(i);
+  }
+
+  return new Blob([uInt8Array], { type: mimeString });
+}
+
+function resizeEditor() {
+  var $editor = $('.tui-image-editor');
+  var $container = $('.tui-image-editor-canvas-container');
+  var height = parseFloat($container.css('max-height'));
+
+  $editor.height(height);
+}
+
+function getBrushSettings() {
+  var brushWidth = parseInt($inputBrushWidthRange.val(), 10);
+  var brushColor = brushColorpicker.getColor();
+
+  return {
+    width: brushWidth,
+    color: hexToRGBa(brushColor, 0.5),
+  };
+}
+
+function activateShapeMode() {
+  if (imageEditor.getDrawingMode() !== 'SHAPE') {
+    imageEditor.stopDrawingMode();
+    imageEditor.startDrawingMode('SHAPE');
+  }
+}
+
+function activateIconMode() {
+  imageEditor.stopDrawingMode();
+}
+
+function activateTextMode() {
+  if (imageEditor.getDrawingMode() !== 'TEXT') {
+    imageEditor.stopDrawingMode();
+    imageEditor.startDrawingMode('TEXT');
+  }
+}
+
+function setTextToolbar(obj) {
+  var fontSize = obj.fontSize;
+  var fontColor = obj.fill;
+
+  $inputFontSizeRange.val(fontSize);
+  textColorpicker.setColor(fontColor);
+}
+
+function setIconToolbar(obj) {
+  var iconColor = obj.fill;
+
+  iconColorpicker.setColor(iconColor);
+}
+
+function setShapeToolbar(obj) {
+  var fillColor, isTransparent, isFilter;
+  var colorType = $selectColorType.val();
+  var changeValue = colorType === 'stroke' ? obj.stroke : obj.fill.type;
+  isTransparent = changeValue === 'transparent';
+  isFilter = changeValue === 'filter';
+
+  if (colorType === 'stroke') {
+    if (!isTransparent && !isFilter) {
+      shapeColorpicker.setColor(changeValue);
+    }
+  } else if (colorType === 'fill') {
+    if (!isTransparent && !isFilter) {
+      fillColor = obj.fill.color;
+      shapeColorpicker.setColor(fillColor);
+    }
+  }
+
+  $inputCheckTransparent.prop('checked', isTransparent);
+  $inputCheckFilter.prop('checked', isFilter);
+  $inputStrokeWidthRange.val(obj.strokeWidth);
+}
+
+function showSubMenu(type) {
+  var $submenu;
+
+  switch (type) {
+    case 'shape':
+      $submenu = $drawShapeSubMenu;
+      break;
+    case 'icon':
+      $submenu = $iconSubMenu;
+      break;
+    case 'text':
+      $submenu = $textSubMenu;
+      break;
+    default:
+      $submenu = 0;
+  }
+
+  $displayingSubMenu.hide();
+  $displayingSubMenu = $submenu.show();
+}
+
+function applyOrRemoveFilter(applying, type, options) {
+  if (applying) {
+    imageEditor.applyFilter(type, options).then(function (result) {
+      console.log(result);
+    });
+  } else {
+    imageEditor.removeFilter(type);
+  }
+}
+
+// Attach image editor custom events
+imageEditor.on({
+  objectAdded: function (objectProps) {
+    console.info(objectProps);
+  },
+  undoStackChanged: function (length) {
+    if (length) {
+      $btnUndo.removeClass('disabled');
+    } else {
+      $btnUndo.addClass('disabled');
+    }
+    resizeEditor();
+  },
+  redoStackChanged: function (length) {
+    if (length) {
+      $btnRedo.removeClass('disabled');
+    } else {
+      $btnRedo.addClass('disabled');
+    }
+    resizeEditor();
+  },
+  objectScaled: function (obj) {
+    if (obj.type === 'text') {
+      $inputFontSizeRange.val(obj.fontSize);
+    }
+  },
+  addText: function (pos) {
+    imageEditor
+      .addText('Double Click', {
+        position: pos.originPosition,
+      })
+      .then(function (objectProps) {
+        console.log(objectProps);
+      });
+  },
+  objectActivated: function (obj) {
+    activeObjectId = obj.id;
+    if (obj.type === 'rect' || obj.type === 'circle' || obj.type === 'triangle') {
+      showSubMenu('shape');
+      setShapeToolbar(obj);
+      activateShapeMode();
+    } else if (obj.type === 'icon') {
+      showSubMenu('icon');
+      setIconToolbar(obj);
+      activateIconMode();
+    } else if (obj.type === 'text') {
+      showSubMenu('text');
+      setTextToolbar(obj);
+      activateTextMode();
+    }
+  },
+  mousedown: function (event, originPointer) {
+    if ($imageFilterSubMenu.is(':visible') && imageEditor.hasFilter('colorFilter')) {
+      imageEditor.applyFilter('colorFilter', {
+        x: parseInt(originPointer.x, 10),
+        y: parseInt(originPointer.y, 10),
+      });
+    }
+  },
+});
+
+// Attach button click event listeners
+$btns.on('click', function () {
+  $btnsActivatable.removeClass('active');
+});
+
+$btnsActivatable.on('click', function () {
+  $(this).addClass('active');
+});
+
+$btnUndo.on('click', function () {
+  $displayingSubMenu.hide();
+
+  if (!$(this).hasClass('disabled')) {
+    imageEditor.discardSelection();
+    imageEditor.undo();
+  }
+});
+
+$btnRedo.on('click', function () {
+  $displayingSubMenu.hide();
+
+  if (!$(this).hasClass('disabled')) {
+    imageEditor.discardSelection();
+    imageEditor.redo();
+  }
+});
+
+$btnClearObjects.on('click', function () {
+  $displayingSubMenu.hide();
+  imageEditor.clearObjects();
+});
+
+$btnRemoveActiveObject.on('click', function () {
+  $displayingSubMenu.hide();
+  imageEditor.removeObject(activeObjectId);
+});
+
+$btnCrop.on('click', function () {
+  imageEditor.startDrawingMode('CROPPER');
+  $displayingSubMenu.hide();
+  $displayingSubMenu = $cropSubMenu.show();
+});
+
+$btnFlip.on('click', function () {
+  imageEditor.stopDrawingMode();
+  $displayingSubMenu.hide();
+  $displayingSubMenu = $flipSubMenu.show();
+});
+
+$btnRotation.on('click', function () {
+  imageEditor.stopDrawingMode();
+  $displayingSubMenu.hide();
+  $displayingSubMenu = $rotationSubMenu.show();
+});
+
+$btnClose.on('click', function () {
+  imageEditor.stopDrawingMode();
+  $displayingSubMenu.hide();
+});
+
+$btnApplyCrop.on('click', function () {
+  imageEditor.crop(imageEditor.getCropzoneRect()).then(function () {
+    imageEditor.stopDrawingMode();
+    resizeEditor();
+  });
+});
+
+$btnCancelCrop.on('click', function () {
+  imageEditor.stopDrawingMode();
+});
+
+$btnFlipX.on('click', function () {
+  imageEditor.flipX().then(function (status) {
+    console.log('flipX: ', status.flipX);
+    console.log('flipY: ', status.flipY);
+    console.log('angle: ', status.angle);
+  });
+});
+
+$btnFlipY.on('click', function () {
+  imageEditor.flipY().then(function (status) {
+    console.log('flipX: ', status.flipX);
+    console.log('flipY: ', status.flipY);
+    console.log('angle: ', status.angle);
+  });
+});
+
+$btnResetFlip.on('click', function () {
+  imageEditor.resetFlip().then(function (status) {
+    console.log('flipX: ', status.flipX);
+    console.log('flipY: ', status.flipY);
+    console.log('angle: ', status.angle);
+  });
+});
+
+$btnRotateClockwise.on('click', function () {
+  imageEditor.rotate(30);
+});
+
+$btnRotateCounterClockWise.on('click', function () {
+  imageEditor.rotate(-30);
+});
+
+$inputRotationRange.on('mousedown', function () {
+  var changeAngle = function () {
+    imageEditor.setAngle(parseInt($inputRotationRange.val(), 10))['catch'](function () {});
+  };
+  $(document).on('mousemove', changeAngle);
+  $(document).on('mouseup', function stopChangingAngle() {
+    $(document).off('mousemove', changeAngle);
+    $(document).off('mouseup', stopChangingAngle);
+  });
+});
+
+$inputRotationRange.on('change', function () {
+  imageEditor.setAngle(parseInt($inputRotationRange.val(), 10))['catch'](function () {});
+});
+
+$inputBrushWidthRange.on('change', function () {
+  imageEditor.setBrush({ width: parseInt(this.value, 10) });
+});
+
+$inputImage.on('change', function (event) {
+  var file;
+
+  if (!supportingFileAPI) {
+    alert('This browser does not support file-api');
+  }
+
+  file = event.target.files[0];
+  imageEditor.loadImageFromFile(file).then(function (result) {
+    console.log(result);
+    imageEditor.clearUndoStack();
+  });
+});
+
+$btnDownload.on('click', function () {
+  var imageName = imageEditor.getImageName();
+  var dataURL = imageEditor.toDataURL();
+  var blob, type, w;
+
+  if (supportingFileAPI) {
+    blob = base64ToBlob(dataURL);
+    type = blob.type.split('/')[1];
+    if (imageName.split('.').pop() !== type) {
+      imageName += '.' + type;
+    }
+
+    // Library: FileSaver - saveAs
+    saveAs(blob, imageName); // eslint-disable-line
+  } else {
+    alert('This browser needs a file-server');
+    w = window.open();
+    w.document.body.innerHTML = '<img src="' + dataURL + '">';
+  }
+});
+
+// control draw line mode
+$btnDrawLine.on('click', function () {
+  imageEditor.stopDrawingMode();
+  $displayingSubMenu.hide();
+  $displayingSubMenu = $drawLineSubMenu.show();
+  $selectLine.eq(0).change();
+});
+
+$selectLine.on('change', function () {
+  var mode = $(this).val();
+  var settings = getBrushSettings();
+
+  imageEditor.stopDrawingMode();
+  if (mode === 'freeDrawing') {
+    imageEditor.startDrawingMode('FREE_DRAWING', settings);
+  } else {
+    imageEditor.startDrawingMode('LINE_DRAWING', settings);
+  }
+});
+
+brushColorpicker.on('selectColor', function (event) {
+  imageEditor.setBrush({
+    color: hexToRGBa(event.color, 0.5),
+  });
+});
+
+// control draw shape mode
+$btnDrawShape.on('click', function () {
+  showSubMenu('shape');
+
+  // step 1. get options to draw shape from toolbar
+  shapeType = $('[name="select-shape-type"]:checked').val();
+
+  shapeOptions.stroke = '#000000';
+  shapeOptions.fill = '#ffffff';
+
+  shapeOptions.strokeWidth = Number($inputStrokeWidthRange.val());
+
+  // step 2. set options to draw shape
+  imageEditor.setDrawingShape(shapeType, shapeOptions);
+
+  // step 3. start drawing shape mode
+  activateShapeMode();
+});
+
+$selectShapeType.on('change', function () {
+  shapeType = $(this).val();
+
+  imageEditor.setDrawingShape(shapeType);
+});
+$selectColorType.on('change', function () {
+  var colorType = $(this).val();
+  if (colorType === 'stroke') {
+    $inputCheckFilter.prop('disabled', true);
+    $inputCheckFilter.prop('checked', false);
+  } else {
+    $inputCheckTransparent.prop('disabled', false);
+    $inputCheckFilter.prop('disabled', false);
+  }
+});
+
+$inputCheckTransparent.on('change', onChangeShapeFill);
+$inputCheckFilter.on('change', onChangeShapeFill);
+shapeColorpicker.on('selectColor', function (event) {
+  $inputCheckTransparent.prop('checked', false);
+  $inputCheckFilter.prop('checked', false);
+  onChangeShapeFill(event);
+});
+
+function onChangeShapeFill(event) {
+  var colorType = $selectColorType.val();
+  var isTransparent = $inputCheckTransparent.prop('checked');
+  var isFilter = $inputCheckFilter.prop('checked');
+  var shapeOption;
+
+  if (event.color) {
+    shapeOption = event.color;
+  } else if (isTransparent) {
+    shapeOption = 'transparent';
+  } else if (isFilter) {
+    shapeOption = {
+      type: 'filter',
+      filter: [{ pixelate: PIXELATE_FILTER_DEFAULT_VALUE }],
+    };
+  }
+
+  if (colorType === 'stroke') {
+    imageEditor.changeShape(activeObjectId, {
+      stroke: shapeOption,
+    });
+  } else if (colorType === 'fill') {
+    imageEditor.changeShape(activeObjectId, {
+      fill: shapeOption,
+    });
+  }
+
+  imageEditor.setDrawingShape(shapeType, shapeOptions);
+}
+
+$inputStrokeWidthRange.on('change', function () {
+  var strokeWidth = Number($(this).val());
+
+  imageEditor.changeShape(activeObjectId, {
+    strokeWidth: strokeWidth,
+  });
+
+  imageEditor.setDrawingShape(shapeType, shapeOptions);
+});
+
+// control text mode
+$btnText.on('click', function () {
+  showSubMenu('text');
+  activateTextMode();
+});
+
+$inputFontSizeRange.on('change', function () {
+  imageEditor.changeTextStyle(activeObjectId, {
+    fontSize: parseInt(this.value, 10),
+  });
+});
+
+$btnTextStyle.on('click', function (e) {
+  // eslint-disable-line
+  var styleType = $(this).attr('data-style-type');
+  var styleObj;
+
+  e.stopPropagation();
+
+  switch (styleType) {
+    case 'b':
+      styleObj = { fontWeight: 'bold' };
+      break;
+    case 'i':
+      styleObj = { fontStyle: 'italic' };
+      break;
+    case 'u':
+      styleObj = { underline: true };
+      break;
+    case 'l':
+      styleObj = { textAlign: 'left' };
+      break;
+    case 'c':
+      styleObj = { textAlign: 'center' };
+      break;
+    case 'r':
+      styleObj = { textAlign: 'right' };
+      break;
+    default:
+      styleObj = {};
+  }
+
+  imageEditor.changeTextStyle(activeObjectId, styleObj);
+});
+
+textColorpicker.on('selectColor', function (event) {
+  imageEditor.changeTextStyle(activeObjectId, {
+    fill: event.color,
+  });
+});
+
+// control icon
+$btnAddIcon.on('click', function () {
+  showSubMenu('icon');
+  activateIconMode();
+});
+
+function onClickIconSubMenu(event) {
+  var element = event.target || event.srcElement;
+  var iconType = $(element).attr('data-icon-type');
+
+  imageEditor.once('mousedown', function (e, originPointer) {
+    imageEditor
+      .addIcon(iconType, {
+        left: originPointer.x,
+        top: originPointer.y,
+      })
+      .then(function (objectProps) {
+        // console.log(objectProps);
+      });
+  });
+}
+
+$btnRegisterIcon.on('click', function () {
+  $iconSubMenu
+    .find('.menu-item')
+    .eq(3)
+    .after('<li id="customArrow" class="menu-item icon-text" data-icon-type="customArrow">↑</li>');
+
+  imageEditor.registerIcons({
+    customArrow: 'M 60 0 L 120 60 H 90 L 75 45 V 180 H 45 V 45 L 30 60 H 0 Z',
+  });
+
+  $btnRegisterIcon.off('click');
+
+  $iconSubMenu.on('click', '#customArrow', onClickIconSubMenu);
+});
+
+$iconSubMenu.on('click', '.icon-text', onClickIconSubMenu);
+
+iconColorpicker.on('selectColor', function (event) {
+  imageEditor.changeIconColor(activeObjectId, event.color);
+});
+
+// control mask filter
+$btnMaskFilter.on('click', function () {
+  imageEditor.stopDrawingMode();
+  $displayingSubMenu.hide();
+
+  $displayingSubMenu = $filterSubMenu.show();
+});
+
+$btnImageFilter.on('click', function () {
+  var filters = {
+    grayscale: $inputCheckGrayscale,
+    invert: $inputCheckInvert,
+    sepia: $inputCheckSepia,
+    sepia2: $inputCheckSepia2,
+    blur: $inputCheckBlur,
+    shapren: $inputCheckSharpen,
+    emboss: $inputCheckEmboss,
+    removeWhite: $inputCheckRemoveWhite,
+    brightness: $inputCheckBrightness,
+    noise: $inputCheckNoise,
+    pixelate: $inputCheckPixelate,
+    tint: $inputCheckTint,
+    multiply: $inputCheckMultiply,
+    blend: $inputCheckBlend,
+    colorFilter: $inputCheckColorFilter,
+  };
+
+  tui.util.forEach(filters, function ($value, key) {
+    $value.prop('checked', imageEditor.hasFilter(key));
+  });
+  $displayingSubMenu.hide();
+
+  $displayingSubMenu = $imageFilterSubMenu.show();
+});
+
+$btnLoadMaskImage.on('change', function () {
+  var file;
+  var imgUrl;
+
+  if (!supportingFileAPI) {
+    alert('This browser does not support file-api');
+  }
+
+  file = event.target.files[0];
+
+  if (file) {
+    imgUrl = URL.createObjectURL(file);
+
+    imageEditor.loadImageFromURL(imageEditor.toDataURL(), 'FilterImage').then(function () {
+      imageEditor.addImageObject(imgUrl).then(function (objectProps) {
+        URL.revokeObjectURL(file);
+        console.log(objectProps);
+      });
+    });
+  }
+});
+
+$btnApplyMask.on('click', function () {
+  imageEditor
+    .applyFilter('mask', {
+      maskObjId: activeObjectId,
+    })
+    .then(function (result) {
+      console.log(result);
+    });
+});
+
+$inputCheckGrayscale.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'Grayscale', null);
+});
+
+$inputCheckInvert.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'Invert', null);
+});
+
+$inputCheckSepia.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'Sepia', null);
+});
+
+$inputCheckSepia2.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'vintage', null);
+});
+
+$inputCheckBlur.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'Blur', { blur: 0.1 });
+});
+
+$inputCheckSharpen.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'Sharpen', null);
+});
+
+$inputCheckEmboss.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'Emboss', null);
+});
+
+$inputCheckRemoveWhite.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'removeColor', {
+    color: '#FFFFFF',
+    useAlpha: false,
+    distance: parseInt($inputRangeRemoveWhiteDistance.val(), 10) / 255,
+  });
+});
+
+$inputRangeRemoveWhiteDistance.on('change', function () {
+  applyOrRemoveFilter($inputCheckRemoveWhite.is(':checked'), 'removeColor', {
+    distance: parseInt(this.value, 10) / 255,
+  });
+});
+
+$inputCheckBrightness.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'brightness', {
+    brightness: parseInt($inputRangeBrightnessValue.val(), 10) / 255,
+  });
+});
+
+$inputRangeBrightnessValue.on('change', function () {
+  applyOrRemoveFilter($inputCheckBrightness.is(':checked'), 'brightness', {
+    brightness: parseInt(this.value, 10) / 255,
+  });
+});
+
+$inputCheckNoise.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'noise', {
+    noise: parseInt($inputRangeNoiseValue.val(), 10),
+  });
+});
+
+$inputRangeNoiseValue.on('change', function () {
+  applyOrRemoveFilter($inputCheckNoise.is(':checked'), 'noise', {
+    noise: parseInt(this.value, 10),
+  });
+});
+
+$inputCheckPixelate.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'pixelate', {
+    blocksize: parseInt($inputRangePixelateValue.val(), 10),
+  });
+});
+
+$inputRangePixelateValue.on('change', function () {
+  applyOrRemoveFilter($inputCheckPixelate.is(':checked'), 'pixelate', {
+    blocksize: parseInt(this.value, 10),
+  });
+});
+
+$inputCheckTint.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'blendColor', {
+    mode: 'tint',
+    color: tintColorpicker.getColor(),
+    alpha: parseFloat($inputRangeTintOpacityValue.val()),
+  });
+});
+
+tintColorpicker.on('selectColor', function (e) {
+  applyOrRemoveFilter($inputCheckTint.is(':checked'), 'blendColor', {
+    color: e.color,
+  });
+});
+
+$inputRangeTintOpacityValue.on('change', function () {
+  applyOrRemoveFilter($inputCheckTint.is(':checked'), 'blendColor', {
+    alpha: parseFloat($inputRangeTintOpacityValue.val()),
+  });
+});
+
+$inputCheckMultiply.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'blendColor', {
+    color: multiplyColorpicker.getColor(),
+  });
+});
+
+multiplyColorpicker.on('selectColor', function (e) {
+  applyOrRemoveFilter($inputCheckMultiply.is(':checked'), 'blendColor', {
+    color: e.color,
+  });
+});
+
+$inputCheckBlend.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'blendColor', {
+    mode: $selectBlendType.val(),
+    color: blendColorpicker.getColor(),
+  });
+});
+
+blendColorpicker.on('selectColor', function (e) {
+  applyOrRemoveFilter($inputCheckBlend.is(':checked'), 'blendColor', {
+    color: e.color,
+  });
+});
+
+$selectBlendType.on('change', function () {
+  applyOrRemoveFilter($inputCheckBlend.is(':checked'), 'blendColor', {
+    mode: this.value,
+  });
+});
+
+$inputCheckColorFilter.on('change', function () {
+  applyOrRemoveFilter(this.checked, 'removeColor', {
+    color: '#FFFFFF',
+    distance: $inputRangeColorFilterValue.val() / 255,
+  });
+});
+
+$inputRangeColorFilterValue.on('change', function () {
+  applyOrRemoveFilter($inputCheckColorFilter.is(':checked'), 'removeColor', {
+    distance: this.value / 255,
+  });
+});
+
+// Etc..
+
+// Load sample image
+imageEditor.loadImageFromURL('img/sampleImage.jpg', 'SampleImage').then(function (sizeValue) {
+  console.log(sizeValue);
+  imageEditor.clearUndoStack();
+});
+
+// IE9 Unselectable
+$('.menu').on('selectstart', function () {
+  return false;
+});

static/html/photon/app/js/service-mobile.js

@@ -0,0 +1,595 @@
+/* eslint-disable vars-on-top,no-var,strict,prefer-template,prefer-arrow-callback,prefer-destructuring,object-shorthand,require-jsdoc,complexity */
+'use strict';
+
+var MAX_RESOLUTION = 3264 * 2448; // 8MP (Mega Pixel)
+
+var supportingFileAPI = !!(window.File && window.FileList && window.FileReader);
+var rImageType = /data:(image\/.+);base64,/;
+var shapeOpt = {
+  fill: '#fff',
+  stroke: '#000',
+  strokeWidth: 10,
+};
+var activeObjectId;
+
+// Selector of image editor controls
+var submenuClass = '.submenu';
+var hiddenmenuClass = '.hiddenmenu';
+
+var $controls = $('.tui-image-editor-controls');
+var $menuButtons = $controls.find('.menu-button');
+var $submenuButtons = $controls.find('.submenu-button');
+var $btnShowMenu = $controls.find('.btn-prev');
+var $msg = $controls.find('.msg');
+
+var $subMenus = $controls.find(submenuClass);
+var $hiddenMenus = $controls.find(hiddenmenuClass);
+
+// Image editor controls - top menu buttons
+var $inputImage = $('#input-image-file');
+var $btnDownload = $('#btn-download');
+var $btnUndo = $('#btn-undo');
+var $btnRedo = $('#btn-redo');
+var $btnRemoveActiveObject = $('#btn-remove-active-object');
+
+// Image editor controls - bottom menu buttons
+var $btnCrop = $('#btn-crop');
+var $btnAddText = $('#btn-add-text');
+
+// Image editor controls - bottom submenu buttons
+var $btnApplyCrop = $('#btn-apply-crop');
+var $btnFlipX = $('#btn-flip-x');
+var $btnFlipY = $('#btn-flip-y');
+var $btnRotateClockwise = $('#btn-rotate-clockwise');
+var $btnRotateCounterClockWise = $('#btn-rotate-counter-clockwise');
+var $btnAddArrowIcon = $('#btn-add-arrow-icon');
+var $btnAddCancelIcon = $('#btn-add-cancel-icon');
+var $btnAddCustomIcon = $('#btn-add-custom-icon');
+var $btnFreeDrawing = $('#btn-free-drawing');
+var $btnLineDrawing = $('#btn-line-drawing');
+var $btnAddRect = $('#btn-add-rect');
+var $btnAddSquare = $('#btn-add-square');
+var $btnAddEllipse = $('#btn-add-ellipse');
+var $btnAddCircle = $('#btn-add-circle');
+var $btnAddTriangle = $('#btn-add-triangle');
+var $btnChangeTextStyle = $('.btn-change-text-style');
+
+// Image editor controls - etc.
+var $inputTextSizeRange = $('#input-text-size-range');
+var $inputBrushWidthRange = $('#input-brush-range');
+var $inputStrokeWidthRange = $('#input-stroke-range');
+var $inputCheckTransparent = $('#input-check-transparent');
+
+// Colorpicker
+var iconColorpicker = tui.colorPicker.create({
+  container: $('#tui-icon-color-picker')[0],
+  color: '#000000',
+});
+
+var textColorpicker = tui.colorPicker.create({
+  container: $('#tui-text-color-picker')[0],
+  color: '#000000',
+});
+
+var brushColorpicker = tui.colorPicker.create({
+  container: $('#tui-brush-color-picker')[0],
+  color: '#000000',
+});
+
+var shapeColorpicker = tui.colorPicker.create({
+  container: $('#tui-shape-color-picker')[0],
+  color: '#000000',
+});
+
+// Create image editor
+var imageEditor = new tui.ImageEditor('.tui-image-editor', {
+  cssMaxWidth: document.documentElement.clientWidth,
+  cssMaxHeight: document.documentElement.clientHeight,
+  selectionStyle: {
+    cornerSize: 50,
+    rotatingPointOffset: 100,
+  },
+});
+
+var $displayingSubMenu, $displayingHiddenMenu;
+
+function hexToRGBa(hex, alpha) {
+  var r = parseInt(hex.slice(1, 3), 16);
+  var g = parseInt(hex.slice(3, 5), 16);
+  var b = parseInt(hex.slice(5, 7), 16);
+  var a = alpha || 1;
+
+  return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')';
+}
+
+function base64ToBlob(data) {
+  var mimeString = '';
+  var raw, uInt8Array, i, rawLength;
+
+  raw = data.replace(rImageType, function (header, imageType) {
+    mimeString = imageType;
+
+    return '';
+  });
+
+  raw = atob(raw);
+  rawLength = raw.length;
+  uInt8Array = new Uint8Array(rawLength); // eslint-disable-line
+
+  for (i = 0; i < rawLength; i += 1) {
+    uInt8Array[i] = raw.charCodeAt(i);
+  }
+
+  return new Blob([uInt8Array], { type: mimeString });
+}
+
+function getBrushSettings() {
+  var brushWidth = $inputBrushWidthRange.val();
+  var brushColor = brushColorpicker.getColor();
+
+  return {
+    width: brushWidth,
+    color: hexToRGBa(brushColor, 0.5),
+  };
+}
+
+function activateShapeMode() {
+  imageEditor.stopDrawingMode();
+}
+
+function activateIconMode() {
+  imageEditor.stopDrawingMode();
+}
+
+function activateTextMode() {
+  if (imageEditor.getDrawingMode() !== 'TEXT') {
+    imageEditor.stopDrawingMode();
+    imageEditor.startDrawingMode('TEXT');
+  }
+}
+
+function setTextToolbar(obj) {
+  var fontSize = obj.fontSize;
+  var fontColor = obj.fill;
+
+  $inputTextSizeRange.val(fontSize);
+  textColorpicker.setColor(fontColor);
+}
+
+function setIconToolbar(obj) {
+  var iconColor = obj.fill;
+
+  iconColorpicker.setColor(iconColor);
+}
+
+function setShapeToolbar(obj) {
+  var strokeColor, fillColor, isTransparent;
+  var colorType = $('[name="select-color-type"]:checked').val();
+
+  if (colorType === 'stroke') {
+    strokeColor = obj.stroke;
+    isTransparent = strokeColor === 'transparent';
+
+    if (!isTransparent) {
+      shapeColorpicker.setColor(strokeColor);
+    }
+  } else if (colorType === 'fill') {
+    fillColor = obj.fill;
+    isTransparent = fillColor === 'transparent';
+
+    if (!isTransparent) {
+      shapeColorpicker.setColor(fillColor);
+    }
+  }
+
+  $inputCheckTransparent.prop('checked', isTransparent);
+  $inputStrokeWidthRange.val(obj.strokeWith);
+}
+
+function showSubMenu(type) {
+  var index;
+
+  switch (type) {
+    case 'shape':
+      index = 3;
+      break;
+    case 'icon':
+      index = 4;
+      break;
+    case 'text':
+      index = 5;
+      break;
+    default:
+      index = 0;
+  }
+
+  $displayingSubMenu.hide();
+  $displayingHiddenMenu.hide();
+
+  $displayingSubMenu = $menuButtons.eq(index).parent().find(submenuClass).show();
+}
+
+// Bind custom event of image editor
+imageEditor.on({
+  undoStackChanged: function (length) {
+    if (length) {
+      $btnUndo.removeClass('disabled');
+    } else {
+      $btnUndo.addClass('disabled');
+    }
+  },
+  redoStackChanged: function (length) {
+    if (length) {
+      $btnRedo.removeClass('disabled');
+    } else {
+      $btnRedo.addClass('disabled');
+    }
+  },
+  objectScaled: function (obj) {
+    if (obj.type === 'text') {
+      $inputTextSizeRange.val(obj.fontSize);
+    }
+  },
+  objectActivated: function (obj) {
+    activeObjectId = obj.id;
+    if (obj.type === 'rect' || obj.type === 'circle' || obj.type === 'triangle') {
+      showSubMenu('shape');
+      setShapeToolbar(obj);
+      activateShapeMode();
+    } else if (obj.type === 'icon') {
+      showSubMenu('icon');
+      setIconToolbar(obj);
+      activateIconMode();
+    } else if (obj.type === 'text') {
+      showSubMenu('text');
+      setTextToolbar(obj);
+      activateTextMode();
+    }
+  },
+});
+
+// Image editor controls action
+$menuButtons.on('click', function () {
+  $displayingSubMenu = $(this).parent().find(submenuClass).show();
+  $displayingHiddenMenu = $(this).parent().find(hiddenmenuClass);
+});
+
+$submenuButtons.on('click', function () {
+  $displayingHiddenMenu.hide();
+  $displayingHiddenMenu = $(this).parent().find(hiddenmenuClass).show();
+});
+
+$btnShowMenu.on('click', function () {
+  $displayingSubMenu.hide();
+  $displayingHiddenMenu.hide();
+  $msg.show();
+
+  imageEditor.stopDrawingMode();
+});
+
+// Image load action
+$inputImage.on('change', function (event) {
+  var file;
+  var img;
+  var resolution;
+
+  if (!supportingFileAPI) {
+    alert('This browser does not support file-api');
+  }
+
+  file = event.target.files[0];
+
+  if (file) {
+    img = new Image();
+
+    img.onload = function () {
+      resolution = this.width * this.height;
+
+      if (resolution <= MAX_RESOLUTION) {
+        imageEditor.loadImageFromFile(file).then(function () {
+          imageEditor.clearUndoStack();
+        });
+      } else {
+        alert("Loaded image's resolution is too large!\nRecommended resolution is 3264 * 2448!");
+      }
+
+      URL.revokeObjectURL(file);
+    };
+
+    img.src = URL.createObjectURL(file);
+  }
+});
+
+// Undo action
+$btnUndo.on('click', function () {
+  if (!$(this).hasClass('disabled')) {
+    imageEditor.undo();
+  }
+});
+
+// Redo action
+$btnRedo.on('click', function () {
+  if (!$(this).hasClass('disabled')) {
+    imageEditor.redo();
+  }
+});
+
+// Remove active object action
+$btnRemoveActiveObject.on('click', function () {
+  imageEditor.removeObject(activeObjectId);
+});
+
+// Download action
+$btnDownload.on('click', function () {
+  var imageName = imageEditor.getImageName();
+  var dataURL = imageEditor.toDataURL();
+  var blob, type, w;
+
+  if (supportingFileAPI) {
+    blob = base64ToBlob(dataURL);
+    type = blob.type.split('/')[1];
+    if (imageName.split('.').pop() !== type) {
+      imageName += '.' + type;
+    }
+
+    // Library: FileSaver - saveAs
+    saveAs(blob, imageName); // eslint-disable-line
+  } else {
+    alert('This browser needs a file-server');
+    w = window.open();
+    w.document.body.innerHTML = '<img src=' + dataURL + '>';
+  }
+});
+
+// Crop menu action
+$btnCrop.on('click', function () {
+  imageEditor.startDrawingMode('CROPPER');
+});
+
+$btnApplyCrop.on('click', function () {
+  imageEditor.crop(imageEditor.getCropzoneRect()).then(function () {
+    imageEditor.stopDrawingMode();
+    $subMenus.removeClass('show');
+    $hiddenMenus.removeClass('show');
+  });
+});
+
+// Orientation menu action
+$btnRotateClockwise.on('click', function () {
+  imageEditor.rotate(90);
+});
+
+$btnRotateCounterClockWise.on('click', function () {
+  imageEditor.rotate(-90);
+});
+
+$btnFlipX.on('click', function () {
+  imageEditor.flipX();
+});
+
+$btnFlipY.on('click', function () {
+  imageEditor.flipY();
+});
+
+// Icon menu action
+$btnAddArrowIcon.on('click', function () {
+  imageEditor.addIcon('arrow');
+});
+
+$btnAddCancelIcon.on('click', function () {
+  imageEditor.addIcon('cancel');
+});
+
+$btnAddCustomIcon.on('click', function () {
+  imageEditor.addIcon('customArrow');
+});
+
+iconColorpicker.on('selectColor', function (event) {
+  imageEditor.changeIconColor(activeObjectId, event.color);
+});
+
+// Text menu action
+$btnAddText.on('click', function () {
+  var initText = 'DoubleClick';
+
+  imageEditor.startDrawingMode('TEXT');
+  imageEditor.addText(initText, {
+    styles: {
+      fontSize: parseInt($inputTextSizeRange.val(), 10),
+    },
+  });
+});
+
+$btnChangeTextStyle.on('click', function () {
+  var styleType = $(this).attr('data-style-type');
+  var styleObj = {};
+  var styleObjKey;
+
+  switch (styleType) {
+    case 'bold':
+      styleObjKey = 'fontWeight';
+      break;
+    case 'italic':
+      styleObjKey = 'fontStyle';
+      break;
+    case 'underline':
+      styleObjKey = 'underline';
+      break;
+    case 'left':
+      styleObjKey = 'textAlign';
+      break;
+    case 'center':
+      styleObjKey = 'textAlign';
+      break;
+    case 'right':
+      styleObjKey = 'textAlign';
+      break;
+    default:
+      styleObjKey = '';
+  }
+
+  styleObj[styleObjKey] = styleType;
+
+  imageEditor.changeTextStyle(activeObjectId, styleObj);
+});
+
+$inputTextSizeRange.on('change', function () {
+  imageEditor.changeTextStyle(activeObjectId, {
+    fontSize: parseInt($(this).val(), 10),
+  });
+});
+
+textColorpicker.on('selectColor', function (event) {
+  imageEditor.changeTextStyle(activeObjectId, {
+    fill: event.color,
+  });
+});
+
+// Draw line menu action
+$btnFreeDrawing.on('click', function () {
+  var settings = getBrushSettings();
+
+  imageEditor.stopDrawingMode();
+  imageEditor.startDrawingMode('FREE_DRAWING', settings);
+});
+
+$btnLineDrawing.on('click', function () {
+  var settings = getBrushSettings();
+
+  imageEditor.stopDrawingMode();
+  imageEditor.startDrawingMode('LINE_DRAWING', settings);
+});
+
+$inputBrushWidthRange.on('change', function () {
+  imageEditor.setBrush({
+    width: parseInt($(this).val(), 10),
+  });
+});
+
+brushColorpicker.on('selectColor', function (event) {
+  imageEditor.setBrush({
+    color: hexToRGBa(event.color, 0.5),
+  });
+});
+
+// Add shape menu action
+$btnAddRect.on('click', function () {
+  imageEditor.addShape(
+    'rect',
+    tui.util.extend(
+      {
+        width: 500,
+        height: 300,
+      },
+      shapeOpt
+    )
+  );
+});
+
+$btnAddSquare.on('click', function () {
+  imageEditor.addShape(
+    'rect',
+    tui.util.extend(
+      {
+        width: 400,
+        height: 400,
+        isRegular: true,
+      },
+      shapeOpt
+    )
+  );
+});
+
+$btnAddEllipse.on('click', function () {
+  imageEditor.addShape(
+    'circle',
+    tui.util.extend(
+      {
+        rx: 300,
+        ry: 200,
+      },
+      shapeOpt
+    )
+  );
+});
+
+$btnAddCircle.on('click', function () {
+  imageEditor.addShape(
+    'circle',
+    tui.util.extend(
+      {
+        rx: 200,
+        ry: 200,
+        isRegular: true,
+      },
+      shapeOpt
+    )
+  );
+});
+
+$btnAddTriangle.on('click', function () {
+  imageEditor.addShape(
+    'triangle',
+    tui.util.extend(
+      {
+        width: 500,
+        height: 400,
+        isRegular: true,
+      },
+      shapeOpt
+    )
+  );
+});
+
+$inputStrokeWidthRange.on('change', function () {
+  imageEditor.changeShape(activeObjectId, {
+    strokeWidth: parseInt($(this).val(), 10),
+  });
+});
+
+$inputCheckTransparent.on('change', function () {
+  var colorType = $('[name="select-color-type"]:checked').val();
+  var isTransparent = $(this).prop('checked');
+  var color;
+
+  if (!isTransparent) {
+    color = shapeColorpicker.getColor();
+  } else {
+    color = 'transparent';
+  }
+
+  if (colorType === 'stroke') {
+    imageEditor.changeShape(activeObjectId, {
+      stroke: color,
+    });
+  } else if (colorType === 'fill') {
+    imageEditor.changeShape(activeObjectId, {
+      fill: color,
+    });
+  }
+});
+
+shapeColorpicker.on('selectColor', function (event) {
+  var colorType = $('[name="select-color-type"]:checked').val();
+  var isTransparent = $inputCheckTransparent.prop('checked');
+  var color = event.color;
+
+  if (isTransparent) {
+    return;
+  }
+
+  if (colorType === 'stroke') {
+    imageEditor.changeShape(activeObjectId, {
+      stroke: color,
+    });
+  } else if (colorType === 'fill') {
+    imageEditor.changeShape(activeObjectId, {
+      fill: color,
+    });
+  }
+});
+
+// Load sample image
+imageEditor.loadImageFromURL('img/sampleImage.jpg', 'SampleImage').then(function () {
+  imageEditor.clearUndoStack();
+});

static/html/photon/app/js/theme/black-theme.js

@@ -0,0 +1,76 @@
+var blackTheme = {
+  'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
+  'common.bisize.width': '251px',
+  'common.bisize.height': '21px',
+  'common.backgroundImage': 'none',
+  'common.backgroundColor': '#1e1e1e',
+  'common.border': '0px',
+
+  // header
+  'header.backgroundImage': 'none',
+  'header.backgroundColor': 'transparent',
+  'header.border': '0px',
+
+  // load button
+  'loadButton.backgroundColor': '#fff',
+  'loadButton.border': '1px solid #ddd',
+  'loadButton.color': '#222',
+  'loadButton.fontFamily': "'Noto Sans', sans-serif",
+  'loadButton.fontSize': '12px',
+
+  // download button
+  'downloadButton.backgroundColor': '#fdba3b',
+  'downloadButton.border': '1px solid #fdba3b',
+  'downloadButton.color': '#fff',
+  'downloadButton.fontFamily': "'Noto Sans', sans-serif",
+  'downloadButton.fontSize': '12px',
+
+  // main icons
+  'menu.normalIcon.color': '#8a8a8a',
+  'menu.activeIcon.color': '#555555',
+  'menu.disabledIcon.color': '#434343',
+  'menu.hoverIcon.color': '#e9e9e9',
+  'menu.iconSize.width': '24px',
+  'menu.iconSize.height': '24px',
+
+  // submenu icons
+  'submenu.normalIcon.color': '#8a8a8a',
+  'submenu.activeIcon.color': '#e9e9e9',
+  'submenu.iconSize.width': '32px',
+  'submenu.iconSize.height': '32px',
+
+  // submenu primary color
+  'submenu.backgroundColor': '#1e1e1e',
+  'submenu.partition.color': '#3c3c3c',
+
+  // submenu labels
+  'submenu.normalLabel.color': '#8a8a8a',
+  'submenu.normalLabel.fontWeight': 'lighter',
+  'submenu.activeLabel.color': '#fff',
+  'submenu.activeLabel.fontWeight': 'lighter',
+
+  // checkbox style
+  'checkbox.border': '0px',
+  'checkbox.backgroundColor': '#fff',
+
+  // range style
+  'range.pointer.color': '#fff',
+  'range.bar.color': '#666',
+  'range.subbar.color': '#d1d1d1',
+
+  'range.disabledPointer.color': '#414141',
+  'range.disabledBar.color': '#282828',
+  'range.disabledSubbar.color': '#414141',
+
+  'range.value.color': '#fff',
+  'range.value.fontWeight': 'lighter',
+  'range.value.fontSize': '11px',
+  'range.value.border': '1px solid #353535',
+  'range.value.backgroundColor': '#151515',
+  'range.title.color': '#fff',
+  'range.title.fontWeight': 'lighter',
+
+  // colorpicker style
+  'colorpicker.button.border': '1px solid #1e1e1e',
+  'colorpicker.title.color': '#fff',
+};

static/html/photon/app/js/theme/white-theme.js

@@ -0,0 +1,76 @@
+var whiteTheme = {
+  'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
+  'common.bisize.width': '251px',
+  'common.bisize.height': '21px',
+  'common.backgroundImage': './img/bg.png',
+  'common.backgroundColor': '#fff',
+  'common.border': '1px solid #c1c1c1',
+
+  // header
+  'header.backgroundImage': 'none',
+  'header.backgroundColor': 'transparent',
+  'header.border': '0px',
+
+  // load button
+  'loadButton.backgroundColor': '#fff',
+  'loadButton.border': '1px solid #ddd',
+  'loadButton.color': '#222',
+  'loadButton.fontFamily': "'Noto Sans', sans-serif",
+  'loadButton.fontSize': '12px',
+
+  // download button
+  'downloadButton.backgroundColor': '#fdba3b',
+  'downloadButton.border': '1px solid #fdba3b',
+  'downloadButton.color': '#fff',
+  'downloadButton.fontFamily': "'Noto Sans', sans-serif",
+  'downloadButton.fontSize': '12px',
+
+  // main icons
+  'menu.normalIcon.color': '#8a8a8a',
+  'menu.activeIcon.color': '#555555',
+  'menu.disabledIcon.color': '#434343',
+  'menu.hoverIcon.color': '#e9e9e9',
+  'menu.iconSize.width': '24px',
+  'menu.iconSize.height': '24px',
+
+  // submenu icons
+  'submenu.normalIcon.color': '#8a8a8a',
+  'submenu.activeIcon.color': '#555555',
+  'submenu.iconSize.width': '32px',
+  'submenu.iconSize.height': '32px',
+
+  // submenu primary color
+  'submenu.backgroundColor': 'transparent',
+  'submenu.partition.color': '#e5e5e5',
+
+  // submenu labels
+  'submenu.normalLabel.color': '#858585',
+  'submenu.normalLabel.fontWeight': 'normal',
+  'submenu.activeLabel.color': '#000',
+  'submenu.activeLabel.fontWeight': 'normal',
+
+  // checkbox style
+  'checkbox.border': '1px solid #ccc',
+  'checkbox.backgroundColor': '#fff',
+
+  // rango style
+  'range.pointer.color': '#333',
+  'range.bar.color': '#ccc',
+  'range.subbar.color': '#606060',
+
+  'range.disabledPointer.color': '#d3d3d3',
+  'range.disabledBar.color': 'rgba(85,85,85,0.06)',
+  'range.disabledSubbar.color': 'rgba(51,51,51,0.2)',
+
+  'range.value.color': '#000',
+  'range.value.fontWeight': 'normal',
+  'range.value.fontSize': '11px',
+  'range.value.border': '0',
+  'range.value.backgroundColor': '#f5f5f5',
+  'range.title.color': '#000',
+  'range.title.fontWeight': 'lighter',
+
+  // colorpicker style
+  'colorpicker.button.border': '0px',
+  'colorpicker.title.color': '#000',
+};