123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553 |
- 'use strict';
- CKEDITOR.dialog.add( 'image2', function( editor ) {
-
- var regexGetSizeOrEmpty = /(^\s*(\d+)(px)?\s*$)|^$/i,
- lockButtonId = CKEDITOR.tools.getNextId(),
- resetButtonId = CKEDITOR.tools.getNextId(),
- lang = editor.lang.image2,
- commonLang = editor.lang.common,
- lockResetStyle = 'margin-top:18px;width:40px;height:20px;',
- lockResetHtml = new CKEDITOR.template(
- '<div>' +
- '<a href="javascript:void(0)" tabindex="-1" title="' + lang.lockRatio + '" class="cke_btn_locked" id="{lockButtonId}" role="checkbox">' +
- '<span class="cke_icon"></span>' +
- '<span class="cke_label">' + lang.lockRatio + '</span>' +
- '</a>' +
- '<a href="javascript:void(0)" tabindex="-1" title="' + lang.resetSize + '" class="cke_btn_reset" id="{resetButtonId}" role="button">' +
- '<span class="cke_label">' + lang.resetSize + '</span>' +
- '</a>' +
- '</div>' ).output( {
- lockButtonId: lockButtonId,
- resetButtonId: resetButtonId
- } ),
- helpers = CKEDITOR.plugins.image2,
-
- config = editor.config,
- hasFileBrowser = !!( config.filebrowserImageBrowseUrl || config.filebrowserBrowseUrl ),
-
-
- features = editor.widgets.registered.image.features,
-
- getNatural = helpers.getNatural,
-
- doc, widget, image,
-
- preLoader,
-
- domWidth, domHeight,
-
- preLoadedWidth, preLoadedHeight, srcChanged,
-
- lockRatio, userDefinedLock,
-
- lockButton, resetButton, widthField, heightField,
- natural;
-
-
- function validateDimension() {
- var match = this.getValue().match( regexGetSizeOrEmpty ),
- isValid = !!( match && parseInt( match[ 1 ], 10 ) !== 0 );
- if ( !isValid )
- alert( commonLang[ 'invalidLength' ].replace( '%1', commonLang[ this.id ] ).replace( '%2', 'px' ) );
- return isValid;
- }
-
-
-
-
- function createPreLoader() {
- var image = doc.createElement( 'img' ),
- listeners = [];
- function addListener( event, callback ) {
- listeners.push( image.once( event, function( evt ) {
- removeListeners();
- callback( evt );
- } ) );
- }
- function removeListeners() {
- var l;
- while ( ( l = listeners.pop() ) )
- l.removeListener();
- }
-
-
- return function( src, callback, scope ) {
- addListener( 'load', function() {
-
- var dimensions = getNatural( image );
- callback.call( scope, image, dimensions.width, dimensions.height );
- } );
- addListener( 'error', function() {
- callback( null );
- } );
- addListener( 'abort', function() {
- callback( null );
- } );
- image.setAttribute( 'src',
- ( config.baseHref || '' ) + src + '?' + Math.random().toString( 16 ).substring( 2 ) );
- };
- }
-
-
-
- function onChangeSrc() {
- var value = this.getValue();
- toggleDimensions( false );
-
- if ( value !== widget.data.src ) {
-
- preLoader( value, function( image, width, height ) {
-
- toggleDimensions( true );
-
- if ( !image )
- return toggleLockRatio( false );
-
- widthField.setValue( editor.config.image2_prefillDimensions === false ? 0 : width );
-
- heightField.setValue( editor.config.image2_prefillDimensions === false ? 0 : height );
-
- preLoadedWidth = domWidth = width;
-
- preLoadedHeight = domHeight = height;
-
- toggleLockRatio( helpers.checkHasNaturalRatio( image ) );
- } );
- srcChanged = true;
- }
-
-
-
- else if ( srcChanged ) {
-
- toggleDimensions( true );
-
- widthField.setValue( domWidth );
-
- heightField.setValue( domHeight );
-
- srcChanged = false;
- }
-
-
- else {
-
- toggleDimensions( true );
- }
- }
- function onChangeDimension() {
-
- if ( !lockRatio )
- return;
- var value = this.getValue();
-
- if ( !value )
- return;
-
- if ( !value.match( regexGetSizeOrEmpty ) )
- toggleLockRatio( false );
-
- if ( value === '0' )
- return;
- var isWidth = this.id == 'width',
-
-
- width = domWidth || preLoadedWidth,
- height = domHeight || preLoadedHeight;
-
- if ( isWidth )
- value = Math.round( height * ( value / width ) );
-
- else
- value = Math.round( width * ( value / height ) );
-
- if ( !isNaN( value ) )
- ( isWidth ? heightField : widthField ).setValue( value );
- }
-
-
-
-
-
- function onLoadLockReset() {
- var dialog = this.getDialog();
- function setupMouseClasses( el ) {
- el.on( 'mouseover', function() {
- this.addClass( 'cke_btn_over' );
- }, el );
- el.on( 'mouseout', function() {
- this.removeClass( 'cke_btn_over' );
- }, el );
- }
-
- lockButton = doc.getById( lockButtonId );
- resetButton = doc.getById( resetButtonId );
-
- if ( lockButton ) {
-
-
- dialog.addFocusable( lockButton, 4 + hasFileBrowser );
- lockButton.on( 'click', function( evt ) {
- toggleLockRatio();
- evt.data && evt.data.preventDefault();
- }, this.getDialog() );
- setupMouseClasses( lockButton );
- }
-
- if ( resetButton ) {
-
-
- dialog.addFocusable( resetButton, 5 + hasFileBrowser );
-
-
- resetButton.on( 'click', function( evt ) {
-
-
- if ( srcChanged ) {
- widthField.setValue( preLoadedWidth );
- heightField.setValue( preLoadedHeight );
- }
-
-
- else {
- widthField.setValue( domWidth );
- heightField.setValue( domHeight );
- }
- evt.data && evt.data.preventDefault();
- }, this );
- setupMouseClasses( resetButton );
- }
- }
- function toggleLockRatio( enable ) {
-
- if ( !lockButton )
- return;
- if ( typeof enable == 'boolean' ) {
-
-
- if ( userDefinedLock )
- return;
- lockRatio = enable;
- }
-
- else {
- var width = widthField.getValue(),
- height;
- userDefinedLock = true;
- lockRatio = !lockRatio;
-
-
- if ( lockRatio && width ) {
- height = domHeight / domWidth * width;
- if ( !isNaN( height ) )
- heightField.setValue( Math.round( height ) );
- }
- }
- lockButton[ lockRatio ? 'removeClass' : 'addClass' ]( 'cke_btn_unlocked' );
- lockButton.setAttribute( 'aria-checked', lockRatio );
-
- if ( CKEDITOR.env.hc ) {
- var icon = lockButton.getChild( 0 );
- icon.setHtml( lockRatio ? CKEDITOR.env.ie ? '\u25A0' : '\u25A3' : CKEDITOR.env.ie ? '\u25A1' : '\u25A2' );
- }
- }
- function toggleDimensions( enable ) {
- var method = enable ? 'enable' : 'disable';
- widthField[ method ]();
- heightField[ method ]();
- }
- var srcBoxChildren = [
- {
- id: 'src',
- type: 'text',
- label: commonLang.url,
- onKeyup: onChangeSrc,
- onChange: onChangeSrc,
- setup: function( widget ) {
- this.setValue( widget.data.src );
- },
- commit: function( widget ) {
- widget.setData( 'src', this.getValue() );
- },
- validate: CKEDITOR.dialog.validate.notEmpty( lang.urlMissing )
- }
- ];
-
-
- if ( hasFileBrowser ) {
- srcBoxChildren.push( {
- type: 'button',
- id: 'browse',
-
-
- style: 'display:inline-block;margin-top:14px;',
- align: 'center',
- label: editor.lang.common.browseServer,
- hidden: true,
- filebrowser: 'info:src'
- } );
- }
- return {
- title: lang.title,
- minWidth: 250,
- minHeight: 100,
- onLoad: function() {
-
- doc = this._.element.getDocument();
-
- preLoader = createPreLoader();
- },
- onShow: function() {
-
- widget = this.getModel();
-
- image = widget.parts.image;
-
- srcChanged = userDefinedLock = lockRatio = false;
-
- natural = getNatural( image );
-
- preLoadedWidth = domWidth = natural.width;
-
- preLoadedHeight = domHeight = natural.height;
- },
- contents: [
- {
- id: 'info',
- label: lang.infoTab,
- elements: [
- {
- type: 'vbox',
- padding: 0,
- children: [
- {
- type: 'hbox',
- widths: [ '100%' ],
- className: 'cke_dialog_image_url',
- children: srcBoxChildren
- }
- ]
- },
- {
- id: 'alt',
- type: 'text',
- label: lang.alt,
- setup: function( widget ) {
- this.setValue( widget.data.alt );
- },
- commit: function( widget ) {
- widget.setData( 'alt', this.getValue() );
- },
- validate: editor.config.image2_altRequired === true ? CKEDITOR.dialog.validate.notEmpty( lang.altMissing ) : null
- },
- {
- type: 'hbox',
- widths: [ '25%', '25%', '50%' ],
- requiredContent: features.dimension.requiredContent,
- children: [
- {
- type: 'text',
- width: '45px',
- id: 'width',
- label: commonLang.width,
- validate: validateDimension,
- onKeyUp: onChangeDimension,
- onLoad: function() {
- widthField = this;
- },
- setup: function( widget ) {
- this.setValue( widget.data.width );
- },
- commit: function( widget ) {
- widget.setData( 'width', this.getValue() );
- }
- },
- {
- type: 'text',
- id: 'height',
- width: '45px',
- label: commonLang.height,
- validate: validateDimension,
- onKeyUp: onChangeDimension,
- onLoad: function() {
- heightField = this;
- },
- setup: function( widget ) {
- this.setValue( widget.data.height );
- },
- commit: function( widget ) {
- widget.setData( 'height', this.getValue() );
- }
- },
- {
- id: 'lock',
- type: 'html',
- style: lockResetStyle,
- onLoad: onLoadLockReset,
- setup: function( widget ) {
- toggleLockRatio( widget.data.lock );
- },
- commit: function( widget ) {
- widget.setData( 'lock', lockRatio );
- },
- html: lockResetHtml
- }
- ]
- },
- {
- type: 'hbox',
- id: 'alignment',
- requiredContent: features.align.requiredContent,
- children: [
- {
- id: 'align',
- type: 'radio',
- items: [
- [ commonLang.alignNone, 'none' ],
- [ commonLang.left, 'left' ],
- [ commonLang.center, 'center' ],
- [ commonLang.right, 'right' ]
- ],
- label: commonLang.align,
- setup: function( widget ) {
- this.setValue( widget.data.align );
- },
- commit: function( widget ) {
- widget.setData( 'align', this.getValue() );
- }
- }
- ]
- },
- {
- id: 'hasCaption',
- type: 'checkbox',
- label: lang.captioned,
- requiredContent: features.caption.requiredContent,
- setup: function( widget ) {
- this.setValue( widget.data.hasCaption );
- },
- commit: function( widget ) {
- widget.setData( 'hasCaption', this.getValue() );
- }
- }
- ]
- },
- {
- id: 'Upload',
- hidden: true,
- filebrowser: 'uploadButton',
- label: lang.uploadTab,
- elements: [
- {
- type: 'file',
- id: 'upload',
- label: lang.btnUpload,
- style: 'height:40px'
- },
- {
- type: 'fileButton',
- id: 'uploadButton',
- filebrowser: 'info:src',
- label: lang.btnUpload,
- 'for': [ 'Upload', 'upload' ]
- }
- ]
- }
- ]
- };
- } );
|