mirror of
https://github.com/Oreolek/ifhub.club.git
synced 2024-06-28 20:45:00 +03:00
Доработка компонента crop
This commit is contained in:
parent
b4c546c37b
commit
e13745b8e1
|
@ -2157,7 +2157,7 @@ class ActionBlog extends Action
|
|||
|
||||
$oViewer = $this->Viewer_GetLocalViewer();
|
||||
|
||||
$oViewer->Assign('image', getRequestStr('image_src'), true);
|
||||
$oViewer->Assign('image', getRequestStr('path'), true);
|
||||
$oViewer->Assign('originalWidth', (int)getRequest('original_width'), true);
|
||||
$oViewer->Assign('originalHeight', (int)getRequest('original_height'), true);
|
||||
$oViewer->Assign('width', (int)getRequest('width'), true);
|
||||
|
|
|
@ -208,7 +208,7 @@ class ActionSettings extends Action
|
|||
|
||||
$oViewer = $this->Viewer_GetLocalViewer();
|
||||
|
||||
$oViewer->Assign('image', getRequestStr('image_src'), true);
|
||||
$oViewer->Assign('image', getRequestStr('path'), true);
|
||||
$oViewer->Assign('originalWidth', (int) getRequest('original_width'), true);
|
||||
$oViewer->Assign('originalHeight', (int) getRequest('original_height'), true);
|
||||
$oViewer->Assign('width', (int) getRequest('width'), true);
|
||||
|
@ -226,7 +226,7 @@ class ActionSettings extends Action
|
|||
|
||||
$oViewer = $this->Viewer_GetLocalViewer();
|
||||
|
||||
$oViewer->Assign('image', getRequestStr('image_src'), true);
|
||||
$oViewer->Assign('image', getRequestStr('path'), true);
|
||||
$oViewer->Assign('originalWidth', (int) getRequest('original_width'), true);
|
||||
$oViewer->Assign('originalHeight', (int) getRequest('original_height'), true);
|
||||
$oViewer->Assign('width', (int) getRequest('width'), true);
|
||||
|
|
|
@ -521,6 +521,8 @@ $config['head']['default']['js'] = array(
|
|||
"___path.skin.web___/components/tabs/js/tab.js",
|
||||
"___path.skin.web___/components/tabs/js/tabs.js",
|
||||
"___path.skin.web___/components/modal/js/modal.js",
|
||||
"___path.skin.web___/components/crop/js/crop.js",
|
||||
"___path.skin.web___/components/crop/js/crop-modal.js",
|
||||
"___path.skin.web___/components/dropdown/js/dropdown.js",
|
||||
"___path.skin.web___/components/alert/js/alert.js",
|
||||
"___path.skin.web___/components/report/js/report.js",
|
||||
|
@ -568,7 +570,6 @@ $config['head']['default']['js'] = array(
|
|||
"___path.skin.web___/components/tags-favourite/js/tags-favourite.js",
|
||||
"___path.skin.web___/components/block/js/block.js",
|
||||
"___path.skin.web___/components/search-ajax/js/search-ajax.js",
|
||||
"___path.skin.web___/components/crop/js/crop.js",
|
||||
"___path.skin.web___/components/actionbar/js/actionbar-item-select.js",
|
||||
"___path.skin.web___/components/toolbar-scrollup/js/toolbar.scrollup.js",
|
||||
"___path.skin.web___/components/toolbar-scrollnav/js/toolbar.scrollnav.js",
|
||||
|
|
|
@ -0,0 +1,74 @@
|
|||
/**
|
||||
* Модальное окно с кропом изображения
|
||||
*
|
||||
* @module ls/crop/modal
|
||||
*
|
||||
* @license GNU General Public License, version 2
|
||||
* @copyright 2013 OOO "ЛС-СОФТ" {@link http://livestreetcms.com}
|
||||
* @author Denis Shakhov <denis.shakhov@gmail.com>
|
||||
*/
|
||||
|
||||
var ls = ls || {};
|
||||
|
||||
ls.cropModal = (function ($) {
|
||||
"use strict";
|
||||
|
||||
var _defaults = {
|
||||
urls: {
|
||||
modal: null,
|
||||
save: null
|
||||
},
|
||||
params: {
|
||||
usePreview: false
|
||||
},
|
||||
selectors: {
|
||||
crop: '.js-crop',
|
||||
submit: '.js-crop-submit'
|
||||
},
|
||||
crop_options: {},
|
||||
aftersave: null,
|
||||
afterhide: null
|
||||
};
|
||||
|
||||
/**
|
||||
* Показывает модальное окно
|
||||
*/
|
||||
this.show = function( options ) {
|
||||
var options = $.extend( {}, _defaults, options );
|
||||
|
||||
ls.modal.load( options.urls.modal, options.params, {
|
||||
aftershow: function( event, modal ) {
|
||||
var crop = modal.element.find( this.options.selectors.crop ).lsCrop( options.crop_options );
|
||||
var submit = modal.element.find( this.options.selectors.submit );
|
||||
var image = crop.lsCrop( 'getImage' );
|
||||
|
||||
submit.on( 'click', function() {
|
||||
var paramsRequest = $.extend({}, {
|
||||
size: crop.lsCrop( 'getSelection' ),
|
||||
canvas_width: image.innerWidth()
|
||||
}, options.params || {});
|
||||
|
||||
ls.ajax.load( options.urls.save, paramsRequest, function( response ) {
|
||||
if ( response.bStateError ) {
|
||||
ls.msg.error( null, response.sMsg );
|
||||
} else {
|
||||
modal.hide();
|
||||
|
||||
if ( $.isFunction( options.aftersave ) ) {
|
||||
options.aftersave( response, modal, image );
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
afterhide: function( event, modal ) {
|
||||
if ( $.isFunction( options.afterhide ) ) {
|
||||
options.afterhide( event, modal );
|
||||
}
|
||||
},
|
||||
center: false
|
||||
});
|
||||
};
|
||||
|
||||
return this;
|
||||
}).call( ls.cropModal || {}, jQuery );
|
|
@ -135,24 +135,26 @@
|
|||
* Показывает модальное кропа фото
|
||||
*/
|
||||
cropPhoto: function( image ) {
|
||||
this.showModal( image, this.option( 'crop_photo.usePreview' ), {
|
||||
crop_params : this.option( 'crop_photo' ),
|
||||
save_params : this.option( 'params' ),
|
||||
crop_url : this.option( 'urls.crop_photo' ),
|
||||
save_url : this.option( 'urls.save_photo' ),
|
||||
save_callback : function( response, modal, image ) {
|
||||
ls.cropModal.show({
|
||||
urls: {
|
||||
modal: this.option( 'urls.crop_photo' ),
|
||||
save: this.option( 'urls.save_photo' )
|
||||
},
|
||||
params: $.extend( {}, this.option( 'params' ), image, { usePreview: this.option( 'crop_photo.usePreview' ) } ),
|
||||
crop_options: this.option( 'crop_photo' ),
|
||||
aftersave: function( response, modal, image ) {
|
||||
this.element.removeClass( this.option( 'classes.nophoto' ) );
|
||||
this.elements.image.attr( 'src', response.photo );
|
||||
this.elements.image.attr( 'src', response.photo + '?' + Math.random() );
|
||||
this.elements.actions.upload_label.text( response.upload_text );
|
||||
|
||||
if ( this.option( 'use_avatar' ) ) {
|
||||
// TODO: Временный хак (модальное не показывается сразу после закрытия предыдущего окна)
|
||||
setTimeout( this.cropAvatar.bind( this ), 300);
|
||||
setTimeout( this.cropAvatar.bind( this ), 300 );
|
||||
}
|
||||
},
|
||||
modal_close_callback : function( event, modal ) {
|
||||
}.bind( this ),
|
||||
afterhide: function( event, modal ) {
|
||||
ls.ajax.load( this.option( 'urls.cancel_photo' ), this.option( 'params' ) );
|
||||
}
|
||||
}.bind( this )
|
||||
});
|
||||
},
|
||||
|
||||
|
@ -160,73 +162,25 @@
|
|||
* Показывает модальное кропа аватара
|
||||
*/
|
||||
cropAvatar: function() {
|
||||
var photo = this.elements.image;
|
||||
var image = {
|
||||
path: photo.attr( 'src' ),
|
||||
path: this.elements.image.attr( 'src' ),
|
||||
// TODO: IE8 naturalWidth naturalHeight
|
||||
original_width: photo[0].naturalWidth,
|
||||
original_height: photo[0].naturalHeight,
|
||||
width: photo[0].naturalWidth,
|
||||
height: photo[0].naturalHeight
|
||||
original_width: this.elements.image[0].naturalWidth,
|
||||
original_height: this.elements.image[0].naturalHeight,
|
||||
width: this.elements.image[0].naturalWidth,
|
||||
height: this.elements.image[0].naturalHeight
|
||||
};
|
||||
|
||||
this.showModal( image, this.option( 'crop_avatar.usePreview' ), {
|
||||
crop_params : this.option( 'crop_avatar' ),
|
||||
save_callback : function( response, modal, image ) {
|
||||
ls.cropModal.show({
|
||||
urls: {
|
||||
modal: this.option( 'urls.crop_avatar' ),
|
||||
save: this.option( 'urls.save_avatar' )
|
||||
},
|
||||
params: $.extend( {}, this.option( 'params' ), image, { usePreview: this.option( 'crop_avatar.usePreview' ) } ),
|
||||
crop_options: this.option( 'crop_avatar' ),
|
||||
aftersave: function( response, modal, image ) {
|
||||
this._trigger( 'changeavatar', null, [ this, response.avatars ] );
|
||||
},
|
||||
save_params : this.option( 'params' ),
|
||||
crop_url : this.option( 'urls.crop_avatar' ),
|
||||
save_url : this.option( 'urls.save_avatar' )
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Показывает модальное кропа
|
||||
*
|
||||
* TODO: Перенести в компонент crop
|
||||
*/
|
||||
showModal: function( image, usePreview, params ) {
|
||||
var _this = this;
|
||||
|
||||
ls.modal.load( params.crop_url, {
|
||||
original_width: image.original_width,
|
||||
original_height: image.original_height,
|
||||
width: image.width,
|
||||
height: image.height,
|
||||
image_src: image.path,
|
||||
use_preview: usePreview
|
||||
}, {
|
||||
aftershow: function( e, modal ) {
|
||||
var crop = modal.element.find('.js-crop').lsCrop( params.crop_params );
|
||||
var submit = modal.element.find('.js-crop-submit');
|
||||
var image = crop.lsCrop( 'getImage' );
|
||||
|
||||
submit.on( 'click', function() {
|
||||
var paramsRequest = $.extend({}, {
|
||||
size: crop.lsCrop( 'getSelection' ),
|
||||
canvas_width: image.innerWidth()
|
||||
}, params.save_params || {});
|
||||
|
||||
ls.ajax.load( params.save_url, paramsRequest, function( response ) {
|
||||
if ( response.bStateError ) {
|
||||
ls.msg.error( null, response.sMsg );
|
||||
} else {
|
||||
modal.hide();
|
||||
|
||||
if ( $.isFunction( params.save_callback ) ) {
|
||||
params.save_callback.call( _this, response, modal, image );
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
afterhide: function( event, modal ) {
|
||||
if ( $.isFunction( params.modal_close_callback ) ) {
|
||||
params.modal_close_callback.call( _this, event, modal );
|
||||
}
|
||||
},
|
||||
center: false
|
||||
}.bind( this )
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue