Skip to content

Commit

Permalink
Refactor the linking functionality for the TinyMCE popup.
Browse files Browse the repository at this point in the history
Functionality that affects the values in the form better fits in
updateFromEditor function, where we expect the form to be modified.
Redraw should only affect visibility parameters.

Also added a more robust reset code, so we can always expect to get at
least a clean form, and re-added missing "target" checkbox.
  • Loading branch information
mateusz committed Jul 12, 2012
1 parent eef67b6 commit 29a0399
Showing 1 changed file with 17 additions and 19 deletions.
36 changes: 17 additions & 19 deletions javascript/HtmlEditorField.js
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -468,7 +468,6 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
* which are toggled through a type dropdown. Variations share fields, so there's only one "title" field in the form. * which are toggled through a type dropdown. Variations share fields, so there's only one "title" field in the form.
*/ */
$('form.htmleditorfield-linkform').entwine({ $('form.htmleditorfield-linkform').entwine({

// TODO Entwine doesn't respect submits triggered by ENTER key // TODO Entwine doesn't respect submits triggered by ENTER key
onsubmit: function(e) { onsubmit: function(e) {
this.insertLink(); this.insertLink();
Expand All @@ -477,36 +476,27 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
}, },
resetFields: function() { resetFields: function() {
this._super(); this._super();
this.find('fieldset :input:not(:radio)').val('').change();
// Reset the form using a native call. This will also correctly reset checkboxes and radio buttons.
this[0].reset();
}, },
redraw: function(setDefaults) { redraw: function() {
this._super(); this._super();


var linkType = this.find(':input[name=LinkType]:checked').val(), list = ['internal', 'external', 'file', 'email']; var linkType = this.find(':input[name=LinkType]:checked').val(), list = ['internal', 'external', 'file', 'email'];


// 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(); this.addAnchorSelector();


// Toggle field visibility and state based on type selection // Toggle field visibility depending on the link type.
this.find('div.content .field').hide(); this.find('div.content .field').hide();
this.find('.field#LinkType').show(); this.find('.field#LinkType').show();
this.find('.field#' + linkType).show(); this.find('.field#' + linkType).show();
if(linkType == 'internal' || linkType == 'anchor') this.find('.field#Anchor').show(); if(linkType == 'internal' || linkType == 'anchor') this.find('.field#Anchor').show();
if(linkType !== 'email') this.find('.field#TargetBlank').show();
if(linkType == 'anchor') { if(linkType == 'anchor') {
this.find('.field#AnchorSelector').show(); this.find('.field#AnchorSelector').show();
this.find('.field#AnchorRefresh').show(); this.find('.field#AnchorRefresh').show();
} }

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() { insertLink: function() {
var href, target = null, anchor = this.find(':input[name=Anchor]').val(); var href, target = null, anchor = this.find(':input[name=Anchor]').val();
Expand Down Expand Up @@ -614,16 +604,24 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
selector.append($('<option value="'+anchors[j]+'">'+anchors[j]+'</option>')); selector.append($('<option value="'+anchors[j]+'">'+anchors[j]+'</option>'));
} }
}, },
/**
* Updates the state of the dialog inputs to match the editor selection.
* If selection does not contain a link, resets the fields.
*/
updateFromEditor: function() { updateFromEditor: function() {
var htmlTagPattern = /<\S[^><]*>/g, fieldName, data = this.getCurrentLink(); var htmlTagPattern = /<\S[^><]*>/g, fieldName, data = this.getCurrentLink();

if(data) { if(data) {
for(fieldName in data) { for(fieldName in data) {
var el = this.find(':input[name=' + fieldName + ']'), selected = data[fieldName]; var el = this.find(':input[name=' + fieldName + ']'), selected = data[fieldName];
// Remove html tags in the selected text that occurs on IE browsers // Remove html tags in the selected text that occurs on IE browsers
if(typeof(selected) == 'string') selected = selected.replace(htmlTagPattern, ''); if(typeof(selected) == 'string') selected = selected.replace(htmlTagPattern, '');
if(el.is(':radio')) {
el.val([selected]).change(); // setting as an arry due to jQuery quirks // Set values and invoke the triggers (e.g. for TreeDropdownField).
if(el.is(':checkbox')) {
el.prop('checked', selected).change();
} else if(el.is(':radio')) {
el.val([selected]).change();
} else { } else {
el.val(selected).change(); el.val(selected).change();
} }
Expand Down

0 comments on commit 29a0399

Please sign in to comment.