parent
fe9959decc
commit
5b83b2540d
5 changed files with 23 additions and 384 deletions
@ -1,332 +0,0 @@ |
|||||||
// Copy+pasted from /static/filer/js/popup_handling.js, because we can't always count on this being loaded.
|
|
||||||
|
|
||||||
(function($) { |
|
||||||
dismissPopupAndReload = function(win) { |
|
||||||
document.location.reload(); |
|
||||||
win.close(); |
|
||||||
}; |
|
||||||
dismissRelatedImageLookupPopup = function(win, chosenId, chosenThumbnailUrl, chosenDescriptionTxt) { |
|
||||||
var name = windowname_to_id(win.name); |
|
||||||
var img_name = name + '_thumbnail_img'; |
|
||||||
var txt_name = name + '_description_txt'; |
|
||||||
var clear_name = name + '_clear'; |
|
||||||
var elem = document.getElementById(name); |
|
||||||
document.getElementById(name).value = chosenId; |
|
||||||
document.getElementById(img_name).src = chosenThumbnailUrl; |
|
||||||
document.getElementById(txt_name).innerHTML = chosenDescriptionTxt; |
|
||||||
document.getElementById(clear_name).style.display = 'inline'; |
|
||||||
win.close(); |
|
||||||
}; |
|
||||||
dismissRelatedFolderLookupPopup = function(win, chosenId, chosenName) { |
|
||||||
var id = windowname_to_id(win.name); |
|
||||||
var id_name = id + '_description_txt'; |
|
||||||
document.getElementById(id).value = chosenId; |
|
||||||
document.getElementById(id_name).innerHTML = chosenName; |
|
||||||
win.close(); |
|
||||||
}; |
|
||||||
})(jQuery); |
|
||||||
|
|
||||||
CKEDITOR.dialog.add( 'filerImageDialog', function ( editor ) { |
|
||||||
dialog = CKEDITOR.dialog.getCurrent(); |
|
||||||
var imageWidth = 0; |
|
||||||
var imageHeight = 0; |
|
||||||
|
|
||||||
function getImageUrl() { |
|
||||||
var url = dialog.getContentElement("tab-basic", "url"); |
|
||||||
var thumb_sel_val = dialog.getContentElement("tab-basic", "thumbnail_option").getValue(); |
|
||||||
if (thumb_sel_val != 0) { |
|
||||||
server_url = '?djangocms_ckeditor_filer_image='+ django.jQuery('#id_image').val() + '&thumb_options=' + thumb_sel_val; |
|
||||||
} else { |
|
||||||
width = dialog.getContentElement("tab-basic", "width").getValue(); |
|
||||||
height = dialog.getContentElement("tab-basic", "height").getValue(); |
|
||||||
server_url = '?djangocms_ckeditor_filer_image='+ django.jQuery('#id_image').val() + '&width=' + width + '&height=' + height; |
|
||||||
} |
|
||||||
django.jQuery.get(server_url, function(data) { |
|
||||||
url.setValue(data.url); |
|
||||||
imageWidth = data.width; |
|
||||||
imageHeight = data.height; |
|
||||||
}); |
|
||||||
} |
|
||||||
return { |
|
||||||
title: 'Filer Image Properties', |
|
||||||
minWidth: 400, |
|
||||||
minHeight: 200, |
|
||||||
|
|
||||||
onShow: function() { |
|
||||||
dialog = CKEDITOR.dialog.getCurrent(); |
|
||||||
var document = this.getElement().getDocument(); |
|
||||||
// document = CKEDITOR.dom.document
|
|
||||||
var id_image = document.getById( 'id_image' ); |
|
||||||
var oldVal = id_image.getValue(); |
|
||||||
|
|
||||||
setInterval(function () { |
|
||||||
if (oldVal != id_image.getValue()) { |
|
||||||
oldVal = id_image.getValue(); |
|
||||||
getImageUrl(); |
|
||||||
} |
|
||||||
}, 1000); |
|
||||||
if ( id_image ) |
|
||||||
id_image.hide(); |
|
||||||
var id_image_clear = document.getById( 'id_image_clear' ); |
|
||||||
|
|
||||||
id_image_clear.on('click', function () { |
|
||||||
id_image.setValue(""); |
|
||||||
id_image.removeAttribute("value"); |
|
||||||
id_image_thumbnail_img = document.getById( 'id_image_thumbnail_img' ); |
|
||||||
id_image_thumbnail_img.setAttribute("src", editor.config.settings.static_url +'/../filer/icons/nofile_48x48.png'); |
|
||||||
id_image_description_txt = document.getById( 'id_image_description_txt' ); |
|
||||||
id_image_description_txt.setHtml(""); |
|
||||||
id_image_clear = document.getById( 'id_image_clear' ); |
|
||||||
id_image_clear.hide(); |
|
||||||
}); |
|
||||||
|
|
||||||
// Get the selection in the editor.
|
|
||||||
var selection = editor.getSelection(); |
|
||||||
|
|
||||||
// Get the element at the start of the selection.
|
|
||||||
var element = selection.getStartElement(); |
|
||||||
|
|
||||||
// Get the <img> element closest to the selection, if any.
|
|
||||||
if ( element ) |
|
||||||
element = element.getAscendant( 'img', true ); |
|
||||||
|
|
||||||
// Create a new <img> element if it does not exist.
|
|
||||||
if ( !element || element.getName() != 'img' ) { |
|
||||||
element = editor.document.createElement( 'img' ); |
|
||||||
|
|
||||||
// Flag the insertion mode for later use.
|
|
||||||
this.insertMode = true; |
|
||||||
} |
|
||||||
else |
|
||||||
this.insertMode = false; |
|
||||||
|
|
||||||
// Store the reference to the <abbr> element in an internal property, for later use.
|
|
||||||
this.element = element; |
|
||||||
|
|
||||||
// Invoke the setup methods of all dialog elements, so they can load the element attributes.
|
|
||||||
if ( !this.insertMode ) |
|
||||||
this.setupContent( this.element ); |
|
||||||
else |
|
||||||
id_image_clear.fire('click'); |
|
||||||
}, |
|
||||||
// This method is invoked once a user clicks the OK button, confirming the dialog.
|
|
||||||
onOk: function() { |
|
||||||
|
|
||||||
// The context of this function is the dialog object itself.
|
|
||||||
// http://docs.ckeditor.com/#!/api/CKEDITOR.dialog
|
|
||||||
var dialog = this; |
|
||||||
|
|
||||||
// Creates a new <abbr> element.
|
|
||||||
var abbr = this.element; |
|
||||||
|
|
||||||
// Invoke the commit methods of all dialog elements, so the <abbr> element gets modified.
|
|
||||||
this.commitContent( abbr ); |
|
||||||
|
|
||||||
// Finally, in if insert mode, inserts the element at the editor caret position.
|
|
||||||
if ( this.insertMode ) |
|
||||||
editor.insertElement( abbr ); |
|
||||||
}, |
|
||||||
|
|
||||||
contents: [ |
|
||||||
{ |
|
||||||
id: 'tab-basic', |
|
||||||
label: 'Basic Settings', |
|
||||||
elements: [ |
|
||||||
{ |
|
||||||
type: 'html', |
|
||||||
html: |
|
||||||
'<div class="field-box field-image">' + |
|
||||||
'<label for="id_image">Image:</label>' + |
|
||||||
'<img alt="no file selected" class="quiet" src="'+ editor.config.settings.static_url +'/../filer/icons/nofile_48x48.png" id="id_image_thumbnail_img">' + |
|
||||||
' <span id="id_image_description_txt"></span>' + |
|
||||||
'<a onclick="return showRelatedObjectLookupPopup(this);" title="Pretraži" id="lookup_id_image" class="related-lookup" href="/admin/filer/folder/last/?t=file_ptr">' + |
|
||||||
'<img width="16" height="16" alt="Pretraži" src="'+ editor.config.settings.static_url +'/../admin/img/icon_searchbox.png">' + |
|
||||||
'</a>' + |
|
||||||
'<img width="10" height="10" style="display: none;" title="Očisti" alt="Očisti" src="'+ editor.config.settings.static_url +'/../admin/img/icon_deletelink.gif" id="id_image_clear">' + |
|
||||||
'<br><input type="text" id="id_image" name="image" class="vForeignKeyRawIdAdminField">' + |
|
||||||
'</div>', |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'text', |
|
||||||
id: 'url', |
|
||||||
label: 'Url', |
|
||||||
setup: function( element ) { |
|
||||||
this.setValue( element.getAttribute( "src" ) ); |
|
||||||
}, |
|
||||||
// Called by the main commitContent call on dialog confirmation.
|
|
||||||
commit: function( element ) { |
|
||||||
element.setAttribute( "src", this.getValue() ); |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'text', |
|
||||||
id: 'caption', |
|
||||||
label: 'Caption', |
|
||||||
setup: function( element ) { |
|
||||||
this.setValue( element.getAttribute( "title" ) ); |
|
||||||
}, |
|
||||||
// Called by the main commitContent call on dialog confirmation.
|
|
||||||
commit: function( element ) { |
|
||||||
element.setAttribute( "title", this.getValue() ); |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'text', |
|
||||||
id: 'alt_text', |
|
||||||
label: 'Alt', |
|
||||||
setup: function( element ) { |
|
||||||
this.setValue( element.getAttribute( "alt" ) ); |
|
||||||
}, |
|
||||||
// Called by the main commitContent call on dialog confirmation.
|
|
||||||
commit: function( element ) { |
|
||||||
element.setAttribute( "alt", this.getValue() ); |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'hbox', |
|
||||||
widths: [ '50%', '50%', ], |
|
||||||
children: [ |
|
||||||
{ |
|
||||||
type: 'checkbox', |
|
||||||
id: 'use_original_image', |
|
||||||
label: 'Use original image', |
|
||||||
setup: function( element ) { |
|
||||||
this.setValue( element.getAttribute( "original_image" ) ); |
|
||||||
}, |
|
||||||
// Called by the main commitContent call on dialog confirmation.
|
|
||||||
commit: function( element ) { |
|
||||||
element.setAttribute( "original_image", this.getValue() ); |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'select', |
|
||||||
id: 'thumbnail_option', |
|
||||||
items : [ ['--- Thumbnail ---',0] ], |
|
||||||
onLoad : function() { |
|
||||||
var element_id = '#' + this.getInputElement().$.id; |
|
||||||
django.jQuery.ajax({ |
|
||||||
type: 'GET', |
|
||||||
url: '?djangocms_ckeditor_filer_thumbnail_options', |
|
||||||
contentType: 'application/json; charset=utf-8', |
|
||||||
dataType: 'json', |
|
||||||
async: false, |
|
||||||
success: function(data) { |
|
||||||
django.jQuery.each(data, function(index, item) { |
|
||||||
django.jQuery(element_id).get(0).options[django.jQuery(element_id).get(0).options.length] = new Option(item.name, item.id); |
|
||||||
}); |
|
||||||
}, |
|
||||||
error:function (xhr, ajaxOptions, thrownError){ |
|
||||||
alert(xhr.status); |
|
||||||
alert(thrownError); |
|
||||||
}
|
|
||||||
}); |
|
||||||
}, |
|
||||||
onChange: function() { |
|
||||||
getImageUrl(); |
|
||||||
}, |
|
||||||
setup: function( element ) { |
|
||||||
this.setValue( element.getAttribute( "thumb_option" ) ); |
|
||||||
}, |
|
||||||
// Called by the main commitContent call on dialog confirmation.
|
|
||||||
commit: function( element ) { |
|
||||||
element.setAttribute( "thumb_option", this.getValue() ); |
|
||||||
} |
|
||||||
}, |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'hbox', |
|
||||||
widths: [ '50%', '50%', ], |
|
||||||
children: [ |
|
||||||
{ |
|
||||||
type: 'text', |
|
||||||
id: 'width', |
|
||||||
label: 'Width', |
|
||||||
onChange: function () { |
|
||||||
if (this.getValue() != "") { |
|
||||||
ratio = this.getValue() / imageWidth; // get ratio for scaling image
|
|
||||||
dialog.getContentElement("tab-basic", "height").setValue(Math.ceil(imageHeight * ratio)); |
|
||||||
} |
|
||||||
|
|
||||||
//getImageUrl();
|
|
||||||
}, |
|
||||||
setup: function( element ) { |
|
||||||
this.setValue( element.getAttribute( "width" ) ); |
|
||||||
}, |
|
||||||
// Called by the main commitContent call on dialog confirmation.
|
|
||||||
commit: function( element ) { |
|
||||||
element.setAttribute( "width", this.getValue() ); |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'text', |
|
||||||
id: 'height', |
|
||||||
label: 'Height', |
|
||||||
onChange: function () { |
|
||||||
getImageUrl(); |
|
||||||
}, |
|
||||||
setup: function( element ) { |
|
||||||
this.setValue( element.getAttribute( "height" ) ); |
|
||||||
}, |
|
||||||
// Called by the main commitContent call on dialog confirmation.
|
|
||||||
commit: function( element ) { |
|
||||||
element.setAttribute( "height", this.getValue() ); |
|
||||||
} |
|
||||||
}, |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'hbox', |
|
||||||
widths: [ '33%', '33%', '33%' ], |
|
||||||
children: [ |
|
||||||
{ |
|
||||||
type: 'checkbox', |
|
||||||
id: 'crop', |
|
||||||
label: 'Crop', |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'checkbox', |
|
||||||
id: 'upscale', |
|
||||||
label: 'Upscale', |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'checkbox', |
|
||||||
id: 'use_autoscale', |
|
||||||
label: 'Autoscale', |
|
||||||
}, |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'select', |
|
||||||
id: 'alignment', |
|
||||||
label : 'Alignment', |
|
||||||
items: [ ["left"], ["right"] ], |
|
||||||
setup: function( element ) { |
|
||||||
this.setValue( element.getAttribute( "align" ) ); |
|
||||||
}, |
|
||||||
// Called by the main commitContent call on dialog confirmation.
|
|
||||||
commit: function( element ) { |
|
||||||
element.setAttribute( "align", this.getValue() ); |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'checkbox', |
|
||||||
id: 'target_blank', |
|
||||||
label: 'Target blank',
|
|
||||||
}, |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
id: 'tab-adv', |
|
||||||
label: 'Advanced Settings', |
|
||||||
elements: [ |
|
||||||
{ |
|
||||||
type: 'text', |
|
||||||
id: 'css_style', |
|
||||||
label: 'CSS', |
|
||||||
}, |
|
||||||
] |
|
||||||
} |
|
||||||
] |
|
||||||
}; |
|
||||||
}); |
|
||||||
|
Before Width: | Height: | Size: 3.5 KiB |
@ -1,33 +0,0 @@ |
|||||||
CKEDITOR.plugins.add( 'filerimage', { |
|
||||||
icons: 'filerimage', |
|
||||||
init: function( editor ) { |
|
||||||
editor.addCommand( 'filerImageDialog', new CKEDITOR.dialogCommand( 'filerImageDialog' ) ); |
|
||||||
|
|
||||||
editor.ui.addButton( 'Filer Image', { |
|
||||||
label: 'Insert filer image', |
|
||||||
command: 'filerImageDialog', |
|
||||||
toolbar: 'insert', |
|
||||||
icon: 'filerimage' |
|
||||||
}); |
|
||||||
|
|
||||||
if ( editor.contextMenu ) { |
|
||||||
editor.addMenuGroup( 'Filer' ); |
|
||||||
editor.addMenuItem( 'imageItem', { |
|
||||||
label: 'Edit image', |
|
||||||
icon: this.path + 'icons/filerimage.png', |
|
||||||
command: 'filerImageDialog', |
|
||||||
group: 'Filer' |
|
||||||
}); |
|
||||||
|
|
||||||
editor.contextMenu.addListener( function( element ) { |
|
||||||
if ( element.getAscendant( 'img', true ) ) { |
|
||||||
return { imageItem: CKEDITOR.TRISTATE_OFF }; |
|
||||||
} |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
CKEDITOR.dialog.add( 'filerImageDialog', this.path + 'dialogs/filerImageDialog.js' ); |
|
||||||
|
|
||||||
var dialog = CKEDITOR.dialog.getCurrent(); |
|
||||||
} |
|
||||||
}); |
|
||||||
Loading…
Reference in new issue