You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
332 lines
15 KiB
332 lines
15 KiB
// 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',
|
|
},
|
|
]
|
|
}
|
|
]
|
|
};
|
|
});
|
|
|