Доработка компонента crop

application/classes/actions/ActionAjax.class.php

@@ -168,10 +168,14 @@ class ActionAjax extends Action
      */
     protected function EventModalImageCrop()
     {
+        list($iWidth, $iHeight) = @getimagesize($this->Fs_GetPathServer($sFileOriginal));
+
         $oViewer = $this->Viewer_GetLocalViewer();
 
-
+        $oViewer->Assign('usePreview', getRequest('use_preview'), true);
         $oViewer->Assign('image', getRequestStr('image_src'), true);
+        $oViewer->Assign('width', getRequest('width'), true);
+        $oViewer->Assign('height', getRequest('height'), true);
 
         $this->Viewer_AssignAjax('sText', $oViewer->Fetch("components/crop/crop.tpl"));
     }

application/classes/actions/ActionSettings.class.php

@@ -134,12 +134,15 @@ class ActionSettings extends Action
         $sDir = Config::Get('path.uploads.images') . "/tmp/userphoto/{$oUser->getId()}";
         if ($sFileOriginal = $oImage->resize(1000, null)->saveSmart($sDir, 'original')) {
             if ($sFilePreview = $oImage->resize(350, null)->saveSmart($sDir, 'preview')) {
+                list($iWidth, $iHeight) = @getimagesize($this->Fs_GetPathServer($sFileOriginal));
                 /**
                  * Сохраняем в сессии временный файл с изображением
                  */
                 $this->Session_Set('sPhotoFileTmp', $sFileOriginal);
                 $this->Session_Set('sPhotoFilePreviewTmp', $sFilePreview);
-                $this->Viewer_AssignAjax('sTmpFile', $this->Fs_GetPathWeb($sFilePreview));
+                $this->Viewer_AssignAjax('path', $this->Fs_GetPathWeb($sFilePreview));
+                $this->Viewer_AssignAjax('width', $iWidth);
+                $this->Viewer_AssignAjax('height', $iHeight);
                 $this->Fs_RemoveFileLocal($sFileTmp);
                 return;
             }

application/frontend/skin/developer/components/crop/crop.tpl

@@ -2,35 +2,40 @@
  * Ресайз загруженного изображения
  *
  * @param string $image
- * @param array  $sizes
+ * @param array  $width
+ * @param array  $height
+ *
+ * TODO: Возможность задавать размеры превью
  *}
 
 {extends 'components/modal/modal.tpl'}
 
 {block 'modal_id'}modal-image-crop{/block}
-{block 'modal_class'}modal-image-crop js-modal-default{/block}
+{block 'modal_class'}modal--crop js-modal-default{/block}
 {block 'modal_title'}{lang 'modal_image_crop.title'}{/block}
 
 {block 'modal_content'}
     {$image = "{$smarty.local.image|escape}?v{rand( 0, 10e10 )}"}
 
-    <div class="crop">
+    <div class="crop js-crop" data-crop-width="{$smarty.local.width}" data-crop-height="{$smarty.local.height}">
         {* Изображение *}
         <div class="crop-image-holder js-crop-image-holder">
             <img src="{$image}" style="width: 370px;" class="crop-image js-crop-image">
         </div>
 
         {* Превью *}
-        <div class="crop-previews js-crop-previews">
-            {foreach [ 100, 64, 48 ] as $size}
-                <div style="width: {$size}px; height: {$size}px;" class="crop-preview js-crop-preview">
-                    <img src="{$image}" class="js-crop-preview-image" data-size="{$size}">
-                </div>
-            {/foreach}
-        </div>
+        {if $smarty.local.usePreview}
+            <div class="crop-previews js-crop-previews">
+                {foreach [ 100, 64, 48 ] as $size}
+                    <div style="width: {$size}px; height: {$size}px;" class="crop-preview js-crop-preview">
+                        <img src="{$image}" class="js-crop-preview-image" data-size="{$size}">
+                    </div>
+                {/foreach}
+            </div>
+        {/if}
     </div>
 {/block}
 
 {block 'modal_footer_begin'}
-    {include 'components/button/button.tpl' text=$aLang.common.save classes='js-ajax-image-crop-submit' mods='primary'}
+    {include 'components/button/button.tpl' text=$aLang.common.save classes='js-crop-submit' mods='primary'}
 {/block}

application/frontend/skin/developer/components/crop/css/crop.css

