Merge pull request #245 from uploadcare/modern-crop

Modern crop
uploadcare · Jun 29, 2015 · b87d119 · b87d119
2 parents dbb8daa + c0bfba7
commit b87d119
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 132 deletions.
diff --git a/app/assets/javascripts/uploadcare/ui/crop/crop-widget.js.coffee b/app/assets/javascripts/uploadcare/ui/crop/crop-widget.js.coffee
@@ -13,10 +13,9 @@ namespace 'uploadcare.crop', (ns) ->
 
     constructor: (@element, @originalSize, crop={}) ->
       @__api = $.Jcrop(@element[0],
-        handleSize: 10
         trueSize: @originalSize
         addClass: 'uploadcare-crop-widget'
-        createDragbars: []
+        createHandles: ['nw','ne','se','sw']
         bgColor: 'transparent'
         bgOpacity: .8
       )

diff --git a/app/assets/javascripts/uploadcare/ui/crop/jquery.Jcrop.js b/app/assets/javascripts/uploadcare/ui/crop/jquery.Jcrop.js
@@ -69,7 +69,6 @@
     function startDragMode(mode, pos) //{{{
     {
       docOffset = getPos($img);
-      Tracker.setCursor(mode === 'move' ? mode : mode + '-resize');
 
       if (mode === 'move') {
         return Tracker.activateHandlers(createMover(pos), doneSelect);
@@ -213,12 +212,8 @@
     function doneSelect(pos) //{{{
     {
       var c = Coords.getFixed();
-      if ((c.w > options.minSelect[0]) && (c.h > options.minSelect[1])) {
-        Selection.enableHandles();
-        Selection.done();
-      } else {
-        Selection.release();
-      }
+      Selection.enableHandles();
+      Selection.done();
     }
     //}}}
     function selectDrag(pos) //{{{
@@ -317,17 +312,14 @@
           overflow: 'hidden'
         }),
 
-        $hdl_holder = $('<div />') 
-        .width('100%').height('100%').css('zIndex', 320), 
-
         $sel = $('<div />') 
         .css({
           position: 'absolute',
           zIndex: 600
         }).dblclick(function(){
           var c = Coords.getFixed();
           options.onDblClick.call(api,c);
-        }).insertBefore($img).append($img_holder, $hdl_holder); 
+        }).insertBefore($img).append($img_holder);
 
     if (img_mode) {
 
@@ -820,7 +812,6 @@
     // Selection Module {{{
     var Selection = (function () {
       var awake,
-          hdep = 370,
           borders = {},
           handle = {},
           dragbar = {},
@@ -830,48 +821,31 @@
       function insertBorder(type) //{{{
       {
         var jq = $('<div />').css({
-          position: 'absolute',
-          opacity: options.borderOpacity
+          position: 'absolute'
         }).addClass(cssClass(type));
-        $img_holder.append(jq);
+        $sel.append(jq);
         return jq;
       }
       //}}}
-      function dragDiv(ord, zi) //{{{
+      function dragDiv(ord) //{{{
       {
         var jq = $('<div />').mousedown(createDragger(ord)).css({
           cursor: ord + '-resize',
-          position: 'absolute',
-          zIndex: zi
-        }).addClass('ord-'+ord);
+          position: 'absolute'
+        }).append('<div/>')
+          .addClass('ord-'+ord);
 
         if (Touch.support) {
           jq.bind('touchstart.jcrop', Touch.createDragger(ord));
         }
 
-        $hdl_holder.append(jq);
+        $sel.append(jq);
         return jq;
       }
       //}}}
       function insertHandle(ord) //{{{
       {
-        var hs = options.handleSize;
-        return dragDiv(ord, hdep++).css({
-          opacity: options.handleOpacity
-        }).width(hs).height(hs).addClass(cssClass('handle'));
-      }
-      //}}}
-      function insertDragbar(ord) //{{{
-      {
-        return dragDiv(ord, hdep++).addClass('jcrop-dragbar');
-      }
-      //}}}
-      function createDragbars(li) //{{{
-      {
-        var i;
-        for (i = 0; i < li.length; i++) {
-          dragbar[li[i]] = insertDragbar(li[i]);
-        }
+        return dragDiv(ord).addClass(cssClass('handle'));
       }
       //}}}
       function createBorders(li) //{{{
@@ -988,27 +962,18 @@
         options.onRelease.call(api);
       }
       //}}}
