484 lines
14 KiB
JavaScript
484 lines
14 KiB
JavaScript
/**
|
|
* Functions for HtmlEditorFields in the back end.
|
|
* Includes the JS for the ImageUpload forms.
|
|
*
|
|
* Relies on the jquery.form.js plugin to power the
|
|
* ajax / iframe submissions
|
|
*/
|
|
|
|
(function($) {
|
|
|
|
$(document).ready(function() {
|
|
|
|
// jQuery('#Form_EditorToolbarLinkForm').dialog('open')
|
|
|
|
/**
|
|
* On page refresh load the initial images (in root)
|
|
*/
|
|
if($("#FolderImages").length > 0 && $("body.CMSMain").length > 0) loadImages(false);
|
|
|
|
/**
|
|
* Show / Hide the Upload Form
|
|
*/
|
|
$("#Form_EditorToolbarImageForm .showUploadField a").click(function() {
|
|
if($(this).hasClass("showing")) {
|
|
$("#Form_EditorToolbarImageForm_Files-0").parents('.file').hide();
|
|
$(this).text(ss.i18n._t('HtmlEditorField.ShowUploadForm', 'Upload File')).removeClass("showing");
|
|
}
|
|
else {
|
|
$("#Form_EditorToolbarImageForm_Files-0").parents('.file').show();
|
|
$(this).text(ss.i18n._t('HtmlEditorField.HideUploadForm', 'Hide Upload Form')).addClass("showing");
|
|
}
|
|
return false;
|
|
}).show();
|
|
|
|
/**
|
|
* On folder change - lookup the new images
|
|
*/
|
|
$("#Form_EditorToolbarImageForm_Files-0").change(function() {
|
|
$(".cms-editor-dialogs #Form_EditorToolbarImageForm").ajaxForm({
|
|
url: 'admin/assets/UploadForm?action_doUpload=1',
|
|
iframe: true,
|
|
dataType: 'json',
|
|
beforeSubmit: function(data) {
|
|
$("#UploadFormResponse").text("Uploading File...").addClass("loading").show();
|
|
$("#Form_EditorToolbarImageForm_Files-0").parents('.file').hide();
|
|
},
|
|
success: function(data) {
|
|
$("#UploadFormResponse").text("").removeClass("loading");
|
|
$("#Form_EditorToolbarImageForm_Files-0").val("").parents('.file').show();
|
|
|
|
$("#FolderImages").html('<h2>'+ ss.i18n._t('HtmlEditorField.Loading', 'Loading') + '</h2>');
|
|
|
|
loadImages(data);
|
|
}
|
|
}).submit();
|
|
});
|
|
|
|
/**
|
|
* Loads images from getimages() to the thumbnail view. It's called on
|
|
*/
|
|
function loadImages(params) {
|
|
$.get('admin/EditorToolbar/ImageForm', {
|
|
action_callfieldmethod: "1",
|
|
fieldName: "FolderImages",
|
|
ajax: "1",
|
|
methodName: "getimages",
|
|
folderID: $("#Form_EditorToolbarImageForm_FolderID").val(),
|
|
searchText: $("#Form_EditorToolbarImageForm_getimagesSearch").val(),
|
|
cacheKillerDate: parseInt((new Date()).getTime()),
|
|
cacheKillerRand: parseInt(10000 * Math.random())
|
|
},
|
|
function(data) {
|
|
$("#FolderImages").html(data);
|
|
|
|
$("#FolderImages").each(function() {
|
|
Behaviour.apply(this);
|
|
});
|
|
|
|
if(params) {
|
|
$("#FolderImages a[href*="+ params.Filename +"]").click();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Wrapper for HTML WYSIWYG libraries, which abstracts library internals
|
|
* from interface concerns like inserting and editing links.
|
|
*/
|
|
var editorWrapper_TinyMCE = (function() {
|
|
var bookmark;
|
|
|
|
return {
|
|
getInstance: function() {
|
|
return tinyMCE.activeEditor;
|
|
},
|
|
/**
|
|
* Invoked when a content-modifying UI is opened.
|
|
*/
|
|
onopen: function() {
|
|
bookmark = this.getInstance().selection.getBookmark();
|
|
},
|
|
/**
|
|
* Invoked when a content-modifying UI is closed.
|
|
*/
|
|
onclose: function() {
|
|
bookmark = null;
|
|
},
|
|
/**
|
|
* HTML representation of the edited content.
|
|
*
|
|
* Returns: {String}
|
|
*/
|
|
getContent: function() {
|
|
return this.getInstance().getContent();
|
|
},
|
|
/**
|
|
* DOM tree of the edited content
|
|
*
|
|
* Returns: DOMElement
|
|
*/
|
|
getDOM: function() {
|
|
return this.getInstance().dom;
|
|
},
|
|
/**
|
|
* Get the closest node matching the current selection.
|
|
*
|
|
* Returns: {jQuery} DOMElement
|
|
*/
|
|
getSelectedNode: function() {
|
|
return this.getInstance().selection.getNode();
|
|
},
|
|
/**
|
|
* Select the given node within the editor DOM
|
|
*
|
|
* Parameters: {DOMElement}
|
|
*/
|
|
selectNode: function(node) {
|
|
this.getInstance().selection.select(node)
|
|
},
|
|
/**
|
|
* Insert or update a link in the content area (based on current editor selection)
|
|
*
|
|
* Parameters: {Object} attrs
|
|
*/
|
|
insertLink: function(attrs) {
|
|
// Workaround for IE losing focus
|
|
this.getInstance().selection.moveToBookmark(bookmark);
|
|
this.getInstance().execCommand("mceInsertLink", false, attrs);
|
|
},
|
|
/**
|
|
* Remove the link from the currently selected node (if any).
|
|
*/
|
|
removeLink: function() {
|
|
this.getInstance().execCommand('unlink', false);
|
|
},
|
|
/**
|
|
* Strip any editor-specific notation from link in order to make it presentable in the UI.
|
|
*
|
|
* Parameters:
|
|
* {Object}
|
|
* {DOMElement}
|
|
*/
|
|
cleanLink: function(href, node) {
|
|
href = eval(tinyMCE.settings['urlconverter_callback'] + "(href, node, true);");
|
|
|
|
// Turn into relative
|
|
if(href.match(new RegExp('^' + tinyMCE.settings['document_base_url'] + '(.*)$'))) {
|
|
href = RegExp.$1;
|
|
}
|
|
|
|
// Get rid of TinyMCE's temporary URLs
|
|
if(href.match(/^javascript:\s*mctmp/)) href = '';
|
|
|
|
return href;
|
|
}
|
|
}
|
|
});
|
|
|
|
$.entwine('ss', function($) {
|
|
|
|
$('form.htmleditorfield-form').entwine({
|
|
|
|
// Wrapper for various HTML editors, defaults to editorWrapper_TinyMCE
|
|
Editor: null,
|
|
|
|
onmatch: function() {
|
|
// Move title from headline to (jQuery compatible) title attribute
|
|
var titleEl = this.find(':header:first');
|
|
this.attr('title', titleEl.text());
|
|
titleEl.remove();
|
|
|
|
// Create jQuery dialog
|
|
this.dialog({autoOpen: false, bgiframe: true, modal: true, height: 500, width: 500, ghost: true});
|
|
|
|
this.setEditor(editorWrapper_TinyMCE());
|
|
},
|
|
redraw: function() {
|
|
},
|
|
toggle: function() {
|
|
if(this.is(':visible')) this.close();
|
|
else this.open();
|
|
},
|
|
close: function() {
|
|
this.dialog('close');
|
|
this.getEditor().onclose();
|
|
},
|
|
open: function() {
|
|
this.dialog('open');
|
|
this.redraw();
|
|
this.getEditor().onopen();
|
|
}
|
|
});
|
|
|
|
$('form.htmleditorfield-linkform').entwine({
|
|
|
|
open: function() {
|
|
this.respondToNodeChange();
|
|
this.dialog('open');
|
|
this.redraw();
|
|
this.getEditor().onopen();
|
|
},
|
|
|
|
close: function() {
|
|
this._super();
|
|
|
|
this.resetFields();
|
|
},
|
|
|
|
// TODO Entwine doesn't respect submits triggered by ENTER key
|
|
onsubmit: function(e) {
|
|
this.insertLink();
|
|
this.close();
|
|
return false;
|
|
},
|
|
|
|
resetFields: function() {
|
|
this.find('fieldset :input:not(:radio)').val('').change();
|
|
},
|
|
|
|
redraw: function(setDefaults) {
|
|
this._super();
|
|
|
|
var linkType = this.find(':input[name=LinkType]:checked').val(), list = ['internal', 'external', 'file', 'email'], i, item;
|
|
|
|
// If we haven't selected an existing link, then just make sure we default to "internal" for the link type.
|
|
if(!linkType) {
|
|
this.find(':input[name=LinkType]').val(['internal']);
|
|
linkType = 'internal';
|
|
}
|
|
|
|
this.addAnchorSelector();
|
|
|
|
// Toggle field visibility and state based on type selection
|
|
for(i=0;item=list[i];i++) jQuery(this.find('.field#' + item)).toggle(item == linkType);
|
|
jQuery(this.find('.field#Anchor')).toggle(linkType == 'internal' || linkType == 'anchor');
|
|
jQuery(this.find('.field#AnchorSelector')).toggle(linkType=='anchor');
|
|
jQuery(this.find('.field#AnchorRefresh')).toggle(linkType=='anchor');
|
|
this.find(':input[name=TargetBlank]').attr('disabled', (linkType == 'email'));
|
|
if(typeof setDefaults == 'undefined' || setDefaults) {
|
|
this.find(':input[name=TargetBlank]').attr('checked', (linkType == 'file'));
|
|
}
|
|
},
|
|
|
|
insertLink: function() {
|
|
var href, target = null, anchor = this.find(':input[name=Anchor]').val(), ed = this.getEditor();
|
|
|
|
// Determine target
|
|
if(this.find(':input[name=TargetBlank]').is(':checked')) target = '_blank';
|
|
|
|
// All other attributes
|
|
switch(this.find(':input[name=LinkType]:checked').val()) {
|
|
case 'internal':
|
|
href = '[sitetree_link id=' + this.find(':input[name=internal]').val() + ']';
|
|
if(anchor) href += '#' + anchor;
|
|
break;
|
|
|
|
case 'anchor':
|
|
href = '#' + anchor;
|
|
break;
|
|
|
|
case 'file':
|
|
href = this.find(':input[name=file]').val();
|
|
target = '_blank';
|
|
break;
|
|
|
|
case 'email':
|
|
href = 'mailto:' + this.find(':input[name=email]').val();
|
|
target = null;
|
|
break;
|
|
|
|
case 'external':
|
|
default:
|
|
href = this.find(':input[name=external]').val();
|
|
// Prefix the URL with "http://" if no prefix is found
|
|
if(href.indexOf('://') == -1) href = 'http://' + href;
|
|
break;
|
|
}
|
|
|
|
var attributes = {
|
|
href : href,
|
|
target : target,
|
|
title : this.find(':input[name=Description]').val()
|
|
};
|
|
|
|
// Add the new link
|
|
ed.insertLink(attributes);
|
|
this.trigger('onafterinsert', attributes);
|
|
this.respondToNodeChange();
|
|
},
|
|
|
|
removeLink: function() {
|
|
this.getEditor().removeLink();
|
|
this.close();
|
|
},
|
|
|
|
addAnchorSelector: function() {
|
|
// Avoid adding twice
|
|
if(this.find(':input[name=AnchorSelector]').length) return;
|
|
|
|
var self = this;
|
|
|
|
// refresh the anchor selector on click, or in case of IE - button click
|
|
if( !$.browser.ie ) {
|
|
var anchorSelector = $('<select id="Form_EditorToolbarLinkForm_AnchorSelector" name="AnchorSelector"></select>');
|
|
this.find(':input[name=Anchor]').parent().append(anchorSelector);
|
|
|
|
anchorSelector.focus(function(e) {
|
|
self.refreshAnchors($(this));
|
|
});
|
|
} else {
|
|
var buttonRefresh = $('<a id="Form_EditorToolbarLinkForm_AnchorRefresh" title="Refresh the anchor list" alt="Refresh the anchor list" class="buttonRefresh"><span></span></a>');
|
|
var anchorSelector = $('<select id="Form_EditorToolbarLinkForm_AnchorSelector" class="hasRefreshButton" name="AnchorSelector"></select>');
|
|
this.find(':input[name=Anchor]').parent().append(buttonRefresh).append(anchorSelector);
|
|
|
|
buttonRefresh.click(function(e) {
|
|
refreshAnchors(anchorSelector);
|
|
});
|
|
}
|
|
|
|
// initialization
|
|
this.refreshAnchors();
|
|
|
|
// copy the value from dropdown to the text field
|
|
anchorSelector.change(function(e) {
|
|
self.find(':input[name="Anchor"]').val($(this).val());
|
|
});
|
|
},
|
|
|
|
// this function collects the anchors in the currently active editor and regenerates the dropdown
|
|
refreshAnchors: function() {
|
|
var selector = this.find(':input[name=AnchorSelector]'), anchors = new Array();
|
|
// name attribute is defined as CDATA, should accept all characters and entities
|
|
// http://www.w3.org/TR/1999/REC-html401-19991224/struct/links.html#h-12.2
|
|
var raw = this.getEditor().getContent().match(/name="([^"]+?)"|name='([^']+?)'/gim);
|
|
if (raw && raw.length) {
|
|
for(var i = 0; i < raw.length; i++) {
|
|
anchors.push(raw[i].substr(6).replace(/"$/, ''));
|
|
}
|
|
}
|
|
|
|
selector.empty();
|
|
selector.append($('<option value="" selected="1">Select an anchor</option>'));
|
|
for (var i = 0; i < anchors.length; i++) {
|
|
selector.append($('<option value="'+anchors[i]+'">'+anchors[i]+'</option>'));
|
|
}
|
|
},
|
|
|
|
respondToNodeChange: function() {
|
|
var htmlTagPattern = /<\S[^><]*>/g, fieldName, data = this.getCurrentLink();
|
|
|
|
if(data) {
|
|
for(fieldName in data) {
|
|
var el = this.find(':input[name=' + fieldName + ']'), selected = data[fieldName];
|
|
// Remove html tags in the selected text that occurs on IE browsers
|
|
if(typeof(selected) == 'string') selected = selected.replace(htmlTagPattern, '');
|
|
if(el.is(':radio')) {
|
|
el.val([selected]).change(); // setting as an arry due to jQuery quirks
|
|
} else {
|
|
el.val(selected).change();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Return information about the currently selected link, suitable for population of the link
|
|
* form.
|
|
*/
|
|
getCurrentLink: function() {
|
|
var ed = this.getEditor(), selectedEl = $(ed.getSelectedNode()),
|
|
href = "", target = "", title = "", action = "insert", style_class = "";
|
|
|
|
// We use a separate field for linkDataSource from tinyMCE.linkElement.
|
|
// If we have selected beyond the range of an <a> element, then use use that <a> element to get the link data source,
|
|
// but we don't use it as the destination for the link insertion
|
|
var linkDataSource = null;
|
|
if(selectedEl.length) {
|
|
if(selectedEl.is('a')) {
|
|
// Element is a link
|
|
linkDataSource = selectedEl;
|
|
// TODO Limit to inline elements, otherwise will also apply to e.g. paragraphs which already contain one or more links
|
|
// } else if((selectedEl.find('a').length)) {
|
|
// // Element contains a link
|
|
// var firstLinkEl = selectedEl.find('a:first');
|
|
// if(firstLinkEl.length) linkDataSource = firstLinkEl;
|
|
} else {
|
|
// Element is a child of a link
|
|
linkDataSource = selectedEl = selectedEl.parents('a:first');
|
|
}
|
|
}
|
|
if(linkDataSource && linkDataSource.length) ed.selectNode(linkDataSource[0]);
|
|
|
|
// Is anchor not a link
|
|
if (!linkDataSource.attr('href')) linkDataSource = null;
|
|
|
|
if (linkDataSource) {
|
|
href = linkDataSource.attr('href');
|
|
target = linkDataSource.attr('target');
|
|
title = linkDataSource.attr('title');
|
|
style_class = linkDataSource.attr('class');
|
|
href = ed.cleanLink(href, linkDataSource),
|
|
action = "update";
|
|
}
|
|
|
|
if(href.match(/^mailto:(.*)$/)) {
|
|
return {
|
|
LinkType: 'email',
|
|
email: RegExp.$1,
|
|
Description: title
|
|
}
|
|
} else if(href.match(/^(assets\/.*)$/)) {
|
|
return {
|
|
LinkType: 'file',
|
|
file: RegExp.$1,
|
|
Description: title
|
|
}
|
|
} else if(href.match(/^#(.*)$/)) {
|
|
return {
|
|
LinkType: 'anchor',
|
|
Anchor: RegExp.$1,
|
|
Description: title,
|
|
TargetBlank: target ? true : false
|
|
}
|
|
} else if(href.match(/^\[sitetree_link\s*(?:%20)?id=([0-9]+)\]?(#.*)?$/)) {
|
|
return {
|
|
LinkType: 'internal',
|
|
internal: RegExp.$1,
|
|
Anchor: RegExp.$2 ? RegExp.$2.substr(1) : '',
|
|
Description: title,
|
|
TargetBlank: target ? true : false
|
|
}
|
|
} else if(href) {
|
|
return {
|
|
LinkType: 'external',
|
|
external: href,
|
|
Description: title,
|
|
TargetBlank: target ? true : false
|
|
}
|
|
} else {
|
|
return {
|
|
LinkType: 'internal'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
$('form.htmleditorfield-linkform input[name=LinkType]').entwine({
|
|
onclick: function(e) {
|
|
this.parents('form:first').redraw();
|
|
},
|
|
onchange: function() {
|
|
this.parents('form:first').redraw();
|
|
}
|
|
});
|
|
|
|
$('form.htmleditorfield-linkform input[name=action_remove]').entwine({
|
|
onclick: function(e) {
|
|
this.parents('form:first').removeLink();
|
|
return false;
|
|
}
|
|
});
|
|
});
|
|
})(jQuery); |