@@ -1,12 +1,26 @@
 /**
  * Кроп изображений
- *
- * @template modals/modal.image_crop.tpl
  */
 
-.modal-image-crop { max-width: 600px; }
+.crop {
+    text-align: center;
+}
 
-.crop-image-holder { margin-right: 10px; }
-.crop-image-holder,
-.crop-previews { display: inline-block; vertical-align: top;  }
-.crop-preview { overflow: hidden; margin-bottom: 15px; }
+.crop-image-holder {
+    margin-right: 10px;
+}
+.crop-image-holder, .crop-previews {
+    display: inline-block;
+    vertical-align: top;
+}
+.crop-preview {
+    overflow: hidden;
+    margin-bottom: 15px;
+}
+
+/**
+ * Модальное окно
+ */
+.modal--crop {
+    max-width: 600px;
+}

application/frontend/skin/developer/components/crop/js/crop.js

@@ -0,0 +1,125 @@
+/**
+ * Crop
+ *
+ * @module ls/crop
+ *
+ * @license   GNU General Public License, version 2
+ * @copyright 2013 OOO "ЛС-СОФТ" {@link http://livestreetcms.com}
+ * @author    Denis Shakhov <denis.shakhov@gmail.com>
+ */
+
+(function($) {
+    "use strict";
+
+    $.widget( "livestreet.lsCrop", {
+        /**
+         * Дефолтные опции
+         */
+        options: {
+            minSize: [ 0, 0 ],
+            maxSize: [ 0, 0 ],
+            aspectRatio: 0,
+
+            // Селекторы
+            selectors: {
+                image: '.js-crop-image',
+                preview: '.js-crop-preview-image'
+            },
+        },
+
+        /**
+         * Конструктор
+         *
+         * @constructor
+         * @private
+         */
+        _create: function () {
+            var _this = this;
+
+            this.elements = {
+                image: this.element.find( this.option( 'selectors.image' ) ),
+                previews: this.element.find( this.option( 'selectors.preview' ) ),
+            };
+
+            // Вычисляем минимальные ширину и высоту
+            var ratio = this.elements.image.innerWidth() / this.element.data( 'crop-width' );
+            var jcropOptions = $.extend( {}, this.options, {
+                minSize: [
+                    ratio * this.option( 'minSize' )[0],
+                    ratio * this.option( 'minSize' )[1]
+                ],
+                onChange: this._updatePreviews.bind( this ),
+                onSelect: this._updatePreviews.bind( this )
+            });
+
+            // Иниц-ия jcrop
+            this.elements.image.Jcrop( jcropOptions, function() {
+                _this.jcrop = this;
+
+                // Добавляем начальное выделение
+                var iw = _this.elements.image.innerWidth();
+                var ih = _this.elements.image.innerHeight();
+
+                var sx = 10, sy = 10, ex = iw - 10, ey = ih - 10;
+
+                if ( _this.option( 'aspectRatio' ) ) {
+                    sx = iw / 2 - 50;
+                    sy = ih / 2 - 50;
+                    ex = sx + 100;
+                    ey = sy + 100;
+                }
+
+                this.setSelect([ sx, sy, ex, ey ]);
+            });
+        },
+
+        /**
+         * 
+         */
+        getImage: function() {
+            return this.elements.image;
+        },
+
+        /**
+         * 
+         */
+        getSelection: function() {
+            return this.jcrop.tellSelect();
+        },
+
+        /**
+         * 
+         */
+        setSelection: function( coords ) {
+            return this.jcrop.setSelect( coords );
+        },
+
+        /**
+         * 
+         */
+        _updatePreviews: function( coords ) {
+            var _this = this;
+
+            this.elements.previews.each(function() {
+                var preview = $( this ),
+                    size = preview.data('size'),
+                    rx = size / coords.w,
+                    ry = size / coords.h;
+
+                preview.css({
+                    width:      Math.round( rx * _this.elements.image.width() ) + 'px',
+                    height:     Math.round( ry * _this.elements.image.height() ) + 'px',
+                    marginLeft: '-' + Math.round( rx * coords.x ) + 'px',
+                    marginTop:  '-' + Math.round( ry * coords.y ) + 'px'
+                });
+            })
+        },
+
+        /**
+         * 
+         */
+        _destroy: function() {
+            this.jcrop.destroy();
+        }
+    });
+})(jQuery);