-      function showHandles() //{{{
-      {
-        if (seehandles) {
-          $hdl_holder.show();
-        }
-      }
-      //}}}
       function enableHandles() //{{{
       {
         seehandles = true;
         if (options.allowResize) {
-          $hdl_holder.show();
           return true;
         }
       }
       //}}}
       function disableHandles() //{{{
       {
         seehandles = false;
-        $hdl_holder.hide();
-      } 
+      }
       //}}}
       function animMode(v) //{{{
       {
@@ -1030,9 +995,6 @@
       // Insert draggable elements {{{
       // Insert border divs for outline
 
-      if (options.dragEdges && $.isArray(options.createDragbars))
-        createDragbars(options.createDragbars);
-
       if ($.isArray(options.createHandles))
         createHandles(options.createHandles);
 
@@ -1074,7 +1036,6 @@
         enableOnly: function () {
           seehandles = true;
         },
-        showHandles: showHandles,
         disableHandles: disableHandles,
         animMode: animMode,
         setBgOpacity: setBgOpacity,
@@ -1165,20 +1126,14 @@
         return trackUp(e);
       }
       //}}}
-      function setCursor(t) //{{{
-      {
-        $trk.css('cursor', t);
-      }
-      //}}}
 
       if (!trackDoc) {
         $trk.mousemove(trackMove).mouseup(trackUp).mouseout(trackUp);
       }
 
       $img.before($trk);
       return {
-        activateHandlers: activateHandlers,
-        setCursor: setCursor
+        activateHandlers: activateHandlers
       };
     }());
     //}}}
@@ -1305,7 +1260,6 @@
       options.disabled = true;
       Selection.disableHandles();
       Selection.setCursor('default');
-      Tracker.setCursor('default');
     }
     //}}}
     function enableCrop() //{{{
@@ -1401,7 +1355,6 @@
     //}}}
     //}}}
 
