ifhub/ifhub.club
1
0
Fork 0
mirror of https://github.com/Oreolek/ifhub.club.git synced 2024-06-26 03:30:48 +03:00
Code Issues Releases Wiki Activity

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

Browse source
This commit is contained in:
Denis Shakhov 2014-11-22 22:51:45 +07:00
parent b4c546c37b
commit e13745b8e1
5 changed files with 106 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
application/classes/actions/ActionBlog.class.php
View file

@ -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);

4
application/classes/actions/ActionSettings.class.php
View file

@ -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);

3
application/config/config.php
View file

@ -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",

74
application/frontend/skin/developer/components/crop/js/crop-modal.js Normal file
View file

@ -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 );

100
application/frontend/skin/developer/components/photo/js/photo.js
View file

@ -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 )
});
}
});