diff options
Diffstat (limited to 'sources/plugins/resize')
-rw-r--r-- | sources/plugins/resize/plugin.js | 187 |
1 files changed, 187 insertions, 0 deletions
diff --git a/sources/plugins/resize/plugin.js b/sources/plugins/resize/plugin.js new file mode 100644 index 00000000..f57990c8 --- /dev/null +++ b/sources/plugins/resize/plugin.js | |||
@@ -0,0 +1,187 @@ | |||
1 | /** | ||
2 | * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved. | ||
3 | * For licensing, see LICENSE.md or http://ckeditor.com/license | ||
4 | */ | ||
5 | |||
6 | CKEDITOR.plugins.add( 'resize', { | ||
7 | init: function( editor ) { | ||
8 | function dragHandler( evt ) { | ||
9 | var dx = evt.data.$.screenX - origin.x, | ||
10 | dy = evt.data.$.screenY - origin.y, | ||
11 | width = startSize.width, | ||
12 | height = startSize.height, | ||
13 | internalWidth = width + dx * ( resizeDir == 'rtl' ? -1 : 1 ), | ||
14 | internalHeight = height + dy; | ||
15 | |||
16 | if ( resizeHorizontal ) | ||
17 | width = Math.max( config.resize_minWidth, Math.min( internalWidth, config.resize_maxWidth ) ); | ||
18 | |||
19 | if ( resizeVertical ) | ||
20 | height = Math.max( config.resize_minHeight, Math.min( internalHeight, config.resize_maxHeight ) ); | ||
21 | |||
22 | // DO NOT impose fixed size with single direction resize. (#6308) | ||
23 | editor.resize( resizeHorizontal ? width : null, height ); | ||
24 | } | ||
25 | |||
26 | function dragEndHandler() { | ||
27 | CKEDITOR.document.removeListener( 'mousemove', dragHandler ); | ||
28 | CKEDITOR.document.removeListener( 'mouseup', dragEndHandler ); | ||
29 | |||
30 | if ( editor.document ) { | ||
31 | editor.document.removeListener( 'mousemove', dragHandler ); | ||
32 | editor.document.removeListener( 'mouseup', dragEndHandler ); | ||
33 | } | ||
34 | } | ||
35 | |||
36 | var config = editor.config; | ||
37 | var spaceId = editor.ui.spaceId( 'resizer' ); | ||
38 | |||
39 | // Resize in the same direction of chrome, | ||
40 | // which is identical to dir of editor element. (#6614) | ||
41 | var resizeDir = editor.element ? editor.element.getDirection( 1 ) : 'ltr'; | ||
42 | |||
43 | !config.resize_dir && ( config.resize_dir = 'vertical' ); | ||
44 | ( config.resize_maxWidth === undefined ) && ( config.resize_maxWidth = 3000 ); | ||
45 | ( config.resize_maxHeight === undefined ) && ( config.resize_maxHeight = 3000 ); | ||
46 | ( config.resize_minWidth === undefined ) && ( config.resize_minWidth = 750 ); | ||
47 | ( config.resize_minHeight === undefined ) && ( config.resize_minHeight = 250 ); | ||
48 | |||
49 | if ( config.resize_enabled !== false ) { | ||
50 | var container = null, | ||
51 | origin, startSize, | ||
52 | resizeHorizontal = ( config.resize_dir == 'both' || config.resize_dir == 'horizontal' ) && ( config.resize_minWidth != config.resize_maxWidth ), | ||
53 | resizeVertical = ( config.resize_dir == 'both' || config.resize_dir == 'vertical' ) && ( config.resize_minHeight != config.resize_maxHeight ); | ||
54 | |||
55 | var mouseDownFn = CKEDITOR.tools.addFunction( function( $event ) { | ||
56 | if ( !container ) | ||
57 | container = editor.getResizable(); | ||
58 | |||
59 | startSize = { width: container.$.offsetWidth || 0, height: container.$.offsetHeight || 0 }; | ||
60 | origin = { x: $event.screenX, y: $event.screenY }; | ||
61 | |||
62 | config.resize_minWidth > startSize.width && ( config.resize_minWidth = startSize.width ); | ||
63 | config.resize_minHeight > startSize.height && ( config.resize_minHeight = startSize.height ); | ||
64 | |||
65 | CKEDITOR.document.on( 'mousemove', dragHandler ); | ||
66 | CKEDITOR.document.on( 'mouseup', dragEndHandler ); | ||
67 | |||
68 | if ( editor.document ) { | ||
69 | editor.document.on( 'mousemove', dragHandler ); | ||
70 | editor.document.on( 'mouseup', dragEndHandler ); | ||
71 | } | ||
72 | |||
73 | $event.preventDefault && $event.preventDefault(); | ||
74 | } ); | ||
75 | |||
76 | editor.on( 'destroy', function() { | ||
77 | CKEDITOR.tools.removeFunction( mouseDownFn ); | ||
78 | } ); | ||
79 | |||
80 | editor.on( 'uiSpace', function( event ) { | ||
81 | if ( event.data.space == 'bottom' ) { | ||
82 | var direction = ''; | ||
83 | if ( resizeHorizontal && !resizeVertical ) | ||
84 | direction = ' cke_resizer_horizontal'; | ||
85 | if ( !resizeHorizontal && resizeVertical ) | ||
86 | direction = ' cke_resizer_vertical'; | ||
87 | |||
88 | var resizerHtml = | ||
89 | '<span' + | ||
90 | ' id="' + spaceId + '"' + | ||
91 | ' class="cke_resizer' + direction + ' cke_resizer_' + resizeDir + '"' + | ||
92 | ' title="' + CKEDITOR.tools.htmlEncode( editor.lang.common.resize ) + '"' + | ||
93 | ' onmousedown="CKEDITOR.tools.callFunction(' + mouseDownFn + ', event)"' + | ||
94 | '>' + | ||
95 | // BLACK LOWER RIGHT TRIANGLE (ltr) | ||
96 | // BLACK LOWER LEFT TRIANGLE (rtl) | ||
97 | ( resizeDir == 'ltr' ? '\u25E2' : '\u25E3' ) + | ||
98 | '</span>'; | ||
99 | |||
100 | // Always sticks the corner of botttom space. | ||
101 | resizeDir == 'ltr' && direction == 'ltr' ? event.data.html += resizerHtml : event.data.html = resizerHtml + event.data.html; | ||
102 | } | ||
103 | }, editor, null, 100 ); | ||
104 | |||
105 | // Toggle the visibility of the resizer when an editor is being maximized or minimized. | ||
106 | editor.on( 'maximize', function( event ) { | ||
107 | editor.ui.space( 'resizer' )[ event.data == CKEDITOR.TRISTATE_ON ? 'hide' : 'show' ](); | ||
108 | } ); | ||
109 | } | ||
110 | } | ||
111 | } ); | ||
112 | |||
113 | /** | ||
114 | * The minimum editor width, in pixels, when resizing the editor interface by using the resize handle. | ||
115 | * Note: It falls back to editor's actual width if it is smaller than the default value. | ||
116 | * | ||
117 | * Read more in the [documentation](#!/guide/dev_resize) | ||
118 | * and see the [SDK sample](http://sdk.ckeditor.com/samples/resize.html). | ||
119 | * | ||
120 | * config.resize_minWidth = 500; | ||
121 | * | ||
122 | * @cfg {Number} [resize_minWidth=750] | ||
123 | * @member CKEDITOR.config | ||
124 | */ | ||
125 | |||
126 | /** | ||
127 | * The minimum editor height, in pixels, when resizing the editor interface by using the resize handle. | ||
128 | * Note: It falls back to editor's actual height if it is smaller than the default value. | ||
129 | * | ||
130 | * Read more in the [documentation](#!/guide/dev_resize) | ||
131 | * and see the [SDK sample](http://sdk.ckeditor.com/samples/resize.html). | ||
132 | * | ||
133 | * config.resize_minHeight = 600; | ||
134 | * | ||
135 | * @cfg {Number} [resize_minHeight=250] | ||
136 | * @member CKEDITOR.config | ||
137 | */ | ||
138 | |||
139 | /** | ||
140 | * The maximum editor width, in pixels, when resizing the editor interface by using the resize handle. | ||
141 | * | ||
142 | * Read more in the [documentation](#!/guide/dev_resize) | ||
143 | * and see the [SDK sample](http://sdk.ckeditor.com/samples/resize.html). | ||
144 | * | ||
145 | * config.resize_maxWidth = 750; | ||
146 | * | ||
147 | * @cfg {Number} [resize_maxWidth=3000] | ||
148 | * @member CKEDITOR.config | ||
149 | */ | ||
150 | |||
151 | /** | ||
152 | * The maximum editor height, in pixels, when resizing the editor interface by using the resize handle. | ||
153 | * | ||
154 | * Read more in the [documentation](#!/guide/dev_resize) | ||
155 | * and see the [SDK sample](http://sdk.ckeditor.com/samples/resize.html). | ||
156 | * | ||
157 | * config.resize_maxHeight = 600; | ||
158 | * | ||
159 | * @cfg {Number} [resize_maxHeight=3000] | ||
160 | * @member CKEDITOR.config | ||
161 | */ | ||
162 | |||
163 | /** | ||
164 | * Whether to enable the resizing feature. If this feature is disabled, the resize handle will not be visible. | ||
165 | * | ||
166 | * Read more in the [documentation](#!/guide/dev_resize) | ||
167 | * and see the [SDK sample](http://sdk.ckeditor.com/samples/resize.html). | ||
168 | * | ||
169 | * config.resize_enabled = false; | ||
170 | * | ||
171 | * @cfg {Boolean} [resize_enabled=true] | ||
172 | * @member CKEDITOR.config | ||
173 | */ | ||
174 | |||
175 | /** | ||
176 | * The dimensions for which the editor resizing is enabled. Possible values | ||
177 | * are `both`, `vertical`, and `horizontal`. | ||
178 | * | ||
179 | * Read more in the [documentation](#!/guide/dev_resize) | ||
180 | * and see the [SDK sample](http://sdk.ckeditor.com/samples/resize.html). | ||
181 | * | ||
182 | * config.resize_dir = 'both'; | ||
183 | * | ||
184 | * @since 3.3 | ||
185 | * @cfg {String} [resize_dir='vertical'] | ||
186 | * @member CKEDITOR.config | ||
187 | */ | ||