add polyfill and ui class

kennyd98 · May 11, 2018 · 19c3ec3 · 19c3ec3
1 parent 605acd0
commit 19c3ec3
Show file tree

Hide file tree

Showing 12 changed files with 574 additions and 37 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,2 @@
+# Ignore polyfill
+src/js/polyfill.js
diff --git a/examples/example00-design.html b/examples/example00-design.html
@@ -4,9 +4,7 @@
         <meta charset="UTF-8">
         <title>0. Design</title>
         <link rel="stylesheet" href="img/icon/svg-bundle.css" />
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/svgxuse/1.2.6/svgxuse.js" integrity="sha256-TU+njGBu7T1DrfKgOBEH7kCKsl7UEvUNzpZaeUNNGi8=" crossorigin="anonymous"></script>
         <style>
-
          html, body {
              height: 100%;
              margin: 0;
@@ -91,21 +89,40 @@
 
          .tui-image-editor-main-container .main {
              position: absolute;
+             text-align: center;
              top: 64px;
              bottom: 0;
              right: 0;
              left: 0;
          }
+         .tui-image-editor {
+            position: absolute;
+            display: inline-block;
+            transition: all .7s ease;
+         }
 
          .tui-image-editor-main-container .main .sub-menu {
-             display: block;
+             display: none;
              position: absolute;
              border: 1px solid red;
              bottom: 0;
              width:100%;
              height: 150px;
          }
 
+         .tui-image-editor-main-container .main .sub-menu > div {
+             display: none;
+             vertical-align: middle;
+         }
+
+         .tui-image-editor-main-container .main .sub-menu.crop > div.crop {
+             display: table-cell;
+         }
+
+         .tui-image-editor-main-container .main .sub-menu.shape > div.shape {
+             display: table-cell;
+         }
+
          .tui-image-editor-controls {
              position: absolute;
              background-color: #151515;
@@ -238,30 +255,25 @@
     </html>
     <body>
 
-        <div class="tui-image-editor-container">
-        </div>
+        <div class="tui-image-editor-container"></div>
 
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.js"></script>
         <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.3.0/tui-code-snippet.min.js"></script>
-        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.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="https://cdn.rawgit.com/nhnent/tui.component.colorpicker/1.0.2/dist/colorpicker.min.js"></script>
         <script type="text/javascript" src="../dist/tui-image-editor.js"></script>
         <script>
-         var $btnUndo = $('#btn-undo');
-         var $btnRedo = $('#btn-redo');
-
-         function resizeEditor() {
-             var $editor = $('.tui-image-editor');
-             var $container = $('.tui-image-editor-canvas-container');
-             var height = parseFloat($container.css('max-height'));
-
-             $editor.height(height);
-         }
 
          // Image editor
          var imageEditor = new tui.ImageEditor('.tui-image-editor-container', {
-             includeUi: true,
+             includeUi: {
+                 loadImage: {
+                     path: 'img/sampleImage.jpg',
+                     name: 'SampleImage'
+                 },
+                 initMenu: 'shape',
+                 menuBarPosition: 'bottom'
+             },
              cssMaxWidth: 700,
              cssMaxHeight: 500,
              selectionStyle: {
@@ -270,6 +282,12 @@
              }
          });
 
+         window.onresize = function() {
+             imageEditor.ui.resizeEditor();
+         }
+
+
+
          /*
          imageEditor.on({
              undoStackChanged: function(length) {

diff --git a/examples/img/icon/ic-shape-circle.svg b/examples/img/icon/ic-shape-circle.svg
diff --git a/examples/img/icon/ic-shape-rectangle.svg b/examples/img/icon/ic-shape-rectangle.svg
diff --git a/examples/img/icon/ic-shape-triangle.svg b/examples/img/icon/ic-shape-triangle.svg
diff --git a/examples/img/icon/svg-bundle.css b/examples/img/icon/svg-bundle.css
@@ -1,26 +1,31 @@
-.svg_ic-crop,
 .svg_ic-delete-all,
 .svg_ic-delete,
 .svg_ic-draw,
+.svg_ic-crop,
 .svg_ic-filter,
-.svg_ic-mask,
 .svg_ic-icon,
-.svg_ic-rotate,
-.svg_ic-shape,
-.svg_ic-text,
-.svg_ic-undo,
+.svg_ic-mask,
 .svg_ic-redo,
+.svg_ic-reset,
+.svg_ic-shape,
+.svg_ic-rotate,
 .svg_ic-flip,
-.svg_ic-reset {
+.svg_ic-text,
+.svg_ic-undo {
   width: 24px;
   height: 24px;
 }
+.svg_ic-shape-circle,
+.svg_ic-shape-rectangle,
+.svg_ic-shape-triangle {
+  width: 32px;
+  height: 32px;
+}
 .svg_img-bi {
   width: 257px;
   height: 26px;
 }
 
-
 svg use {
     display: none;
 }

diff --git a/examples/img/icon/svg-bundle.svg b/examples/img/icon/svg-bundle.svg
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,4 @@
+import './js/polyfill';
 import ImageEditor from './js/imageEditor';
 
 // commands