Sterc · ilyautkin · Mar 21, 2023
diff --git a/_build/config.json b/_build/config.json
@@ -3,7 +3,7 @@
     "lowCaseName": "mediamanager",
     "description": "Media Manager for MODX.",
     "author": "Sterc",
-    "version": "0.3.3",
+    "version": "0.3.4",
     "package":{
         "menus": [{
             "text": "mediamanager",

diff --git a/_packages/mediamanager-0.3.4-pl.transport.zip b/_packages/mediamanager-0.3.4-pl.transport.zip
diff --git a/assets/components/mediamanager/js/inputs/cb_mediamanager_image_input.js b/assets/components/mediamanager/js/inputs/cb_mediamanager_image_input.js
@@ -5,7 +5,10 @@
     // and the data variable contains field information, properties etc.
     ContentBlocks.fieldTypes.cb_mediamanager_image_input = function(dom, data) {
         var input = {
-            fieldDom: dom.find('.contentblocks-field')
+            fieldDom: dom.find('.contentblocks-field'),
+            cropData: data.crops || {},
+            cropPreviews: dom.find('.contentblocks-field-image-crop-previews'),
+            openCropperAutomatically: ContentBlocks.toBoolean(data.properties.open_crops_automatically)
         };
 
         // Do something when the input is being loaded
@@ -20,8 +23,20 @@
                 dom.find('.contentblocks-field-image-title-input').val(data.title);
                 dom.find('.contentblocks-field-image-preview img').attr('src', urls.displaySrc);
                 dom.addClass('preview');
+                input.initCropPreviews();
             }
 
+            if (!data.properties.crops || data.properties.crops.length === 0) {
+                input.fieldDom.find('.contentblocks-field-crop-image').hide();
+            }
+            else {
+                input.fieldDom.find('.contentblocks-field-crop-image').on('click', input.openCropper);
+                input.fieldDom.on('click', '.contentblocks-field-image-crop-preview', function(e) {
+                    var crop = $(this),
+                        cropKey = crop.data('key');
+                    input.openCropper(e, cropKey);
+                });
+            }
             dom.find('.contentblocks-field-delete-image').on('click', function() {
                 input.fieldDom.removeClass('preview');
                 dom.removeClass('preview');
@@ -31,6 +46,8 @@
                 dom.find('.file_id').val('');
                 dom.find('.contentblocks-field-image-title-input').val('');
                 dom.find('.contentblocks-field-file-preview').html('');
+                input.cropData = data.crops = {};
+                input.cropPreviews.empty();
 
                 ContentBlocks.fixColumnHeights();
                 ContentBlocks.fireChange();
@@ -49,7 +66,8 @@
                 width       : dom.find('.width').val(),
                 height      : dom.find('.height').val(),
                 file_id     : dom.find('.file_id').val(),
-                title       : dom.find('.contentblocks-field-image-title-input').val()
+                title       : dom.find('.contentblocks-field-image-title-input').val(),
+                crops       : input.cropData || {}
             };
         };
 
@@ -69,12 +87,55 @@
                     dom.find('.contentblocks-field-image-preview img').attr('src', file.preview);
 
                     input.fieldDom.addClass('preview');
+
+                    if (input.openCropperAutomatically) {
+                        input.openCropper();
+                    }
                 }
             });
 
             mediaManager.open();
         };
 
+        input.initCropPreviews = function() {
+            $.each(input.cropData, function(key, cropData) {
+                if (cropData.url && data.properties.crops && data.properties.crops.indexOf(key) !== -1) {
+                    var cd = $.extend({cropKey: key}, cropData);
+                    input.cropPreviews.append(tmpl('contentblocks-field-image-crop', cd));
+                }
+            });
+        };
+
+        input.openCropper = function(e, crop) {
+            var imgData = $.extend(true, {}, data, input.getData());
+            crop = crop || false;
+            var cropper = ContentBlocks.Cropper(imgData, {
+                configurations: data.properties.crops || '',
+                initialCrop: crop
+            });
+            cropper.onChange(function(cropperData) {
+                input.cropData = $.extend(true, {}, cropperData, true);
+                $.each(cropperData, function(cropKey, cropData) {
+                    if (!cropData.url) {
+                        return;
+                    }
+                    var preview = input.cropPreviews.find('.image-crop-' + cropKey + ' img');
+                    if (preview && preview.length) {
+                        preview.attr('src', cropData.url)
+                    }
+                    else {
+                        var cd = $.extend({cropKey: cropKey}, cropData);
+                        input.cropPreviews.append(tmpl('contentblocks-field-image-crop', cd));
+                    }
+                });
+                if (data.properties.thumbnail_crop
+                    && input.cropData[data.properties.thumbnail_crop]
+                    && input.cropData[data.properties.thumbnail_crop].url) {
+                    input.fieldDom.find('img.contentblocks-field-image-preview-img').attr('src', input.cropData[data.properties.thumbnail_crop].url);
+                }
+            });
+        };
+
         // Always return the input variable.
         return input;
     }