-    $hdl_holder.hide();
     interfaceUpdate(true);
 
     var api = {
@@ -1516,14 +1469,10 @@
     bgColor: 'black',
     bgOpacity: 0.6,
     bgFade: false,
-    borderOpacity: 0.4,
-    handleOpacity: 0.5,
-    handleSize: 7,
 
     aspectRatio: 0,
     keySupport: true,
     createHandles: ['n','s','e','w','nw','ne','se','sw'],
-    createDragbars: ['n','s','e','w'],
     createBorders: ['n','s','e','w'],
     drawBorders: true,
     dragEdges: true,
@@ -1539,7 +1488,6 @@
     animationDelay: 20,
     swingSpeed: 3,
 
-    minSelect: [0, 0],
     maxSize: [0, 0],
     minSize: [0, 0],
 

diff --git a/app/assets/stylesheets/uploadcare/crop-widget.css.scss b/app/assets/stylesheets/uploadcare/crop-widget.css.scss
@@ -3,12 +3,10 @@
 .uploadcare-crop-widget {
   @include vertical-centered;
 
-  .jcrop-handle:before {
-    content: '';
-    display: block;
-    width: 26px;
-    height: 26px;
-    margin: -9px;
+  .jcrop-handle > div {
+    width: 35px;
+    height: 35px;
+    margin: -11px;
   }
 
   > div:first-child {

diff --git a/app/assets/stylesheets/uploadcare/images.css.scss b/app/assets/stylesheets/uploadcare/images.css.scss
@@ -8,10 +8,6 @@
   background-size: 50px;
 }
 
-%crop-border-image {
-  background-image: url(data:image/gif;base64,R0lGODlhCAAIAPABAAAAAKqqqiH/C05FVFNDQVBFMi4wAwEAAAAh+QQJCgABACwAAAAACAAIAAACDYQRGadrzVRMB9FZ5SwAIfkECQoAAQAsAAAAAAgACAAAAg8MDqGYaudeW9ChyOyltQAAIfkECQoAAQAsAAAAAAgACAAAAg9MgGCXm+rQYtC0WGl9oQAAIfkECQoAAQAsAAAAAAgACAAAAg+MgWCRernaYmjCWLF7qAAAIfkECQoAAQAsAAAAAAgACAAAAg2MAwmna81UTAfRWeUsACH5BAkKAAEALAAAAAAIAAgAAAIPRB6gmGrnXlvQocjspbUAACH5BAkKAAEALAAAAAAIAAgAAAIPBIJhl5vq0GLQtFhpfaAAACH5BAUKAAEALAAAAAAIAAgAAAIPhINhkHq52mJowlixe6gAADs=);
-}
-
 %arrow-image {
   background-image: url("<%= settings.scriptBase %>/images/arrow.png");
 }

diff --git a/app/assets/stylesheets/uploadcare/jCrop.css.scss b/app/assets/stylesheets/uploadcare/jCrop.css.scss
@@ -11,7 +11,6 @@
 */
 .uploadcare-crop-widget {
 
-
 &.jcrop-holder {
   direction: ltr;
   text-align: left;
@@ -20,81 +19,68 @@
 
 
 /* These styles define the border lines */
-.jcrop-vline,.jcrop-hline {
-  @extend %crop-border-image;
-  background-color: white;
-  background-position: top left;
-  background-repeat: repeat;
-  font-size: 0;
+.jcrop-vline,
+.jcrop-hline,
+.jcrop-handle {
   position: absolute;
+  font-size: 0;
+  background-color: white;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
+  z-index: 320;
 }
 .jcrop-vline{height:100%;width:1px!important;}
 .jcrop-hline{height:1px!important;width:100%;}
 .jcrop-vline.right{right:0;}
 .jcrop-hline.bottom{bottom:0;}
 
-/* Handle style - size is set by Jcrop handleSize option (currently) */
-.jcrop-handle{background-color:#333;border:1px #eee solid;font-size:1px;}
-
 /* This style is used for invisible click targets */
 .jcrop-tracker
 {
-  height: 100%; 
+  height: 100%;
   width: 100%;
   -webkit-tap-highlight-color: transparent; /* "turn off" link highlight */
   -webkit-touch-callout: none;              /* disable callout, image save panel */
   -webkit-user-select: none;                /* disable cut copy paste */
 }
 
-/* Positioning of handles and drag bars */
-.jcrop-handle.ord-n{left:50%;margin-left:-4px;margin-top:-4px;top:0;}
-.jcrop-handle.ord-s{bottom:0;left:50%;margin-bottom:-4px;margin-left:-4px;}
-.jcrop-handle.ord-e{margin-right:-4px;margin-top:-4px;right:0;top:50%;}
-.jcrop-handle.ord-w{left:0;margin-left:-4px;margin-top:-4px;top:50%;}
-.jcrop-handle.ord-nw{left:0;margin-left:-4px;margin-top:-4px;top:0;}
-.jcrop-handle.ord-ne{margin-right:-4px;margin-top:-4px;right:0;top:0;}
-.jcrop-handle.ord-se{bottom:0;margin-bottom:-4px;margin-right:-4px;right:0;}
-.jcrop-handle.ord-sw{bottom:0;left:0;margin-bottom:-4px;margin-left:-4px;}
-.jcrop-dragbar.ord-n,.jcrop-dragbar.ord-s{height:7px;width:100%;}
-.jcrop-dragbar.ord-e,.jcrop-dragbar.ord-w{height:100%;width:7px;}
-.jcrop-dragbar.ord-n{margin-top:-4px;}
-.jcrop-dragbar.ord-s{bottom:0;margin-bottom:-4px;}
-.jcrop-dragbar.ord-e{margin-right:-4px;right:0;}
-.jcrop-dragbar.ord-w{margin-left:-4px;}
 
-/* The "jcrop-light" class/extension */
-.jcrop-light .jcrop-vline,.jcrop-light .jcrop-hline
-{
-  background:#FFF;
-  filter:Alpha(opacity=70)!important;
-  opacity:.70!important;
+/* Handle style - size is set by Jcrop handleSize option (currently) */
+.jcrop-handle {
+  border-radius: 50%;
+  width: 13px;
+  height: 13px;
+  z-index: 330;
 }
-.jcrop-light .jcrop-handle
-{
-  -moz-border-radius:3px;
-  -webkit-border-radius:3px;
-  background-color:#000;
-  border-color:#FFF;
-  border-radius:3px;
+.jcrop-handle:before,
+.jcrop-handle:after {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 1px;
+  height: 1px;
+  background: white;
 }
+.jcrop-handle:before {width: 3px; top: 6px;}
+.jcrop-handle:after {height: 3px; left: 6px;}
+.jcrop-handle.ord-nw:before,
+.jcrop-handle.ord-sw:before {left: 12px}
+.jcrop-handle.ord-ne:before,
+.jcrop-handle.ord-se:before {left: -2px}
+.jcrop-handle.ord-nw:after,
+.jcrop-handle.ord-ne:after {top: 12px}
+.jcrop-handle.ord-sw:after,
+.jcrop-handle.ord-se:after {top: -2px}
+/* Positioning of handles and drag bars */
+.jcrop-handle.ord-nw{left:0;margin-left:-6px;margin-top:-6px;top:0;}
+.jcrop-handle.ord-ne{margin-right:-6px;margin-top:-6px;right:0;top:0;}
+.jcrop-handle.ord-se{bottom:0;margin-bottom:-6px;margin-right:-6px;right:0;}
+.jcrop-handle.ord-sw{bottom:0;left:0;margin-bottom:-6px;margin-left:-6px;}
 
-/* The "jcrop-dark" class/extension */
-.jcrop-dark .jcrop-vline,.jcrop-dark .jcrop-hline
-{
-  background:#000;
-  filter:Alpha(opacity=70)!important;
-  opacity:.7!important;
-}
-.jcrop-dark .jcrop-handle
-{
-  -moz-border-radius:3px;
-  -webkit-border-radius:3px;
-  background-color:#FFF;
-  border-color:#000;
-  border-radius:3px;
-}
 
 /* Fix for twitter bootstrap et al. */
-&.jcrop-holder img,img.jcrop-preview{ max-width: none; }
+&.jcrop-holder img,
+img.jcrop-preview{
+  max-width: none;
+}
 
 }