From 65030906ad2de7e9bc377991502831fb7883c819 Mon Sep 17 00:00:00 2001 From: Hamish Friedlander Date: Thu, 21 Jun 2012 14:19:41 +1200 Subject: [PATCH] BUGFIX: Add validation to fix open.silverstripe.org ticket #7494 When adding media via the HtmlEditorField dialog, the value of the URL field wasnt being validated. Youd get different errors depending on if the field was empty or if it had text, but it didnt look like an absolute URL to HtmlEditorField#viewfile. This adds some javascript validation to make the text field look like a URL field --- admin/css/screen.css | 6 ++++- admin/scss/_style.scss | 22 ++++++++++++++++++ forms/HtmlEditorField.php | 2 +- javascript/HtmlEditorField.js | 42 +++++++++++++++++++++++++++++++---- 4 files changed, 66 insertions(+), 6 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index 9e16d874d..5b6e7a882 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -545,10 +545,14 @@ body.cms-dialog { overflow: auto; background: url("../images/textures/bg_cms_mai /** -------------------------------------------- "Insert X" forms -------------------------------------------- */ .htmleditorfield-dialog.ui-dialog-content { padding: 0; position: relative; } .htmleditorfield-dialog #MediaFormInsertMediaTabs_Fromtheweb .CompositeField { overflow: hidden; *zoom: 1; } -.htmleditorfield-dialog #MediaFormInsertMediaTabs_Fromtheweb #RemoteURL { border: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; width: 55%; float: left; } +.htmleditorfield-dialog #MediaFormInsertMediaTabs_Fromtheweb #RemoteURL { border: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; width: 55%; float: left; position: relative; } +.htmleditorfield-dialog #MediaFormInsertMediaTabs_Fromtheweb #RemoteURL label { position: absolute; left: 8px; top: 0px; font-weight: normal; color: #888; } +.htmleditorfield-dialog #MediaFormInsertMediaTabs_Fromtheweb #RemoteURL .middleColumn { margin-left: 0; } +.htmleditorfield-dialog #MediaFormInsertMediaTabs_Fromtheweb #RemoteURL input.remoteurl { padding-left: 40px; } .htmleditorfield-dialog #MediaFormInsertMediaTabs_Fromtheweb button.add-url { padding-top: 15px; overflow: hidden; *zoom: 1; border: none; background: none; opacity: 0.8; cursor: hand; } .htmleditorfield-dialog #MediaFormInsertMediaTabs_Fromtheweb button.add-url .btn-icon-addMedia { width: 20px; height: 20px; } .htmleditorfield-dialog #MediaFormInsertMediaTabs_Fromtheweb button.add-url:hover, .htmleditorfield-dialog #MediaFormInsertMediaTabs_Fromtheweb button.add-url:active { border: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; opacity: 1; } +.htmleditorfield-dialog #MediaFormInsertMediaTabs_Fromtheweb button.add-url.ui-state-disabled, .htmleditorfield-dialog #MediaFormInsertMediaTabs_Fromtheweb button.add-url.ui-state-disabled:hover, .htmleditorfield-dialog #MediaFormInsertMediaTabs_Fromtheweb button.add-url.ui-state-disabled:active { opacity: 0.35; filter: Alpha(Opacity=35); } .htmleditorfield-dialog .cms-content-header { padding: 0; width: 100%; height: 40px; } .htmleditorfield-dialog .cms-content-header h3 { padding: 0 8px; margin: 10px; } .htmleditorfield-dialog .ui-tabs { position: static; } diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 26d12e580..b16826f7d 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -1449,6 +1449,22 @@ body.cms-dialog { @include box-shadow-none; width:55%; float:left; + position: relative; + + label { + position: absolute; + left: 8px; + top: 0px; + font-weight: normal; color: #888; + } + + .middleColumn { + margin-left: 0; + } + + input.remoteurl { + padding-left: 40px; + } } button.add-url{ padding-top:15px; @@ -1466,6 +1482,12 @@ body.cms-dialog { @include box-shadow-none; opacity:1; } + &.ui-state-disabled { + &, &:hover, &:active { + opacity: 0.35; + filter: Alpha(Opacity=35); + } + } } } diff --git a/forms/HtmlEditorField.php b/forms/HtmlEditorField.php index cc7a1778f..90be1f668 100644 --- a/forms/HtmlEditorField.php +++ b/forms/HtmlEditorField.php @@ -392,7 +392,7 @@ class HtmlEditorField_Toolbar extends RequestHandler { $fromWeb = new CompositeField( new LiteralField('headerURL', '

' . sprintf($numericLabelTmpl, '1', _t('HtmlEditorField.ADDURL', 'Add URL')) . '

'), - $remoteURL = new TextField('RemoteURL', ''), + $remoteURL = new TextField('RemoteURL', 'http://'), new LiteralField('addURLImage', '') ); $remoteURL->addExtraClass('remoteurl'); diff --git a/javascript/HtmlEditorField.js b/javascript/HtmlEditorField.js index 6c3b59e14..53bf85985 100644 --- a/javascript/HtmlEditorField.js +++ b/javascript/HtmlEditorField.js @@ -871,17 +871,51 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE; }); + $('form.htmleditorfield-form.htmleditorfield-mediaform input.remoteurl').entwine({ + onadd: function() { + this.validate(); + }, + + onkeyup: function() { + this.validate(); + }, + + onchange: function() { + this.validate(); + }, + + getAddButton: function() { + return this.closest('.CompositeField').find('button.add-url'); + }, + + validate: function() { + var val = this.val(), orig = val; + + val = val.replace(/^https?:\/\//i, ''); + if (orig !== val) this.val(val); + + this.getAddButton().button(!!val ? 'enable' : 'disable'); + return !!val; + } + }); + /** * Show the second step after adding a URL */ $('form.htmleditorfield-form.htmleditorfield-mediaform .add-url').entwine({ + getURLField: function() { + return this.closest('.CompositeField').find('input.remoteurl'); + }, + onclick: function(e) { - var form = this.closest('form'); + var urlField = this.getURLField(); - var urlField = this.closest('.CompositeField').find('input.remoteurl'); + if (urlField.validate()) { + var form = this.closest('form'); + form.showFileView('http://' + urlField.val()); + form.redraw(); + } - form.showFileView(urlField.val()); - form.redraw(); return false; } });