diff --git a/core/components/mediamanager/docs/changelog.txt b/core/components/mediamanager/docs/changelog.txt
@@ -1,5 +1,9 @@
 Changelog for MediaManager.
 
+MediaManager 0.3.4
+====================================
+- Add cropping to CB image field
+
 MediaManager 0.3.3
 ====================================
 - Add custom plugin events:

diff --git a/core/components/mediamanager/docs/readme.txt b/core/components/mediamanager/docs/readme.txt
@@ -1,7 +1,7 @@
 ---------------------------------------
 Media Manager
 ---------------------------------------
-Version: 0.2.5
+Version: 0.3.4
 Author: Sterc <[email protected]>
 ---------------------------------------
 

diff --git a/core/components/mediamanager/elements/inputs/cb_mediamanager_image_input.class.php b/core/components/mediamanager/elements/inputs/cb_mediamanager_image_input.class.php
@@ -32,7 +32,7 @@ public function getJavaScripts()
      */
     public function getTemplates()
     {
-        $tpls = array();
+        $tpls = [];
 
         // Grab the template from a .tpl file
         $corePath = $this->modx->getOption('mediamanager.core_path', null, MODX_CORE_PATH . 'components/mediamanager/');
@@ -41,6 +41,11 @@ public function getTemplates()
         // Wrap the template, giving the input a reference of "my_awesome_input", and
         // add it to the returned array.
         $tpls[] = $this->contentBlocks->wrapInputTpl('cb_mediamanager_image_input', $template);
+
+        $tpls[] = $this->contentBlocks->getCoreTpl('inputs/partials/image_crop', 'contentblocks-field-image-crop');
+        $tpls[] = $this->contentBlocks->getCoreTpl('inputs/modals/image_cropper', 'contentblocks-field-image-cropper');
+        $tpls[] = $this->contentBlocks->getCoreTpl('inputs/modals/image_cropper_configuration', 'contentblocks-field-image-cropper-configuration');
+
         return $tpls;
     }
 
@@ -69,4 +74,37 @@ public function process(cbField $field, array $data = array())
 
         return parent::process($field, $data);
     }
+
+    /**
+     * Return an array of field properties. Properties are used in the component for defining
+     * additional templates or other settings the site admin can define for the field.
+     *
+     * @return array
+     */
+    public function getFieldProperties()
+    {
+        return [
+            [
+                'key' => 'crop_directory',
+                'fieldLabel' => $this->modx->lexicon('contentblocks.crop_directory'),
+                'xtype' => 'textfield',
+                'default' => $this->contentBlocks->getOption('contentblocks.image.crop_path', null, 'assets/crops/'),
+                'description' => $this->modx->lexicon('contentblocks.crop_directory.description')
+            ],
+            [
+                'key' => 'crops',
+                'fieldLabel' => $this->modx->lexicon('contentblocks.crops'),
+                'xtype' => 'textfield',
+                'default' => '',
+                'description' => $this->modx->lexicon('contentblocks.crops.description')
+            ],
+            [
+                'key' => 'open_crops_automatically',
+                'fieldLabel' => $this->modx->lexicon('contentblocks.open_crops_automatically'),
+                'xtype' => 'contentblocks-combo-boolean',
+                'default' => false,
+                'description' => $this->modx->lexicon('contentblocks.open_crops_automatically.description')
+            ]
+        ];
+    }
 }
diff --git a/core/components/mediamanager/elements/templates/cb_mediamanager_image_input.tpl b/core/components/mediamanager/elements/templates/cb_mediamanager_image_input.tpl
@@ -5,6 +5,7 @@
     <input type="hidden" class="file_id" value="{%=o.file_id%}">
 
     <div class="contentblocks-field-actions">
+        <button type="button" class="contentblocks-field-crop-image contentblocks-field-button">{%=_('contentblocks.crop_image')%}</button>
         <button type="button" class="contentblocks-field-delete-image contentblocks-field-button">&times; {%=_('contentblocks.delete_image')%}</button>
     </div>