287 lines
7.9 KiB
JavaScript
287 lines
7.9 KiB
JavaScript
|
|
CKEDITOR.dialog.add( 'googlemapsIcons', function( editor ) {
|
|
'use strict';
|
|
|
|
var MarkerColors = editor.config.googleMaps_markerColors || [ 'green', 'purple', 'yellow', 'blue', 'orange', 'red' ],
|
|
columns = MarkerColors.length,
|
|
images = [],
|
|
dialog;
|
|
|
|
for (var i = 0; i < columns; i++ ) {
|
|
var name = MarkerColors[i];
|
|
images.push({ name:name, src:'https://maps.gstatic.com/mapfiles/ms/micons/' + name + '-dot.png' } );
|
|
}
|
|
|
|
var icons = editor.config.googleMaps_Icons;
|
|
if (icons) {
|
|
for (name in icons) {
|
|
var icon = icons[ name ];
|
|
images.push( { name:name, src:icon.marker.image } );
|
|
}
|
|
columns = Math.min( 10, images.length );
|
|
}
|
|
|
|
/**
|
|
* Simulate "this" of a dialog for non-dialog events.
|
|
* @type {CKEDITOR.dialog}
|
|
*/
|
|
var onClick = function( evt ) {
|
|
var target = evt.data.getTarget(),
|
|
targetName = target.getName();
|
|
|
|
if ( targetName == 'a' )
|
|
target = target.getChild( 0 );
|
|
else if ( targetName != 'img' )
|
|
return;
|
|
|
|
var name = target.getAttribute( 'data-name' );
|
|
|
|
dialog.onSelect( name );
|
|
|
|
dialog.hide();
|
|
evt.data.preventDefault();
|
|
};
|
|
|
|
var onKeydown = CKEDITOR.tools.addFunction( function( ev, element ) {
|
|
ev = new CKEDITOR.dom.event( ev );
|
|
element = new CKEDITOR.dom.element( element );
|
|
var relative, nodeToMove;
|
|
|
|
var keystroke = ev.getKeystroke();
|
|
var rtl = editor.lang.dir == 'rtl';
|
|
switch ( keystroke ) {
|
|
// UP-ARROW
|
|
case 38 :
|
|
// relative is TR
|
|
if ( ( relative = element.getParent().getParent().getPrevious() ) ) {
|
|
nodeToMove = relative.getChild( [ element.getParent().getIndex(), 0 ] );
|
|
nodeToMove.focus();
|
|
}
|
|
ev.preventDefault();
|
|
break;
|
|
// DOWN-ARROW
|
|
case 40 :
|
|
// relative is TR
|
|
if ( ( relative = element.getParent().getParent().getNext() ) ) {
|
|
nodeToMove = relative.getChild( [ element.getParent().getIndex(), 0 ] );
|
|
if ( nodeToMove )
|
|
nodeToMove.focus();
|
|
}
|
|
ev.preventDefault();
|
|
break;
|
|
// ENTER
|
|
// SPACE
|
|
case 32 :
|
|
onClick( { data: ev } );
|
|
ev.preventDefault();
|
|
break;
|
|
|
|
// RIGHT-ARROW
|
|
case rtl ? 37 : 39 :
|
|
// TAB
|
|
case 9 :
|
|
// relative is TD
|
|
if ( ( relative = element.getParent().getNext() ) ) {
|
|
nodeToMove = relative.getChild( 0 );
|
|
nodeToMove.focus();
|
|
ev.preventDefault(true);
|
|
} else {
|
|
// relative is TR
|
|
if ( ( relative = element.getParent().getParent().getNext() ) ) {
|
|
nodeToMove = relative.getChild( [ 0, 0 ] );
|
|
if ( nodeToMove )
|
|
nodeToMove.focus();
|
|
ev.preventDefault(true);
|
|
}
|
|
}
|
|
break;
|
|
|
|
// LEFT-ARROW
|
|
case rtl ? 39 : 37 :
|
|
// SHIFT + TAB
|
|
case CKEDITOR.SHIFT + 9 :
|
|
// relative is TD
|
|
if ( ( relative = element.getParent().getPrevious() ) ) {
|
|
nodeToMove = relative.getChild( 0 );
|
|
nodeToMove.focus();
|
|
ev.preventDefault(true);
|
|
} else {
|
|
// relative is TR
|
|
if ( ( relative = element.getParent().getParent().getPrevious() ) ) {
|
|
nodeToMove = relative.getLast().getChild( 0 );
|
|
nodeToMove.focus();
|
|
ev.preventDefault(true);
|
|
}
|
|
}
|
|
break;
|
|
default :
|
|
// Do not stop not handled events.
|
|
return;
|
|
}
|
|
});
|
|
|
|
var buildHtml = function() {
|
|
// Build the HTML for the images table.
|
|
var html = [
|
|
'<table style="width:100%;height:100%" cellspacing="2" cellpadding="2"',
|
|
CKEDITOR.env.ie && CKEDITOR.env.quirks ? ' style="position:absolute;"' : '',
|
|
'><tbody>'
|
|
];
|
|
|
|
for ( i = 0 ; i < images.length ; i++ ) {
|
|
if ( i % columns === 0 )
|
|
html.push( '<tr>' );
|
|
|
|
var image = images[ i ];
|
|
html.push(
|
|
'<td class="cke_centered" style="vertical-align: middle;">' +
|
|
'<a href="javascript:void(0)"',
|
|
' class="cke_hand" tabindex="-1" onkeydown="CKEDITOR.tools.callFunction( ', onKeydown, ', event, this );">',
|
|
'<img class="cke_hand" ' +
|
|
' src="', image.src , '"',
|
|
' data-name="', image.name, '"',
|
|
// IE BUG: Below is a workaround to an IE image loading bug to ensure the image sizes are correct.
|
|
( CKEDITOR.env.ie ? ' onload="this.setAttribute(\'width\', 2); this.removeAttribute(\'width\');" ' : '' ),
|
|
'>' +
|
|
'</a>',
|
|
'</td>' );
|
|
|
|
if ( i % columns == columns - 1 )
|
|
html.push( '</tr>' );
|
|
}
|
|
|
|
if ( i < columns - 1 ) {
|
|
for ( ; i < columns - 1 ; i++ )
|
|
html.push( '<td></td>' );
|
|
html.push( '</tr>' );
|
|
}
|
|
|
|
html.push( '</tbody></table>' );
|
|
return html.join( '' );
|
|
};
|
|
|
|
var imagesSelector = {
|
|
type : 'html',
|
|
html : '<div>' + buildHtml() + '</div>',
|
|
id : 'imagesSelector',
|
|
onLoad : function( event ) {
|
|
dialog = event.sender;
|
|
},
|
|
focus : function() {
|
|
var size = images.length,
|
|
i;
|
|
for ( i = 0 ; i < size ; i++ ) {
|
|
if (images[i].name == dialog.initialName)
|
|
break;
|
|
}
|
|
var initialImage = this.getElement().getElementsByTag( 'a' ).getItem( i );
|
|
initialImage.focus();
|
|
},
|
|
onClick : onClick,
|
|
style : 'width: 100%; border-collapse: separate;'
|
|
};
|
|
|
|
function resolveUrl(url) {
|
|
// Resolve the url so it becomes a full URL including the host
|
|
var img = document.createElement('IMG');
|
|
img.src = url;
|
|
url = img.src;
|
|
img = null;
|
|
return url;
|
|
}
|
|
|
|
return {
|
|
title : editor.lang.googlemaps.selectIcon,
|
|
minWidth : 270,
|
|
minHeight : 80,
|
|
contents : [
|
|
{
|
|
id : 'Info',
|
|
label : '',
|
|
title : '',
|
|
padding : 0,
|
|
elements : [
|
|
imagesSelector,
|
|
{
|
|
type:'hbox',
|
|
children: [
|
|
{
|
|
type : 'button',
|
|
id : 'browse',
|
|
style : 'margin-top:4px;margin-bottom:2px; display:inline-block;',
|
|
label : editor.lang.common.browseServer,
|
|
filebrowser :
|
|
{
|
|
action : 'Browse',
|
|
target: 'Info:txtUrl',
|
|
url: editor.config.filebrowserIconBrowseUrl || editor.config.filebrowserImageBrowseUrl || editor.config.filebrowserBrowseUrl
|
|
}
|
|
},
|
|
{
|
|
type:'text',
|
|
hidden:true,
|
|
id:'txtUrl',
|
|
onChange: function() {
|
|
// Add new icon and select it:
|
|
var value = resolveUrl(this.getValue()),
|
|
nameParts = value.match(/([^\/]+)\.[^\/]*$/) || value.match(/([^\/]+)[^\/]*$/),
|
|
name = nameParts && nameParts[1] || value,
|
|
dialog = this.getDialog(),
|
|
resized = false;
|
|
|
|
// clean up
|
|
name = name.replace(/[^\w]/g, '');
|
|
|
|
// Initialize the object if it doesn't exist
|
|
if (!editor.config.googleMaps_Icons)
|
|
editor.config.googleMaps_Icons = {};
|
|
|
|
// Add the image if it isn't available in the set
|
|
if (!editor.config.googleMaps_Icons[ name ]) {
|
|
// Push the new marker
|
|
var marker = { marker : { image: value } },
|
|
shadow = editor.config.googleMaps_shadowMarker;
|
|
if (shadow) {
|
|
if (typeof shadow != 'string')
|
|
shadow = shadow( value );
|
|
marker.shadow = { image: shadow };
|
|
}
|
|
editor.config.googleMaps_Icons[ name ] = marker;
|
|
|
|
images.push( { name:name, src:value } );
|
|
var contents = dialog.parts.contents,
|
|
contentTable = contents.getFirst().getFirst().$,
|
|
initial = { width:contentTable.offsetWidth, height: contentTable.offsetHeight };
|
|
|
|
// rebuild the table so it shows correctly when the dialog opens again
|
|
dialog.getContentElement('Info', 'imagesSelector').getElement().setHtml( buildHtml() );
|
|
|
|
// Check if we need to resize the dialog
|
|
if (contentTable.offsetWidth > initial.width || contentTable.offsetHeight > initial.height) {
|
|
resized = true;
|
|
dialog.resize( contentTable.offsetWidth, contentTable.offsetHeight);
|
|
}
|
|
}
|
|
|
|
// select it
|
|
dialog.onSelect( name );
|
|
|
|
if ( !resized || !CKEDITOR.env.ie || CKEDITOR.env.ie9Compat )
|
|
dialog.hide();
|
|
else {
|
|
// In some skins there's a function executed on a timeout after a dialog resize,
|
|
// so we must delay the hide until it's performed.
|
|
setTimeout( function() { dialog.hide(); }, ( editor.lang.dir == 'rtl' ? 1001 : 101) );
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
],
|
|
|
|
buttons : [ CKEDITOR.dialog.cancelButton ]
|
|
};
|
|
} );
|