From 6ffc4f67884d4ab58fb46efd22107329f5176a8b Mon Sep 17 00:00:00 2001 From: Vasilij Belosludcev Date: Tue, 2 May 2017 14:24:45 +0500 Subject: [PATCH 1/6] more code --- Cropbox.php | 88 ++--- CropboxAsset.php | 17 +- MouseWheelAsset.php | 25 -- WidgetAsset.php | 7 +- assets/{style.css => cropbox.css} | 2 +- assets/cropbox.js | 17 + composer.json | 10 +- composer.lock | 569 ++++++++++++++++++++++++++++++ views/field.php | 13 +- 9 files changed, 628 insertions(+), 120 deletions(-) delete mode 100644 MouseWheelAsset.php rename assets/{style.css => cropbox.css} (99%) create mode 100644 assets/cropbox.js create mode 100644 composer.lock diff --git a/Cropbox.php b/Cropbox.php index 29685f4..ac14d9c 100755 --- a/Cropbox.php +++ b/Cropbox.php @@ -3,51 +3,28 @@ namespace bupy7\cropbox; use Yii; -use yii\base\Widget; +use yii\widgets\InputWidget; use yii\helpers\Html; use yii\helpers\Json; use yii\web\View; -use yii\base\Model; use yii\base\InvalidConfigException; /** - * Class file CropboxWidget. - * Crop image via jQuery before upload image. - * - * GitHub repository this widget: https://github.com/bupy7/yii2-widget-cropbox - * * @author Vasilij "BuPy7" Belosludcev http://mihaly4.ru * @since 1.0.0 */ -class Cropbox extends Widget +class Cropbox extends InputWidget { - /** - * @var Model the data model that this widget is associated with. - */ - public $model; - /** - * @var string the model attribute that this widget is associated with. - */ - public $attribute; - /** - * @var string the input name. This must be set if [[model]] and [[attribute]] are not set. - */ - public $name; - /** - * @var array the HTML attributes for the input tag. - * @see \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered. - */ - public $options = []; /** * @var array Attribute name that content information about crop image. */ public $attributeCropInfo; /** - * @var array Options of jQuery plugin. + * @var array Options of js-cropbox plugin. */ public $pluginOptions = []; /** - * @string URL to image for display before upload to original URL. + * @var string URL to image for display before upload to original URL. */ public $originalImageUrl; /** @@ -63,58 +40,41 @@ class Cropbox extends Widget */ public $previewImagesUrl; /** - * @var string Path to view of cropbox field. - * - * Example: '@app/path/to/view' + * @var string Path to view of cropbox field. Example: '@app/path/to/view' */ public $pathToView = 'field'; /** - * @inheritdoc * @throws InvalidConfigException */ public function init() { - if ($this->name === null && !$this->hasModel()) { - throw new InvalidConfigException("Either 'name', or 'model' and 'attribute' properties must be specified."); - } - if (!isset($this->options['id'])) { - $this->options['id'] = $this->hasModel() ? Html::getInputId($this->model, $this->attribute) : false; - } - parent::init(); - + parent::init(); WidgetAsset::register($this->view); - $this->registerTranslations(); - - $this->options = array_merge([ - 'accept' => 'image/*', - ], $this->options); + $this->registerTranslations(); + $this->options = array_merge(['accept' => 'image/*'], $this->options); $this->pluginOptions = array_merge([ 'selectors' => [ - 'inputFile' => '#' . $this->id . ' input[type="file"]', - 'btnCrop' => '#' . $this->id . ' .btn-crop', - 'btnReset' => '#' . $this->id . ' .btn-reset', - 'resultContainer' => '#' . $this->id . ' .cropped', - 'messageBlock' => '#' . $this->id . ' .alert', + 'inputFile' => sprintf('#%s input[type="file"]', $this->id), + 'btnCrop' => sprintf('#%s .btn-crop', $this->id), + 'btnReset' => sprintf('#%s .btn-reset', $this->id), + 'resultContainer' => sprintf('#%s .cropped', $this->id), + 'messageBlock' => sprintf('#%s .alert', $this->id), ], 'imageOptions' => [ 'class' => 'img-thumbnail', ], ], $this->pluginOptions); - $this->pluginOptions['selectors']['inputInfo'] = '#' - . $this->id - . ' input[name="' - . Html::getInputName($this->model, $this->attributeCropInfo) - . '"]'; - $optionsCropbox = Json::encode($this->pluginOptions); - - $js = "$('#{$this->id}').cropbox({$optionsCropbox});"; + $inputInfoName = $this->attributeCropInfo; + if ($this->hasModel()) { + $inputInfoName = Html::getInputName($this->model, $inputInfoName); + } + $this->pluginOptions['selectors']['inputInfo'] = sprintf('#%s input[name="%s"]', $this->id, $inputInfoName); + $optionsCropbox = Json::encode($this->pluginOptions); + $js = "$('#{$this->options['id']}').cropbox({$optionsCropbox});"; $this->view->registerJs($js, View::POS_READY); } - /** - * @inheritdoc - */ public function run() { return $this->render($this->pathToView); @@ -148,12 +108,4 @@ protected function registerTranslations() ], ]; } - - /** - * @return boolean whether this widget is associated with a data model. - */ - protected function hasModel() - { - return $this->model instanceof Model && $this->attribute !== null; - } } diff --git a/CropboxAsset.php b/CropboxAsset.php index 0b35504..7da6712 100644 --- a/CropboxAsset.php +++ b/CropboxAsset.php @@ -5,27 +5,16 @@ use yii\web\AssetBundle; /** - * Assets of jQuery plugin 'jq-cropbox'. - * - * HomePage: {@link https://github.com/bupy7/jquery-cropbox}. - * * @author Vasilij Belosludcev * @since 1.0.0 */ class CropboxAsset extends AssetBundle { - public $depends = [ - 'bupy7\cropbox\MouseWheelAsset', - ]; - - /** - * @inheritdoc - */ public function init() { - $this->sourcePath = '@bower/jq-cropbox/' . (!YII_DEBUG ? 'dist' : 'src'); - $this->css = ['jquery.cropbox' . (!YII_DEBUG ? '.min' : '') . '.css']; - $this->js = ['jquery.cropbox' . (!YII_DEBUG ? '.min' : '') . '.js']; + $this->sourcePath = '@bower/js-cropbox/build'; + $this->css = ['cropbox' . (!YII_DEBUG ? '.min' : '') . '.css']; + $this->js = ['cropbox' . (!YII_DEBUG ? '.min' : '') . '.js']; parent::init(); } } diff --git a/MouseWheelAsset.php b/MouseWheelAsset.php deleted file mode 100644 index 9276f43..0000000 --- a/MouseWheelAsset.php +++ /dev/null @@ -1,25 +0,0 @@ - - * @since 4.0.0 - */ -class MouseWheelAsset extends AssetBundle -{ - public $sourcePath = '@bower/jquery-mousewheel'; - public $js = [ - 'jquery.mousewheel.min.js', - ]; - public $depends = [ - 'yii\web\YiiAsset', - 'yii\bootstrap\BootstrapPluginAsset', - ]; -} diff --git a/WidgetAsset.php b/WidgetAsset.php index 69c8006..bd9195b 100644 --- a/WidgetAsset.php +++ b/WidgetAsset.php @@ -5,8 +5,6 @@ use yii\web\AssetBundle; /** - * Core assets of widget. - * * @author Belosludcev Vasilij * @since 4.0.0 */ @@ -14,7 +12,10 @@ class WidgetAsset extends AssetBundle { public $sourcePath = '@bupy7/cropbox/assets'; public $css = [ - 'style.css', + 'cropbox.css', + ]; + public $js = [ + 'cropbox.css', ]; public $depends = [ 'bupy7\cropbox\CropboxAsset', diff --git a/assets/style.css b/assets/cropbox.css similarity index 99% rename from assets/style.css rename to assets/cropbox.css index 267f854..d6e84c7 100755 --- a/assets/style.css +++ b/assets/cropbox.css @@ -25,4 +25,4 @@ div.cropbox .cropped { div.cropbox .img-thumbnail { margin-right: 5px; margin-bottom: 5px; -} \ No newline at end of file +} diff --git a/assets/cropbox.js b/assets/cropbox.js new file mode 100644 index 0000000..d7a9334 --- /dev/null +++ b/assets/cropbox.js @@ -0,0 +1,17 @@ +(function($, Cropbox) { + $.fn.cropbox = function(options) { + this.each(function() { + console.log(this); + }); +// if (typeof options === 'string') { +// var method = options.replace(/^[_]*/, ''); +// if (Cropbox.prototype[method]) { +// //return Cropbox.apply(this, Array.prototype.slice.call(arguments, 1)); +// } +// } else if (typeof options === 'object' || ! options) { +// return .init.apply(this, arguments); +// } else { +// $.error('Method "' + options + '" not exists.'); +// } + }; +})(jQuery, Cropbox); diff --git a/composer.json b/composer.json index 4c3764b..9fe02a9 100644 --- a/composer.json +++ b/composer.json @@ -1,11 +1,11 @@ { "name": "bupy7/yii2-widget-cropbox", - "description": "This is widget wrapper of https://github.com/bupy7/jquery-cropbox. This widget allows crop image before upload to server and send informations about crop in JSON format.", - "keywords": ["yii2", "extension", "widget", "crop image", "image"], + "description": "This is widget wrapper of https://github.com/bupy7/js-cropbox. This widget allows crop image before to upload to server and send informations about crop as JSON string.", + "keywords": ["yii2", "extension", "widget", "crop", "image"], "homepage": "https://github.com/bupy7/yii2-widget-cropbox", - "version": "4.1.1", + "version": "5.0.0", "type": "yii2-extension", - "license": "BSD 3-Clause", + "license": "BSD-3-Clause", "authors": [ { "name": "Vasilij Belosludcev", @@ -16,7 +16,7 @@ "minimum-stability": "stable", "require": { "yiisoft/yii2-bootstrap": "*", - "bower-asset/jq-cropbox": "1.0.*" + "bower-asset/js-cropbox": "0.9.1" }, "autoload": { "psr-4": { diff --git a/composer.lock b/composer.lock new file mode 100644 index 0000000..5a8ae84 --- /dev/null +++ b/composer.lock @@ -0,0 +1,569 @@ +{ + "_readme": [ + "This file locks the dependencies of your project to a known state", + "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file", + "This file is @generated automatically" + ], + "hash": "502105d0f48aa2bf0032d36b55b4155b", + "content-hash": "fdfeabcd616abce5d87f8d1c5096d153", + "packages": [ + { + "name": "bower-asset/bootstrap", + "version": "v3.3.7", + "source": { + "type": "git", + "url": "https://github.com/twbs/bootstrap.git", + "reference": "0b9c4a4007c44201dce9a6cc1a38407005c26c86" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/twbs/bootstrap/zipball/0b9c4a4007c44201dce9a6cc1a38407005c26c86", + "reference": "0b9c4a4007c44201dce9a6cc1a38407005c26c86", + "shasum": "" + }, + "require": { + "bower-asset/jquery": ">=1.9.1,<4.0" + }, + "type": "bower-asset-library", + "extra": { + "bower-asset-main": [ + "less/bootstrap.less", + "dist/js/bootstrap.js" + ], + "bower-asset-ignore": [ + "/.*", + "_config.yml", + "CNAME", + "composer.json", + "CONTRIBUTING.md", + "docs", + "js/tests", + "test-infra" + ] + }, + "license": [ + "MIT" + ], + "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.", + "keywords": [ + "css", + "framework", + "front-end", + "js", + "less", + "mobile-first", + "responsive", + "web" + ] + }, + { + "name": "bower-asset/jquery", + "version": "2.2.4", + "source": { + "type": "git", + "url": "https://github.com/jquery/jquery-dist.git", + "reference": "c0185ab7c75aab88762c5aae780b9d83b80eda72" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/jquery/jquery-dist/zipball/c0185ab7c75aab88762c5aae780b9d83b80eda72", + "reference": "c0185ab7c75aab88762c5aae780b9d83b80eda72", + "shasum": "" + }, + "type": "bower-asset-library", + "extra": { + "bower-asset-main": "dist/jquery.js", + "bower-asset-ignore": [ + "package.json" + ] + }, + "license": [ + "MIT" + ], + "keywords": [ + "browser", + "javascript", + "jquery", + "library" + ] + }, + { + "name": "bower-asset/jquery.inputmask", + "version": "3.3.5", + "source": { + "type": "git", + "url": "https://github.com/RobinHerbots/Inputmask.git", + "reference": "ed27356d1b22366be48c4e7b8d038b9649bd4ab0" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/RobinHerbots/Inputmask/zipball/ed27356d1b22366be48c4e7b8d038b9649bd4ab0", + "reference": "ed27356d1b22366be48c4e7b8d038b9649bd4ab0", + "shasum": "" + }, + "require": { + "bower-asset/jquery": ">=1.7" + }, + "type": "bower-asset-library", + "extra": { + "bower-asset-main": [ + "./dist/inputmask/inputmask.js", + "./dist/inputmask/inputmask.extensions.js", + "./dist/inputmask/inputmask.date.extensions.js", + "./dist/inputmask/inputmask.numeric.extensions.js", + "./dist/inputmask/inputmask.phone.extensions.js", + "./dist/inputmask/inputmask.regex.extensions.js", + "./dist/inputmask/jquery.inputmask.js", + "./dist/inputmask/global/document.js", + "./dist/inputmask/global/window.js", + "./dist/inputmask/phone-codes/phone.js", + "./dist/inputmask/phone-codes/phone-be.js", + "./dist/inputmask/phone-codes/phone-nl.js", + "./dist/inputmask/phone-codes/phone-ru.js", + "./dist/inputmask/phone-codes/phone-uk.js", + "./dist/inputmask/dependencyLibs/inputmask.dependencyLib.jqlite.js", + "./dist/inputmask/dependencyLibs/inputmask.dependencyLib.jquery.js", + "./dist/inputmask/dependencyLibs/inputmask.dependencyLib.js", + "./dist/inputmask/bindings/inputmask.binding.js" + ], + "bower-asset-ignore": [ + "**/*", + "!dist/*", + "!dist/inputmask/*", + "!dist/min/*", + "!dist/min/inputmask/*" + ] + }, + "license": [ + "http://opensource.org/licenses/mit-license.php" + ], + "description": "jquery.inputmask is a jquery plugin which create an input mask.", + "keywords": [ + "form", + "input", + "inputmask", + "jquery", + "mask", + "plugins" + ] + }, + { + "name": "bower-asset/js-cropbox", + "version": "0.9.1", + "source": { + "type": "git", + "url": "https://github.com/bupy7/js-cropbox.git", + "reference": "fa2efd19b0c7a7832bf5656a3c50a21759fca71e" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/bupy7/js-cropbox/zipball/fa2efd19b0c7a7832bf5656a3c50a21759fca71e", + "reference": "fa2efd19b0c7a7832bf5656a3c50a21759fca71e", + "shasum": "" + }, + "type": "bower-asset-library", + "extra": { + "bower-asset-main": "build/cropbox.js", + "bower-asset-ignore": [ + "**/.*", + "node_modules", + "bower_components", + "tests", + "karma.conf.js", + "package.json", + "Gruntfile.js" + ] + }, + "license": [ + "BSD-3-Clause" + ], + "description": "A lightweight and simple js extension to crop your image.", + "keywords": [ + "cropbox", + "extensions", + "image", + "javascript", + "js", + "module", + "plugin" + ] + }, + { + "name": "bower-asset/punycode", + "version": "v1.3.2", + "source": { + "type": "git", + "url": "https://github.com/bestiejs/punycode.js.git", + "reference": "38c8d3131a82567bfef18da09f7f4db68c84f8a3" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/bestiejs/punycode.js/zipball/38c8d3131a82567bfef18da09f7f4db68c84f8a3", + "reference": "38c8d3131a82567bfef18da09f7f4db68c84f8a3", + "shasum": "" + }, + "type": "bower-asset-library", + "extra": { + "bower-asset-main": "punycode.js", + "bower-asset-ignore": [ + "coverage", + "tests", + ".*", + "component.json", + "Gruntfile.js", + "node_modules", + "package.json" + ] + } + }, + { + "name": "bower-asset/yii2-pjax", + "version": "v2.0.6", + "source": { + "type": "git", + "url": "https://github.com/yiisoft/jquery-pjax.git", + "reference": "60728da6ade5879e807a49ce59ef9a72039b8978" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/yiisoft/jquery-pjax/zipball/60728da6ade5879e807a49ce59ef9a72039b8978", + "reference": "60728da6ade5879e807a49ce59ef9a72039b8978", + "shasum": "" + }, + "require": { + "bower-asset/jquery": ">=1.8" + }, + "type": "bower-asset-library", + "extra": { + "bower-asset-main": "./jquery.pjax.js", + "bower-asset-ignore": [ + ".travis.yml", + "Gemfile", + "Gemfile.lock", + "CONTRIBUTING.md", + "vendor/", + "script/", + "test/" + ] + }, + "license": [ + "MIT" + ] + }, + { + "name": "cebe/markdown", + "version": "1.1.1", + "source": { + "type": "git", + "url": "https://github.com/cebe/markdown.git", + "reference": "c30eb5e01fe021cc5bba2f9ee0eeef96d4931166" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/cebe/markdown/zipball/c30eb5e01fe021cc5bba2f9ee0eeef96d4931166", + "reference": "c30eb5e01fe021cc5bba2f9ee0eeef96d4931166", + "shasum": "" + }, + "require": { + "lib-pcre": "*", + "php": ">=5.4.0" + }, + "require-dev": { + "cebe/indent": "*", + "facebook/xhprof": "*@dev", + "phpunit/phpunit": "4.1.*" + }, + "bin": [ + "bin/markdown" + ], + "type": "library", + "extra": { + "branch-alias": { + "dev-master": "1.1.x-dev" + } + }, + "autoload": { + "psr-4": { + "cebe\\markdown\\": "" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Carsten Brandt", + "email": "mail@cebe.cc", + "homepage": "http://cebe.cc/", + "role": "Creator" + } + ], + "description": "A super fast, highly extensible markdown parser for PHP", + "homepage": "https://github.com/cebe/markdown#readme", + "keywords": [ + "extensible", + "fast", + "gfm", + "markdown", + "markdown-extra" + ], + "time": "2016-09-14 20:40:20" + }, + { + "name": "ezyang/htmlpurifier", + "version": "v4.9.2", + "source": { + "type": "git", + "url": "https://github.com/ezyang/htmlpurifier.git", + "reference": "6d50e5282afdfdfc3e0ff6d192aff56c5629b3d4" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/ezyang/htmlpurifier/zipball/6d50e5282afdfdfc3e0ff6d192aff56c5629b3d4", + "reference": "6d50e5282afdfdfc3e0ff6d192aff56c5629b3d4", + "shasum": "" + }, + "require": { + "php": ">=5.2" + }, + "require-dev": { + "simpletest/simpletest": "^1.1" + }, + "type": "library", + "autoload": { + "psr-0": { + "HTMLPurifier": "library/" + }, + "files": [ + "library/HTMLPurifier.composer.php" + ] + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "LGPL" + ], + "authors": [ + { + "name": "Edward Z. Yang", + "email": "admin@htmlpurifier.org", + "homepage": "http://ezyang.com" + } + ], + "description": "Standards compliant HTML filter written in PHP", + "homepage": "http://htmlpurifier.org/", + "keywords": [ + "html" + ], + "time": "2017-03-13 06:30:53" + }, + { + "name": "yiisoft/yii2", + "version": "2.0.11.2", + "source": { + "type": "git", + "url": "https://github.com/yiisoft/yii2-framework.git", + "reference": "ee996adec1dfd7babb67bd0c604f5bd6425fe5ab" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/yiisoft/yii2-framework/zipball/ee996adec1dfd7babb67bd0c604f5bd6425fe5ab", + "reference": "ee996adec1dfd7babb67bd0c604f5bd6425fe5ab", + "shasum": "" + }, + "require": { + "bower-asset/jquery": "2.2.*@stable | 2.1.*@stable | 1.11.*@stable | 1.12.*@stable", + "bower-asset/jquery.inputmask": "~3.2.2 | ~3.3.3", + "bower-asset/punycode": "1.3.*", + "bower-asset/yii2-pjax": "~2.0.1", + "cebe/markdown": "~1.0.0 | ~1.1.0", + "ext-ctype": "*", + "ext-mbstring": "*", + "ezyang/htmlpurifier": "~4.6", + "lib-pcre": "*", + "php": ">=5.4.0", + "yiisoft/yii2-composer": "~2.0.4" + }, + "bin": [ + "yii" + ], + "type": "library", + "extra": { + "branch-alias": { + "dev-master": "2.0.x-dev" + } + }, + "autoload": { + "psr-4": { + "yii\\": "" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "BSD-3-Clause" + ], + "authors": [ + { + "name": "Qiang Xue", + "email": "qiang.xue@gmail.com", + "homepage": "http://www.yiiframework.com/", + "role": "Founder and project lead" + }, + { + "name": "Alexander Makarov", + "email": "sam@rmcreative.ru", + "homepage": "http://rmcreative.ru/", + "role": "Core framework development" + }, + { + "name": "Maurizio Domba", + "homepage": "http://mdomba.info/", + "role": "Core framework development" + }, + { + "name": "Carsten Brandt", + "email": "mail@cebe.cc", + "homepage": "http://cebe.cc/", + "role": "Core framework development" + }, + { + "name": "Timur Ruziev", + "email": "resurtm@gmail.com", + "homepage": "http://resurtm.com/", + "role": "Core framework development" + }, + { + "name": "Paul Klimov", + "email": "klimov.paul@gmail.com", + "role": "Core framework development" + }, + { + "name": "Dmitry Naumenko", + "email": "d.naumenko.a@gmail.com", + "role": "Core framework development" + }, + { + "name": "Boudewijn Vahrmeijer", + "email": "info@dynasource.eu", + "homepage": "http://dynasource.eu", + "role": "Core framework development" + } + ], + "description": "Yii PHP Framework Version 2", + "homepage": "http://www.yiiframework.com/", + "keywords": [ + "framework", + "yii2" + ], + "time": "2017-02-08 09:04:32" + }, + { + "name": "yiisoft/yii2-bootstrap", + "version": "2.0.6", + "source": { + "type": "git", + "url": "https://github.com/yiisoft/yii2-bootstrap.git", + "reference": "3fd2b8c950cce79d60e9702d6bcb24eb3c80f6c5" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/yiisoft/yii2-bootstrap/zipball/3fd2b8c950cce79d60e9702d6bcb24eb3c80f6c5", + "reference": "3fd2b8c950cce79d60e9702d6bcb24eb3c80f6c5", + "shasum": "" + }, + "require": { + "bower-asset/bootstrap": "3.3.* | 3.2.* | 3.1.*", + "yiisoft/yii2": ">=2.0.6" + }, + "type": "yii2-extension", + "extra": { + "branch-alias": { + "dev-master": "2.0.x-dev" + }, + "asset-installer-paths": { + "npm-asset-library": "vendor/npm", + "bower-asset-library": "vendor/bower" + } + }, + "autoload": { + "psr-4": { + "yii\\bootstrap\\": "" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "BSD-3-Clause" + ], + "authors": [ + { + "name": "Qiang Xue", + "email": "qiang.xue@gmail.com" + } + ], + "description": "The Twitter Bootstrap extension for the Yii framework", + "keywords": [ + "bootstrap", + "yii2" + ], + "time": "2016-03-17 03:29:28" + }, + { + "name": "yiisoft/yii2-composer", + "version": "2.0.5", + "source": { + "type": "git", + "url": "https://github.com/yiisoft/yii2-composer.git", + "reference": "3f4923c2bde6caf3f5b88cc22fdd5770f52f8df2" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/yiisoft/yii2-composer/zipball/3f4923c2bde6caf3f5b88cc22fdd5770f52f8df2", + "reference": "3f4923c2bde6caf3f5b88cc22fdd5770f52f8df2", + "shasum": "" + }, + "require": { + "composer-plugin-api": "^1.0" + }, + "require-dev": { + "composer/composer": "^1.0" + }, + "type": "composer-plugin", + "extra": { + "class": "yii\\composer\\Plugin", + "branch-alias": { + "dev-master": "2.0.x-dev" + } + }, + "autoload": { + "psr-4": { + "yii\\composer\\": "" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "BSD-3-Clause" + ], + "authors": [ + { + "name": "Qiang Xue", + "email": "qiang.xue@gmail.com" + } + ], + "description": "The composer plugin for Yii extension installer", + "keywords": [ + "composer", + "extension installer", + "yii2" + ], + "time": "2016-12-20 13:26:02" + } + ], + "packages-dev": [], + "aliases": [], + "minimum-stability": "stable", + "stability-flags": [], + "prefer-stable": false, + "prefer-lowest": false, + "platform": [], + "platform-dev": [] +} diff --git a/views/field.php b/views/field.php index 87f426e..d71d315 100755 --- a/views/field.php +++ b/views/field.php @@ -3,7 +3,7 @@ use yii\helpers\Html; use bupy7\cropbox\Cropbox; ?> -
+
@@ -16,9 +16,14 @@
- ' - . Cropbox::t('Browse') - . Html::activeFileInput($this->context->model, $this->context->attribute, $this->context->options); ?> + ' . Cropbox::t('Browse'); + if ($this->context->hasModel()) { + echo Html::activeFileInput($this->context->model, $this->context->attribute, $this->context->options); + } else { + echo Html::fileInput($this->context->name, $this->context->value, $this->context->options); + } + ?> ' . Cropbox::t('Crop'), [ 'class' => 'btn btn-success btn-crop', From 41885eafecd8a03f42e86de98ce6aedcb578a574 Mon Sep 17 00:00:00 2001 From: Vasilij Belosludcev Date: Tue, 2 May 2017 15:52:45 +0500 Subject: [PATCH 2/6] #37 --- Cropbox.php | 1 + CropboxAsset.php => assets/CropboxAsset.php | 4 +- WidgetAsset.php => assets/WidgetAsset.php | 12 +- composer.lock | 569 -------------------- {assets => resources}/cropbox.css | 8 +- {assets => resources}/cropbox.js | 0 views/field.php | 10 +- 7 files changed, 19 insertions(+), 585 deletions(-) rename CropboxAsset.php => assets/CropboxAsset.php (89%) rename WidgetAsset.php => assets/WidgetAsset.php (51%) delete mode 100644 composer.lock rename {assets => resources}/cropbox.css (74%) rename {assets => resources}/cropbox.js (100%) diff --git a/Cropbox.php b/Cropbox.php index ac14d9c..2c52177 100755 --- a/Cropbox.php +++ b/Cropbox.php @@ -8,6 +8,7 @@ use yii\helpers\Json; use yii\web\View; use yii\base\InvalidConfigException; +use bupy7\cropbox\assets\WidgetAsset; /** * @author Vasilij "BuPy7" Belosludcev http://mihaly4.ru diff --git a/CropboxAsset.php b/assets/CropboxAsset.php similarity index 89% rename from CropboxAsset.php rename to assets/CropboxAsset.php index 7da6712..27f066e 100644 --- a/CropboxAsset.php +++ b/assets/CropboxAsset.php @@ -1,12 +1,12 @@ - * @since 1.0.0 + * @since 5.0.0 */ class CropboxAsset extends AssetBundle { diff --git a/WidgetAsset.php b/assets/WidgetAsset.php similarity index 51% rename from WidgetAsset.php rename to assets/WidgetAsset.php index bd9195b..7ce1c9f 100644 --- a/WidgetAsset.php +++ b/assets/WidgetAsset.php @@ -1,24 +1,26 @@ - * @since 4.0.0 + * @since 5.0.0 */ class WidgetAsset extends AssetBundle { - public $sourcePath = '@bupy7/cropbox/assets'; + public $sourcePath = '@bupy7/cropbox/resources'; public $css = [ 'cropbox.css', ]; public $js = [ - 'cropbox.css', + 'cropbox.js', ]; public $depends = [ - 'bupy7\cropbox\CropboxAsset', + 'yii\web\JqueryAsset', + 'yii\bootstrap\BootstrapAsset', + 'bupy7\cropbox\assets\CropboxAsset', ]; } diff --git a/composer.lock b/composer.lock deleted file mode 100644 index 5a8ae84..0000000 --- a/composer.lock +++ /dev/null @@ -1,569 +0,0 @@ -{ - "_readme": [ - "This file locks the dependencies of your project to a known state", - "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file", - "This file is @generated automatically" - ], - "hash": "502105d0f48aa2bf0032d36b55b4155b", - "content-hash": "fdfeabcd616abce5d87f8d1c5096d153", - "packages": [ - { - "name": "bower-asset/bootstrap", - "version": "v3.3.7", - "source": { - "type": "git", - "url": "https://github.com/twbs/bootstrap.git", - "reference": "0b9c4a4007c44201dce9a6cc1a38407005c26c86" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/twbs/bootstrap/zipball/0b9c4a4007c44201dce9a6cc1a38407005c26c86", - "reference": "0b9c4a4007c44201dce9a6cc1a38407005c26c86", - "shasum": "" - }, - "require": { - "bower-asset/jquery": ">=1.9.1,<4.0" - }, - "type": "bower-asset-library", - "extra": { - "bower-asset-main": [ - "less/bootstrap.less", - "dist/js/bootstrap.js" - ], - "bower-asset-ignore": [ - "/.*", - "_config.yml", - "CNAME", - "composer.json", - "CONTRIBUTING.md", - "docs", - "js/tests", - "test-infra" - ] - }, - "license": [ - "MIT" - ], - "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.", - "keywords": [ - "css", - "framework", - "front-end", - "js", - "less", - "mobile-first", - "responsive", - "web" - ] - }, - { - "name": "bower-asset/jquery", - "version": "2.2.4", - "source": { - "type": "git", - "url": "https://github.com/jquery/jquery-dist.git", - "reference": "c0185ab7c75aab88762c5aae780b9d83b80eda72" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/jquery/jquery-dist/zipball/c0185ab7c75aab88762c5aae780b9d83b80eda72", - "reference": "c0185ab7c75aab88762c5aae780b9d83b80eda72", - "shasum": "" - }, - "type": "bower-asset-library", - "extra": { - "bower-asset-main": "dist/jquery.js", - "bower-asset-ignore": [ - "package.json" - ] - }, - "license": [ - "MIT" - ], - "keywords": [ - "browser", - "javascript", - "jquery", - "library" - ] - }, - { - "name": "bower-asset/jquery.inputmask", - "version": "3.3.5", - "source": { - "type": "git", - "url": "https://github.com/RobinHerbots/Inputmask.git", - "reference": "ed27356d1b22366be48c4e7b8d038b9649bd4ab0" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/RobinHerbots/Inputmask/zipball/ed27356d1b22366be48c4e7b8d038b9649bd4ab0", - "reference": "ed27356d1b22366be48c4e7b8d038b9649bd4ab0", - "shasum": "" - }, - "require": { - "bower-asset/jquery": ">=1.7" - }, - "type": "bower-asset-library", - "extra": { - "bower-asset-main": [ - "./dist/inputmask/inputmask.js", - "./dist/inputmask/inputmask.extensions.js", - "./dist/inputmask/inputmask.date.extensions.js", - "./dist/inputmask/inputmask.numeric.extensions.js", - "./dist/inputmask/inputmask.phone.extensions.js", - "./dist/inputmask/inputmask.regex.extensions.js", - "./dist/inputmask/jquery.inputmask.js", - "./dist/inputmask/global/document.js", - "./dist/inputmask/global/window.js", - "./dist/inputmask/phone-codes/phone.js", - "./dist/inputmask/phone-codes/phone-be.js", - "./dist/inputmask/phone-codes/phone-nl.js", - "./dist/inputmask/phone-codes/phone-ru.js", - "./dist/inputmask/phone-codes/phone-uk.js", - "./dist/inputmask/dependencyLibs/inputmask.dependencyLib.jqlite.js", - "./dist/inputmask/dependencyLibs/inputmask.dependencyLib.jquery.js", - "./dist/inputmask/dependencyLibs/inputmask.dependencyLib.js", - "./dist/inputmask/bindings/inputmask.binding.js" - ], - "bower-asset-ignore": [ - "**/*", - "!dist/*", - "!dist/inputmask/*", - "!dist/min/*", - "!dist/min/inputmask/*" - ] - }, - "license": [ - "http://opensource.org/licenses/mit-license.php" - ], - "description": "jquery.inputmask is a jquery plugin which create an input mask.", - "keywords": [ - "form", - "input", - "inputmask", - "jquery", - "mask", - "plugins" - ] - }, - { - "name": "bower-asset/js-cropbox", - "version": "0.9.1", - "source": { - "type": "git", - "url": "https://github.com/bupy7/js-cropbox.git", - "reference": "fa2efd19b0c7a7832bf5656a3c50a21759fca71e" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/bupy7/js-cropbox/zipball/fa2efd19b0c7a7832bf5656a3c50a21759fca71e", - "reference": "fa2efd19b0c7a7832bf5656a3c50a21759fca71e", - "shasum": "" - }, - "type": "bower-asset-library", - "extra": { - "bower-asset-main": "build/cropbox.js", - "bower-asset-ignore": [ - "**/.*", - "node_modules", - "bower_components", - "tests", - "karma.conf.js", - "package.json", - "Gruntfile.js" - ] - }, - "license": [ - "BSD-3-Clause" - ], - "description": "A lightweight and simple js extension to crop your image.", - "keywords": [ - "cropbox", - "extensions", - "image", - "javascript", - "js", - "module", - "plugin" - ] - }, - { - "name": "bower-asset/punycode", - "version": "v1.3.2", - "source": { - "type": "git", - "url": "https://github.com/bestiejs/punycode.js.git", - "reference": "38c8d3131a82567bfef18da09f7f4db68c84f8a3" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/bestiejs/punycode.js/zipball/38c8d3131a82567bfef18da09f7f4db68c84f8a3", - "reference": "38c8d3131a82567bfef18da09f7f4db68c84f8a3", - "shasum": "" - }, - "type": "bower-asset-library", - "extra": { - "bower-asset-main": "punycode.js", - "bower-asset-ignore": [ - "coverage", - "tests", - ".*", - "component.json", - "Gruntfile.js", - "node_modules", - "package.json" - ] - } - }, - { - "name": "bower-asset/yii2-pjax", - "version": "v2.0.6", - "source": { - "type": "git", - "url": "https://github.com/yiisoft/jquery-pjax.git", - "reference": "60728da6ade5879e807a49ce59ef9a72039b8978" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/yiisoft/jquery-pjax/zipball/60728da6ade5879e807a49ce59ef9a72039b8978", - "reference": "60728da6ade5879e807a49ce59ef9a72039b8978", - "shasum": "" - }, - "require": { - "bower-asset/jquery": ">=1.8" - }, - "type": "bower-asset-library", - "extra": { - "bower-asset-main": "./jquery.pjax.js", - "bower-asset-ignore": [ - ".travis.yml", - "Gemfile", - "Gemfile.lock", - "CONTRIBUTING.md", - "vendor/", - "script/", - "test/" - ] - }, - "license": [ - "MIT" - ] - }, - { - "name": "cebe/markdown", - "version": "1.1.1", - "source": { - "type": "git", - "url": "https://github.com/cebe/markdown.git", - "reference": "c30eb5e01fe021cc5bba2f9ee0eeef96d4931166" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/cebe/markdown/zipball/c30eb5e01fe021cc5bba2f9ee0eeef96d4931166", - "reference": "c30eb5e01fe021cc5bba2f9ee0eeef96d4931166", - "shasum": "" - }, - "require": { - "lib-pcre": "*", - "php": ">=5.4.0" - }, - "require-dev": { - "cebe/indent": "*", - "facebook/xhprof": "*@dev", - "phpunit/phpunit": "4.1.*" - }, - "bin": [ - "bin/markdown" - ], - "type": "library", - "extra": { - "branch-alias": { - "dev-master": "1.1.x-dev" - } - }, - "autoload": { - "psr-4": { - "cebe\\markdown\\": "" - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "Carsten Brandt", - "email": "mail@cebe.cc", - "homepage": "http://cebe.cc/", - "role": "Creator" - } - ], - "description": "A super fast, highly extensible markdown parser for PHP", - "homepage": "https://github.com/cebe/markdown#readme", - "keywords": [ - "extensible", - "fast", - "gfm", - "markdown", - "markdown-extra" - ], - "time": "2016-09-14 20:40:20" - }, - { - "name": "ezyang/htmlpurifier", - "version": "v4.9.2", - "source": { - "type": "git", - "url": "https://github.com/ezyang/htmlpurifier.git", - "reference": "6d50e5282afdfdfc3e0ff6d192aff56c5629b3d4" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/ezyang/htmlpurifier/zipball/6d50e5282afdfdfc3e0ff6d192aff56c5629b3d4", - "reference": "6d50e5282afdfdfc3e0ff6d192aff56c5629b3d4", - "shasum": "" - }, - "require": { - "php": ">=5.2" - }, - "require-dev": { - "simpletest/simpletest": "^1.1" - }, - "type": "library", - "autoload": { - "psr-0": { - "HTMLPurifier": "library/" - }, - "files": [ - "library/HTMLPurifier.composer.php" - ] - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "LGPL" - ], - "authors": [ - { - "name": "Edward Z. Yang", - "email": "admin@htmlpurifier.org", - "homepage": "http://ezyang.com" - } - ], - "description": "Standards compliant HTML filter written in PHP", - "homepage": "http://htmlpurifier.org/", - "keywords": [ - "html" - ], - "time": "2017-03-13 06:30:53" - }, - { - "name": "yiisoft/yii2", - "version": "2.0.11.2", - "source": { - "type": "git", - "url": "https://github.com/yiisoft/yii2-framework.git", - "reference": "ee996adec1dfd7babb67bd0c604f5bd6425fe5ab" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/yiisoft/yii2-framework/zipball/ee996adec1dfd7babb67bd0c604f5bd6425fe5ab", - "reference": "ee996adec1dfd7babb67bd0c604f5bd6425fe5ab", - "shasum": "" - }, - "require": { - "bower-asset/jquery": "2.2.*@stable | 2.1.*@stable | 1.11.*@stable | 1.12.*@stable", - "bower-asset/jquery.inputmask": "~3.2.2 | ~3.3.3", - "bower-asset/punycode": "1.3.*", - "bower-asset/yii2-pjax": "~2.0.1", - "cebe/markdown": "~1.0.0 | ~1.1.0", - "ext-ctype": "*", - "ext-mbstring": "*", - "ezyang/htmlpurifier": "~4.6", - "lib-pcre": "*", - "php": ">=5.4.0", - "yiisoft/yii2-composer": "~2.0.4" - }, - "bin": [ - "yii" - ], - "type": "library", - "extra": { - "branch-alias": { - "dev-master": "2.0.x-dev" - } - }, - "autoload": { - "psr-4": { - "yii\\": "" - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "BSD-3-Clause" - ], - "authors": [ - { - "name": "Qiang Xue", - "email": "qiang.xue@gmail.com", - "homepage": "http://www.yiiframework.com/", - "role": "Founder and project lead" - }, - { - "name": "Alexander Makarov", - "email": "sam@rmcreative.ru", - "homepage": "http://rmcreative.ru/", - "role": "Core framework development" - }, - { - "name": "Maurizio Domba", - "homepage": "http://mdomba.info/", - "role": "Core framework development" - }, - { - "name": "Carsten Brandt", - "email": "mail@cebe.cc", - "homepage": "http://cebe.cc/", - "role": "Core framework development" - }, - { - "name": "Timur Ruziev", - "email": "resurtm@gmail.com", - "homepage": "http://resurtm.com/", - "role": "Core framework development" - }, - { - "name": "Paul Klimov", - "email": "klimov.paul@gmail.com", - "role": "Core framework development" - }, - { - "name": "Dmitry Naumenko", - "email": "d.naumenko.a@gmail.com", - "role": "Core framework development" - }, - { - "name": "Boudewijn Vahrmeijer", - "email": "info@dynasource.eu", - "homepage": "http://dynasource.eu", - "role": "Core framework development" - } - ], - "description": "Yii PHP Framework Version 2", - "homepage": "http://www.yiiframework.com/", - "keywords": [ - "framework", - "yii2" - ], - "time": "2017-02-08 09:04:32" - }, - { - "name": "yiisoft/yii2-bootstrap", - "version": "2.0.6", - "source": { - "type": "git", - "url": "https://github.com/yiisoft/yii2-bootstrap.git", - "reference": "3fd2b8c950cce79d60e9702d6bcb24eb3c80f6c5" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/yiisoft/yii2-bootstrap/zipball/3fd2b8c950cce79d60e9702d6bcb24eb3c80f6c5", - "reference": "3fd2b8c950cce79d60e9702d6bcb24eb3c80f6c5", - "shasum": "" - }, - "require": { - "bower-asset/bootstrap": "3.3.* | 3.2.* | 3.1.*", - "yiisoft/yii2": ">=2.0.6" - }, - "type": "yii2-extension", - "extra": { - "branch-alias": { - "dev-master": "2.0.x-dev" - }, - "asset-installer-paths": { - "npm-asset-library": "vendor/npm", - "bower-asset-library": "vendor/bower" - } - }, - "autoload": { - "psr-4": { - "yii\\bootstrap\\": "" - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "BSD-3-Clause" - ], - "authors": [ - { - "name": "Qiang Xue", - "email": "qiang.xue@gmail.com" - } - ], - "description": "The Twitter Bootstrap extension for the Yii framework", - "keywords": [ - "bootstrap", - "yii2" - ], - "time": "2016-03-17 03:29:28" - }, - { - "name": "yiisoft/yii2-composer", - "version": "2.0.5", - "source": { - "type": "git", - "url": "https://github.com/yiisoft/yii2-composer.git", - "reference": "3f4923c2bde6caf3f5b88cc22fdd5770f52f8df2" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/yiisoft/yii2-composer/zipball/3f4923c2bde6caf3f5b88cc22fdd5770f52f8df2", - "reference": "3f4923c2bde6caf3f5b88cc22fdd5770f52f8df2", - "shasum": "" - }, - "require": { - "composer-plugin-api": "^1.0" - }, - "require-dev": { - "composer/composer": "^1.0" - }, - "type": "composer-plugin", - "extra": { - "class": "yii\\composer\\Plugin", - "branch-alias": { - "dev-master": "2.0.x-dev" - } - }, - "autoload": { - "psr-4": { - "yii\\composer\\": "" - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "BSD-3-Clause" - ], - "authors": [ - { - "name": "Qiang Xue", - "email": "qiang.xue@gmail.com" - } - ], - "description": "The composer plugin for Yii extension installer", - "keywords": [ - "composer", - "extension installer", - "yii2" - ], - "time": "2016-12-20 13:26:02" - } - ], - "packages-dev": [], - "aliases": [], - "minimum-stability": "stable", - "stability-flags": [], - "prefer-stable": false, - "prefer-lowest": false, - "platform": [], - "platform-dev": [] -} diff --git a/assets/cropbox.css b/resources/cropbox.css similarity index 74% rename from assets/cropbox.css rename to resources/cropbox.css index d6e84c7..7e39b7a 100755 --- a/assets/cropbox.css +++ b/resources/cropbox.css @@ -1,10 +1,10 @@ @charset "UTF-8"; -div.cropbox .btn-file { +.container-cropbox .btn-file { position: relative; overflow: hidden; } -div.cropbox .btn-file input[type=file] { +.container-cropbox .btn-file input[type=file] { position: absolute; top: 0; right: 0; @@ -19,10 +19,10 @@ div.cropbox .btn-file input[type=file] { cursor: inherit; display: block; } -div.cropbox .cropped { +.cropped-images-cropbox { padding: 10px 0 5px 0; } -div.cropbox .img-thumbnail { +.container-cropbox .img-thumbnail { margin-right: 5px; margin-bottom: 5px; } diff --git a/assets/cropbox.js b/resources/cropbox.js similarity index 100% rename from assets/cropbox.js rename to resources/cropbox.js diff --git a/views/field.php b/views/field.php index d71d315..3656815 100755 --- a/views/field.php +++ b/views/field.php @@ -18,11 +18,11 @@ ' . Cropbox::t('Browse'); - if ($this->context->hasModel()) { + //if ($this->context->hasModel()) { echo Html::activeFileInput($this->context->model, $this->context->attribute, $this->context->options); - } else { - echo Html::fileInput($this->context->name, $this->context->value, $this->context->options); - } + //} else { + // echo Html::fileInput($this->context->name, $this->context->value, $this->context->options); + //} ?> ' . Cropbox::t('Crop'), [ @@ -32,7 +32,7 @@ 'class' => 'btn btn-warning btn-reset', ]); ?>
-
+

context->originalImageUrl)) { From 4f928cca912e1816c3ffab25ad5651cdbc240bd6 Mon Sep 17 00:00:00 2001 From: Vasilij Belosludcev Date: Fri, 5 May 2017 15:39:23 +0500 Subject: [PATCH 3/6] more code --- Cropbox.php | 4 ++-- composer.json | 2 +- resources/cropbox.js | 29 ++++++++++++++++------------- views/field.php | 15 +++------------ 4 files changed, 22 insertions(+), 28 deletions(-) diff --git a/Cropbox.php b/Cropbox.php index 2c52177..ab2b17f 100755 --- a/Cropbox.php +++ b/Cropbox.php @@ -71,8 +71,8 @@ public function init() $inputInfoName = Html::getInputName($this->model, $inputInfoName); } $this->pluginOptions['selectors']['inputInfo'] = sprintf('#%s input[name="%s"]', $this->id, $inputInfoName); - $optionsCropbox = Json::encode($this->pluginOptions); - $js = "$('#{$this->options['id']}').cropbox({$optionsCropbox});"; + $optionsCropbox = Json::encode($this->pluginOptions); + $js = "$('#{$this->id}').cropbox({$optionsCropbox});"; $this->view->registerJs($js, View::POS_READY); } diff --git a/composer.json b/composer.json index 9fe02a9..88b02fd 100644 --- a/composer.json +++ b/composer.json @@ -16,7 +16,7 @@ "minimum-stability": "stable", "require": { "yiisoft/yii2-bootstrap": "*", - "bower-asset/js-cropbox": "0.9.1" + "bower-asset/js-cropbox": "0.10.0" }, "autoload": { "psr-4": { diff --git a/resources/cropbox.js b/resources/cropbox.js index d7a9334..8f1b1a9 100644 --- a/resources/cropbox.js +++ b/resources/cropbox.js @@ -1,17 +1,20 @@ (function($, Cropbox) { $.fn.cropbox = function(options) { - this.each(function() { - console.log(this); - }); -// if (typeof options === 'string') { -// var method = options.replace(/^[_]*/, ''); -// if (Cropbox.prototype[method]) { -// //return Cropbox.apply(this, Array.prototype.slice.call(arguments, 1)); -// } -// } else if (typeof options === 'object' || ! options) { -// return .init.apply(this, arguments); -// } else { -// $.error('Method "' + options + '" not exists.'); -// } + // call public method + if (typeof options === 'string') { + var method = options.replace(/^[_]*/, ''); + if (Cropbox.prototype[method]) { + var cb = $(this).data('cropbox'); + return cb[method].apply(cb, Array.prototype.slice.call(arguments, 1)); + } + // create new instance of Cropbox class + } else if (typeof options === 'object' || ! options) { + return this.each(function() { + $(this).data('cropbox', new Cropbox(this, options)); + }); + // throw an error + } else { + $.error('Method Cropbox::"' + options + '()" not exists.'); + } }; })(jQuery, Cropbox); diff --git a/views/field.php b/views/field.php index 3656815..7f828d0 100755 --- a/views/field.php +++ b/views/field.php @@ -2,18 +2,9 @@ use yii\helpers\Html; use bupy7\cropbox\Cropbox; -?> -

-
-
-
- -
-
-
-
-
-
+?> +
+
Date: Fri, 5 May 2017 18:42:15 +0500 Subject: [PATCH 4/6] more code --- Cropbox.php | 70 ++++++++++++++++++++++++++--------------- composer.json | 3 +- resources/cropbox.css | 6 ++-- resources/cropbox.js | 73 +++++++++++++++++++++++++++++++++++++++++++ views/field.php | 38 ++++++++++++++-------- 5 files changed, 147 insertions(+), 43 deletions(-) diff --git a/Cropbox.php b/Cropbox.php index ab2b17f..35294d8 100755 --- a/Cropbox.php +++ b/Cropbox.php @@ -7,7 +7,6 @@ use yii\helpers\Html; use yii\helpers\Json; use yii\web\View; -use yii\base\InvalidConfigException; use bupy7\cropbox\assets\WidgetAsset; /** @@ -17,11 +16,24 @@ class Cropbox extends InputWidget { /** - * @var array Attribute name that content information about crop image. + * @var string Attribute name that content information about cropped images. + * @since 5.0.0 */ - public $attributeCropInfo; + public $croppedDataAttribute; /** - * @var array Options of js-cropbox plugin. + * @var string Input name that content information about cropped images. + * @since 5.0.0 + */ + public $croppedDataName; + /** + * @var string Input value with information about cropped images. + * @since 5.0.0 + */ + public $croppedDataValue; + /** + * @var array Options of plugin: + * - variants: + * - selectors: */ public $pluginOptions = []; /** @@ -45,34 +57,14 @@ class Cropbox extends InputWidget */ public $pathToView = 'field'; - /** - * @throws InvalidConfigException - */ public function init() { parent::init(); WidgetAsset::register($this->view); $this->registerTranslations(); - $this->options = array_merge(['accept' => 'image/*'], $this->options); - $this->pluginOptions = array_merge([ - 'selectors' => [ - 'inputFile' => sprintf('#%s input[type="file"]', $this->id), - 'btnCrop' => sprintf('#%s .btn-crop', $this->id), - 'btnReset' => sprintf('#%s .btn-reset', $this->id), - 'resultContainer' => sprintf('#%s .cropped', $this->id), - 'messageBlock' => sprintf('#%s .alert', $this->id), - ], - 'imageOptions' => [ - 'class' => 'img-thumbnail', - ], - ], $this->pluginOptions); - $inputInfoName = $this->attributeCropInfo; - if ($this->hasModel()) { - $inputInfoName = Html::getInputName($this->model, $inputInfoName); - } - $this->pluginOptions['selectors']['inputInfo'] = sprintf('#%s input[name="%s"]', $this->id, $inputInfoName); + $this->configuration(); $optionsCropbox = Json::encode($this->pluginOptions); - $js = "$('#{$this->id}').cropbox({$optionsCropbox});"; + $js = "$('#{$this->id} .plugin').cropbox({$optionsCropbox});"; $this->view->registerJs($js, View::POS_READY); } @@ -109,4 +101,30 @@ protected function registerTranslations() ], ]; } + + /** + * Configuration the widget. + * @since 5.0.0 + */ + protected function configuration() + { + $this->options = array_merge(['accept' => 'image/*'], $this->options); + $croppedDataInput = $this->croppedDataAttribute; + if ($this->hasModel()) { + $croppedDataInput = Html::getInputName($this->model, $croppedDataInput); + } else { + $croppedDataInput = $this->croppedDataName; + } + $this->pluginOptions = array_merge([ + 'selectors' => [ + 'fileInput' => sprintf('#%s input[type="file"]', $this->id), + 'btnCrop' => sprintf('#%s .btn-crop', $this->id), + 'btnReset' => sprintf('#%s .btn-reset', $this->id), + 'btnScaleIn' => sprintf('#%s .btn-scale-in', $this->id), + 'btnScaleOut' => sprintf('#%s .btn-scale-out', $this->id), + 'croppedContainer' => sprintf('#%s .cropped-images-cropbox', $this->id), + 'croppedDataInput' => sprintf('#%s input[name="%s"]', $this->id, $croppedDataInput), + ], + ], $this->pluginOptions); + } } diff --git a/composer.json b/composer.json index 88b02fd..d939532 100644 --- a/composer.json +++ b/composer.json @@ -15,8 +15,9 @@ ], "minimum-stability": "stable", "require": { + "yiisoft/yii2": "*", "yiisoft/yii2-bootstrap": "*", - "bower-asset/js-cropbox": "0.10.0" + "bower-asset/js-cropbox": "0.11.0" }, "autoload": { "psr-4": { diff --git a/resources/cropbox.css b/resources/cropbox.css index 7e39b7a..167bfa5 100755 --- a/resources/cropbox.css +++ b/resources/cropbox.css @@ -1,10 +1,10 @@ @charset "UTF-8"; -.container-cropbox .btn-file { +.cropbox .btn-file { position: relative; overflow: hidden; } -.container-cropbox .btn-file input[type=file] { +.cropbox .btn-file input[type=file] { position: absolute; top: 0; right: 0; @@ -22,7 +22,7 @@ .cropped-images-cropbox { padding: 10px 0 5px 0; } -.container-cropbox .img-thumbnail { +.cropped-images-cropbox .img-thumbnail { margin-right: 5px; margin-bottom: 5px; } diff --git a/resources/cropbox.js b/resources/cropbox.js index 8f1b1a9..9c1a726 100644 --- a/resources/cropbox.js +++ b/resources/cropbox.js @@ -1,4 +1,74 @@ (function($, Cropbox) { + /** + * @param {Object} s + */ + function attachEvents(s) { + var $th = $(this); + // scaling + $(s.btnScaleIn).on('click', function() { + $th.cropbox('scale', 1.05); + }); + $(s.btnScaleOut).on('click', function() { + $th.cropbox('scale', 0.95); + }); + $($th.cropbox('getMembrane')).on('wheel', function(event) { + if (event.originalEvent.deltaY < 0) { + $th.cropbox('scale', 1.01); + } else { + $th.cropbox('scale', 0.99); + } + if (event.preventDefault) { + event.preventDefault(); + } + }); + // image loading from a file + $(s.fileInput).on('change', function() { + var fileReader = new FileReader(); + fileReader.readAsDataURL(this.files[0]); + fileReader.onload = function(event) { + $th.cropbox('load', event.target.result); + }; + }); + // reset + $(s.btnReset).on('click', function() { + $th.cropbox('reset'); + }); + // crop + $(s.btnCrop).on('click', function() { + $th.cropbox('crop'); + }); + // the cropped event + $th.on('cb:cropped', function(event) { + var $img = $('', { + src: event.detail.data.image, + class: 'img-thumbnail' + }); + $(s.croppedContainer).append($img); + $(s.croppedDataInput).val(JSON.stringify($th.cropbox('getData'))); + }); + // the reset event + function resetHandler() { + $(s.croppedContainer).html(''); + $(s.croppedDataInput).val(''); + }; + $th.on('cb:reset', resetHandler); + // the loaded event + $th.on('cb:loaded', resetHandler); + // the disabled/enabled event + function disabledHandler() { + $(s.btnScaleIn).attr('disabled', 'disabled'); + $(s.btnScaleOut).attr('disabled', 'disabled'); + $(s.btnCrop).attr('disabled', 'disabled'); + }; + disabledHandler(); + $th.on('cb:disabledCtrls', disabledHandler); + $th.on('cb:enabledCtrls', function() { + $(s.btnScaleIn).removeAttr('disabled'); + $(s.btnScaleOut).removeAttr('disabled'); + $(s.btnCrop).removeAttr('disabled'); + }); + }; + $.fn.cropbox = function(options) { // call public method if (typeof options === 'string') { @@ -10,7 +80,10 @@ // create new instance of Cropbox class } else if (typeof options === 'object' || ! options) { return this.each(function() { + var selectors = options.selectors; + delete options.selectors; $(this).data('cropbox', new Cropbox(this, options)); + attachEvents.call(this, selectors); }); // throw an error } else { diff --git a/views/field.php b/views/field.php index 7f828d0..02f763d 100755 --- a/views/field.php +++ b/views/field.php @@ -3,25 +3,31 @@ use yii\helpers\Html; use bupy7\cropbox\Cropbox; ?> -
-
+
+
+
+ ' . Cropbox::t('Browse'); + //if ($this->context->hasModel()) { + echo Html::activeFileInput($this->context->model, $this->context->attribute, $this->context->options); + //} else { + // echo Html::fileInput($this->context->name, $this->context->value, $this->context->options); + //} + ?> +
- - ' . Cropbox::t('Browse'); - //if ($this->context->hasModel()) { - echo Html::activeFileInput($this->context->model, $this->context->attribute, $this->context->options); - //} else { - // echo Html::fileInput($this->context->name, $this->context->value, $this->context->options); - //} - ?> - ' . Cropbox::t('Crop'), [ 'class' => 'btn btn-success btn-crop', ]); ?> ' . Cropbox::t('Reset'), [ 'class' => 'btn btn-warning btn-reset', ]); ?> + ', [ + 'class' => 'btn btn-default btn-scale-out', + ]); ?> + ', [ + 'class' => 'btn btn-default btn-scale-in', + ]); ?>

@@ -48,5 +54,11 @@ } ?>

- context->model, $this->context->attributeCropInfo); ?> + context->hasModel()) { + echo Html::activeHiddenInput($this->context->model, $this->context->croppedDataAttribute); + //} else { + // echo Html::hiddenInput($this->context->croppedDataName, $this->context->croppedDataValue); + //} + ?>
\ No newline at end of file From dc149ef81c06c4547fd3cc5687ab38d743e1b1a3 Mon Sep 17 00:00:00 2001 From: Vasilij Belosludcev Date: Sun, 7 May 2017 00:09:27 +0500 Subject: [PATCH 5/6] more code --- Cropbox.php => CropboxWidget.php | 29 +++++++++----- resources/cropbox.css | 10 +++++ resources/cropbox.js | 69 ++++++++++++++++++++++---------- views/field.php | 27 +++++++------ 4 files changed, 91 insertions(+), 44 deletions(-) rename Cropbox.php => CropboxWidget.php (78%) diff --git a/Cropbox.php b/CropboxWidget.php similarity index 78% rename from Cropbox.php rename to CropboxWidget.php index 35294d8..8a87d5d 100755 --- a/Cropbox.php +++ b/CropboxWidget.php @@ -11,9 +11,9 @@ /** * @author Vasilij "BuPy7" Belosludcev http://mihaly4.ru - * @since 1.0.0 + * @since 5.0.0 */ -class Cropbox extends InputWidget +class CropboxWidget extends InputWidget { /** * @var string Attribute name that content information about cropped images. @@ -32,8 +32,17 @@ class Cropbox extends InputWidget public $croppedDataValue; /** * @var array Options of plugin: - * - variants: - * - selectors: + * - (array) variants: Variants of cropping image. More info: https://github.com/bupy7/js-cropbox#object-variants + * - (array) [selectors]: CSS selectors for attach events of cropbox. + * # (string) fileInput + * # (string) btnCrop + * # (string) btnReset + * # (string) btnScaleIn + * # (string) btnScaleOut + * # (string) croppedContainer + * # (string) croppedDataInput + * # (string) messageContainer + * - (array) [messages]: Alert messages for each a variant. */ public $pluginOptions = []; /** @@ -62,15 +71,16 @@ public function init() parent::init(); WidgetAsset::register($this->view); $this->registerTranslations(); - $this->configuration(); - $optionsCropbox = Json::encode($this->pluginOptions); - $js = "$('#{$this->id} .plugin').cropbox({$optionsCropbox});"; - $this->view->registerJs($js, View::POS_READY); + $this->configuration(); } public function run() { - return $this->render($this->pathToView); + $pluginOptions = Json::encode($this->pluginOptions); + $this->view->registerJs("$('#{$this->id} .plugin').cropbox({$pluginOptions});", View::POS_READY); + return $this->render($this->pathToView, [ + 'hasModel' => $this->hasModel(), + ]); } /** @@ -124,6 +134,7 @@ protected function configuration() 'btnScaleOut' => sprintf('#%s .btn-scale-out', $this->id), 'croppedContainer' => sprintf('#%s .cropped-images-cropbox', $this->id), 'croppedDataInput' => sprintf('#%s input[name="%s"]', $this->id, $croppedDataInput), + 'messageContainer' => sprintf('#%s .message-container-cropbox', $this->id), ], ], $this->pluginOptions); } diff --git a/resources/cropbox.css b/resources/cropbox.css index 167bfa5..215be2e 100755 --- a/resources/cropbox.css +++ b/resources/cropbox.css @@ -26,3 +26,13 @@ margin-right: 5px; margin-bottom: 5px; } +.workarea-cropbox, +.bg-cropbox { + height: 500px; + min-height: 500px; + width: 500px; + min-width: 500px; +} +.message-container-cropbox { + display: none; +} diff --git a/resources/cropbox.js b/resources/cropbox.js index 9c1a726..35bb981 100644 --- a/resources/cropbox.js +++ b/resources/cropbox.js @@ -1,8 +1,33 @@ (function($, Cropbox) { + $.fn.cropbox = function(options) { + // call public method + if (typeof options === 'string') { + var method = options.replace(/^[_]*/, ''); + if (Cropbox.prototype[method]) { + var cb = $(this).data('cropbox'); + return cb[method].apply(cb, Array.prototype.slice.call(arguments, 1)); + } + // create new instance of Cropbox class + } else if (typeof options === 'object' || ! options) { + var selectors = options.selectors, + messages = options.messages || []; + delete options.selectors; + delete options.messages; + return this.each(function() { + $(this).data('cropbox', new Cropbox(this, options)); + attachEvents.call(this, selectors, messages); + }); + // throw an error + } else { + $.error('Method Cropbox::"' + options + '()" not exists.'); + } + }; + /** * @param {Object} s + * @param {Array} m */ - function attachEvents(s) { + function attachEvents(s, m) { var $th = $(this); // scaling $(s.btnScaleIn).on('click', function() { @@ -67,27 +92,27 @@ $(s.btnScaleOut).removeAttr('disabled'); $(s.btnCrop).removeAttr('disabled'); }); - }; - - $.fn.cropbox = function(options) { - // call public method - if (typeof options === 'string') { - var method = options.replace(/^[_]*/, ''); - if (Cropbox.prototype[method]) { - var cb = $(this).data('cropbox'); - return cb[method].apply(cb, Array.prototype.slice.call(arguments, 1)); + // messages + function showMessage(reset) { + var index = 0; + if (typeof $th.data('mi-cropbox') !== 'undefined' && !(reset || false)) { + index = $th.data('mi-cropbox'); } - // create new instance of Cropbox class - } else if (typeof options === 'object' || ! options) { - return this.each(function() { - var selectors = options.selectors; - delete options.selectors; - $(this).data('cropbox', new Cropbox(this, options)); - attachEvents.call(this, selectors); - }); - // throw an error - } else { - $.error('Method Cropbox::"' + options + '()" not exists.'); + if (typeof m[index] !== 'undefined') { + $(s.messageContainer).html(m[index]).show(); + } else { + $(s.messageContainer).hide(); + } + $th.data('mi-cropbox', ++index); } - }; + $th.on('cb:cropped', function() { + showMessage(); + }); + $(s.fileInput).on('change', function() { + showMessage(true); + }); + $th.on('cb:reset', function() { + $(s.messageContainer).hide(); + }); + } })(jQuery, Cropbox); diff --git a/views/field.php b/views/field.php index 02f763d..d8aff76 100755 --- a/views/field.php +++ b/views/field.php @@ -1,25 +1,26 @@
+
' . Cropbox::t('Browse'); - //if ($this->context->hasModel()) { + echo ' ' . CropboxWidget::t('Browse'); + if ($hasModel) { echo Html::activeFileInput($this->context->model, $this->context->attribute, $this->context->options); - //} else { - // echo Html::fileInput($this->context->name, $this->context->value, $this->context->options); - //} + } else { + echo Html::fileInput($this->context->name, $this->context->value, $this->context->options); + } ?>
- ' . Cropbox::t('Crop'), [ + ' . CropboxWidget::t('Crop'), [ 'class' => 'btn btn-success btn-crop', ]); ?> - ' . Cropbox::t('Reset'), [ + ' . CropboxWidget::t('Reset'), [ 'class' => 'btn btn-warning btn-reset', ]); ?> ', [ @@ -34,7 +35,7 @@ context->originalImageUrl)) { echo Html::a( - ' ' . Cropbox::t('Show original'), + ' ' . CropboxWidget::t('Show original'), $this->context->originalImageUrl, [ 'target' => '_blank', @@ -55,10 +56,10 @@ ?>
context->hasModel()) { + if ($hasModel) { echo Html::activeHiddenInput($this->context->model, $this->context->croppedDataAttribute); - //} else { - // echo Html::hiddenInput($this->context->croppedDataName, $this->context->croppedDataValue); - //} + } else { + echo Html::hiddenInput($this->context->croppedDataName, $this->context->croppedDataValue); + } ?>
\ No newline at end of file From 1fa6faac32ffa34150d4163e0e92dff711cd361a Mon Sep 17 00:00:00 2001 From: Vasilij Belosludcev Date: Sun, 7 May 2017 15:01:46 +0500 Subject: [PATCH 6/6] more code --- CHANGELOG.md | 10 ++++- CropboxWidget.php | 6 +-- README.md | 103 ++++++++++++++++++++++++++++------------------ views/field.php | 9 ++-- 4 files changed, 75 insertions(+), 53 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index efcfb8d..53acfe8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,16 @@ yii2-widget-cropbox =================== -v? [?] ------- +v5.0.0 [2017-05-07] +------------------- - Fixed headers style of markdown. (bryant1410) +- Removed `bupy7\cropbox\Cropbox` and `bupy7\cropbox\MouseWheelAsset` class. +- Added `bupy7\cropbox\CropboxWidget` class. +- Removed `assets` directory. +- Replaced `bower-asset/jq-cropbox` to `bower-asset/js-cropbox` dependency. +- Added jQuery wrapper for `js-cropbox` extension. +- Rewrite `README.md`. v4.1.2 [2016-09-28] ------------------- diff --git a/CropboxWidget.php b/CropboxWidget.php index 8a87d5d..2657096 100755 --- a/CropboxWidget.php +++ b/CropboxWidget.php @@ -17,17 +17,14 @@ class CropboxWidget extends InputWidget { /** * @var string Attribute name that content information about cropped images. - * @since 5.0.0 */ public $croppedDataAttribute; /** * @var string Input name that content information about cropped images. - * @since 5.0.0 */ public $croppedDataName; /** * @var string Input value with information about cropped images. - * @since 5.0.0 */ public $croppedDataValue; /** @@ -60,7 +57,7 @@ class CropboxWidget extends InputWidget * * or simply string to image. */ - public $previewImagesUrl; + public $croppedImagesUrl; /** * @var string Path to view of cropbox field. Example: '@app/path/to/view' */ @@ -114,7 +111,6 @@ protected function registerTranslations() /** * Configuration the widget. - * @since 5.0.0 */ protected function configuration() { diff --git a/README.md b/README.md index 06fb289..02440b0 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,22 @@ yii2-widget-cropbox -============ +=================== [![Latest Stable Version](https://poser.pugx.org/bupy7/yii2-widget-cropbox/v/stable)](https://packagist.org/packages/bupy7/yii2-widget-cropbox) [![Total Downloads](https://poser.pugx.org/bupy7/yii2-widget-cropbox/downloads)](https://packagist.org/packages/bupy7/yii2-widget-cropbox) [![License](https://poser.pugx.org/bupy7/yii2-widget-cropbox/license)](https://packagist.org/packages/bupy7/yii2-widget-cropbox) -This is widget wrapper of [jquery-cropbox](https://github.com/bupy7/jquery-cropbox). +This is Yii2 widget wrapper for [js-cropbox](https://github.com/bupy7/js-cropbox). -This widget allows crop image before upload to server and send informations about crop in JSON format. +Demo and documentation of plugin +-------------------------------- -## Functional +[js-cropbox Demo](http://bupy7.github.io/js-cropbox/) -- Simple! =) -- Cropping image before upload to server. -- Cropping more **once** option. -- Labels for settings of crop. -- You can use custom view. -- Resizing cropping image on-the-fly. +[js-cropbox README](https://github.com/bupy7/js-cropbox/blob/master/README.md) -## Demo and documentation of plugin +Installation +------------ -[jQuery-Cropbox Demo](http://bupy7.github.io/jquery-cropbox/) - -[jquery-cropbox README](https://github.com/bupy7/jquery-cropbox/blob/master/README.md) - -## Installation The preferred way to install this extension is through [composer](http://getcomposer.org/download/). Either run @@ -39,17 +31,44 @@ or add to the **require** section of your **composer.json** file. +If you use v4.1.2 then go to [v4.1.2](https://github.com/bupy7/yii2-widget-cropbox/tree/v4.1.2). + If you use v3.0.1 then go to [v3.0.1](https://github.com/bupy7/yii2-widget-cropbox/tree/v3.0.1). If you use v2.2 then go to [v2.2](https://github.com/bupy7/yii2-widget-cropbox/tree/v2.2). If you use v1.0 then go to [v1.0](https://github.com/bupy7/yii2-widget-cropbox/tree/v1.0). -## How use +Options +------- + +#### `$pluginOptions` + +Contain configuration of js-cropbox wrapper. + +##### (array) `$variants`: Variants of cropping image. +More info: https://github.com/bupy7/js-cropbox#object-variants + +##### (array) `[$selectors]`: CSS selectors for attach events of cropbox. -For example I will be use **Imagine extensions for Yii2** https://github.com/yiisoft/yii2-imagine . You can use something other. +- (string) fileInput +- (string) btnCrop +- (string) btnReset +- (string) btnScaleIn +- (string) btnScaleOut +- (string) croppedContainer +- (string) croppedDataInput +- (string) messageContainer + +##### (array) `[$messages]`: Alert messages for each a variant. + +Usage +----- + +For example, I will use **Imagine extensions for Yii2** https://github.com/yiisoft/yii2-imagine . You can use something other. + +**Add in action to your controller:** -Add to action of controller ```php ... @@ -66,9 +85,10 @@ if ($model->load(Yii::$app->request->post())) ... ``` -Add to view +**Add to your view:** + ```php -use bupy7\cropbox\Cropbox; +use bupy7\cropbox\CropboxWidget; $form = ActiveForm::begin([ 'options' => ['enctype'=>'multipart/form-data'], @@ -76,14 +96,15 @@ $form = ActiveForm::begin([ ... -echo $form->field($model, 'image')->widget(Cropbox::className(), [ - 'attributeCropInfo' => 'crop_info', +echo $form->field($model, 'image')->widget(CropboxWidget::className(), [ + 'croppedDataAttribute' => 'crop_info', ]); ... ``` -Add to model: +**Add to your model:** + ```php ... @@ -175,31 +196,33 @@ public function afterSave($insert, $changedAttributes) ... ``` -## Configuration +Configuration +------------- -#### Preview exist image of item +### Preview exist image of item -If you want showing uploaded and cropped image, you must add following code: +If you want to show uploaded and cropped image, you must add following code: ```php -echo $form->field($model, 'image')->widget(Cropbox::className(), [ +echo $form->field($model, 'image')->widget(CropboxWidget::className(), [ ... - 'previewUrl' => [ + 'croppedImagesUrl' => [ 'url/to/small/image' ], - 'originalUrl' => 'url/to/original/image', + 'originalImageUrl' => 'url/to/original/image', ]); ``` -If you click to preview image then you see original image. +If you will click on preview image you see original image. -#### Crop with save real size of image +### Crop with save real size of image -The difference from previous methods in that we do not resize of image before crop it. Here we crop of image as we see it in editor box with saving real size. +Difference from previous methods in that we don't resize image before crop it. +We cropped image as we see it in editor box with saving real size. -For this we will use of property `ratio` from `$cropInfo`. +For this we will use property `ratio` from `$cropInfo`. ```php $cropInfo = Json::decode($this->crop_info)[0]; @@ -219,11 +242,11 @@ $image->crop($cropPointLarge, $cropSizeLarge) ->save($pathLargeImage, ['quality' => $module->qualityLarge]); ``` -#### Cropping more once option +### Cropping more once option -If you set few veriants crop to plugin, then you need make following: +If you will set few veriants crop on plugin you need make following: -Model: +**In model:** ```php ... @@ -284,11 +307,11 @@ public function afterSave($insert, $changedAttributes) ``` -#### Use resizing +### Use resizing -If you want use resizing then you need pointer min and max size of image to "variants" of "pluginOptions". +If you want use resizing you need pointer min and max size of image in `variants` of `pluginOptions`. -To model: +**In model:** ```php // open image diff --git a/views/field.php b/views/field.php index d8aff76..1423c7e 100755 --- a/views/field.php +++ b/views/field.php @@ -46,12 +46,9 @@ ?>

context->previewImagesUrl)) { - foreach ($this->context->previewImagesUrl as $url) { - if (!empty($url)) { - echo Html::img($url, ['class' => 'img-thumbnail']); - } - } + $croppedImagesUrl = (array) $this->context->croppedImagesUrl; + foreach ($croppedImagesUrl as $url) { + echo Html::img($url, ['class' => 'img-thumbnail']); } ?>