From a9d22f1fbf6e499ac0cc7f12e3f389015a07834d Mon Sep 17 00:00:00 2001 From: scott1702 Date: Wed, 3 Jun 2015 11:20:29 +1200 Subject: [PATCH] NEW: Files can be uploaded directly in the 'Insert Link' form --- admin/css/screen.css | 3 ++- admin/scss/_style.scss | 5 +++++ forms/HtmlEditorField.php | 3 ++- javascript/HtmlEditorField.js | 32 ++++++++++++++++++++++++++++---- 4 files changed, 37 insertions(+), 6 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index 53c19c2ab..d62954b34 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -140,7 +140,7 @@ body, html { font-size: 12px; line-height: 16px; font-family: Arial, sans-serif; .ui-accordion .ui-accordion-header { border-color: #c0c0c2; margin-bottom: 0; } .ui-accordion .ui-accordion-content { border: 1px solid #c0c0c2; border-top: none; } -.ui-autocomplete { max-height: 240px; overflow-x: hidden; overflow-y: auto; } +.ui-autocomplete { max-height: 240px; overflow-x: hidden; overflow-y: auto; /** sorry about the !important but the specificity of other selectors mandates it over writing out very specific selectors **/ } .ui-autocomplete-loading { background-image: url(../images/throbber.gif) !important; background-position: 97% center !important; background-repeat: no-repeat !important; background-size: auto !important; } /** This file defines common styles for form elements used throughout the CMS interface. It is an addition to the base styles defined in framework/css/Form.css. @package framework @subpackage admin */ @@ -687,6 +687,7 @@ body.cms-dialog { overflow: auto; background: url("../images/textures/bg_cms_mai .htmleditorfield-dialog .CompositeField .text select { margin: 5px 0 0 0; } .htmleditorfield-linkform .step2 { margin-bottom: 16px; } +.htmleditorfield-linkform .ss-uploadfield .middleColumn { width: auto; } .htmleditorfield-mediaform .ss-gridfield .gridfield-button-delete { display: none; } .htmleditorfield-mediaform .ss-gridfield table.ss-gridfield-table tbody td:first-child { padding: 0; text-align: center; } diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 8cc272c47..d8a33d823 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -1520,6 +1520,11 @@ body.cms-dialog { .step2 { margin-bottom: $grid-x*2; } + .ss-uploadfield { + .middleColumn { + width: auto; + } + } } .htmleditorfield-mediaform { diff --git a/forms/HtmlEditorField.php b/forms/HtmlEditorField.php index 7cda6f3a9..3bb86e150 100644 --- a/forms/HtmlEditorField.php +++ b/forms/HtmlEditorField.php @@ -258,7 +258,7 @@ class HtmlEditorField_Toolbar extends RequestHandler { $siteTree, TextField::create('external', _t('HtmlEditorField.URL', 'URL'), 'http://'), EmailField::create('email', _t('HtmlEditorField.EMAIL', 'Email address')), - TreeDropdownField::create('file', _t('HtmlEditorField.FILE', 'File'), 'File', 'ID', 'Title', true), + $fileField = UploadField::create('file', _t('HtmlEditorField.FILE', 'File')), TextField::create('Anchor', _t('HtmlEditorField.ANCHORVALUE', 'Anchor')), TextField::create('Subject', _t('HtmlEditorField.SUBJECT', 'Email subject')), TextField::create('Description', _t('HtmlEditorField.LINKDESCR', 'Link description')), @@ -281,6 +281,7 @@ class HtmlEditorField_Toolbar extends RequestHandler { $headerWrap->addExtraClass('CompositeField composite cms-content-header nolabel '); $contentComposite->addExtraClass('ss-insert-link content'); + $fileField->setAllowedMaxFileNumber(1); $form->unsetValidator(); $form->loadDataFrom($this); diff --git a/javascript/HtmlEditorField.js b/javascript/HtmlEditorField.js index d72948265..97f0a8ef4 100644 --- a/javascript/HtmlEditorField.js +++ b/javascript/HtmlEditorField.js @@ -498,8 +498,8 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE; this.find(':input:not(:submit)[data-skip-autofocus!="true"]').filter(':visible:enabled').eq(0).focus(); - this.updateFromEditor(); this.redraw(); + this.updateFromEditor(); }, onssdialogclose: function(){ @@ -573,6 +573,8 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE; this.addAnchorSelector(); + this.resetFileField(); + // Toggle field visibility depending on the link type. this.find('div.content .field').hide(); this.find('.field[id$="LinkType"]').show(); @@ -623,7 +625,7 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE; break; case 'file': - href = '[file_link,id=' + this.find(':input[name=file]').val() + ']'; + href = '[file_link,id=' + this.find('.ss-uploadfield .ss-uploadfield-item').attr('data-fileid') + ']'; target = '_blank'; break; @@ -653,17 +655,27 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE; this.modifySelection(function(ed){ ed.insertLink(this.getLinkAttributes()); }); - - this.updateFromEditor(); }, removeLink: function() { this.modifySelection(function(ed){ ed.removeLink(); }); + this.resetFileField(); this.close(); }, + resetFileField: function() { + // If there's an attached item, remove it + var fileField = this.find('#file'), + fileUpload = fileField.data('fileupload'), + currentItem = fileField.find('.ss-uploadfield-item[data-fileid]'); + + if(currentItem.length) { + fileUpload._trigger('destroy', null, {content: currentItem}); + } + }, + /** * Builds an anchor selector element and injects it into the DOM next to the anchor field. */ @@ -810,6 +822,18 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE; el.prop('checked', selected).change(); } else if(el.is(':radio')) { el.val([selected]).change(); + } else if(fieldName == 'file') { + // Can't rely on fieldName, ad UploadFields have different naming convention + el = $('#' + fieldName); + + // We have to wait for the UploadField to initialise + (function attach(el, selected) { + if( ! el.getConfig()) { + setTimeout(function(){ attach(el, selected); }, 50); + } else { + el.attachFiles([selected]); + } + })(el, selected); } else { el.val(selected).change(); }