Permalink
Browse files

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
  • Loading branch information...
1 parent 3a7128d commit 65030906ad2de7e9bc377991502831fb7883c819 Hamish Friedlander committed Jun 21, 2012
Showing with 66 additions and 6 deletions.
  1. +5 −1 admin/css/screen.css
  2. +22 −0 admin/scss/_style.scss
  3. +1 −1 forms/HtmlEditorField.php
  4. +38 −4 javascript/HtmlEditorField.js
View
6 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; }
View
22 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);
+ }
+ }
}
}
View
2 forms/HtmlEditorField.php
@@ -392,7 +392,7 @@ function MediaForm() {
$fromWeb = new CompositeField(
new LiteralField('headerURL', '<h4 class="field header-url">' . sprintf($numericLabelTmpl, '1', _t('HtmlEditorField.ADDURL', 'Add URL')) . '</h4>'),
- $remoteURL = new TextField('RemoteURL', ''),
+ $remoteURL = new TextField('RemoteURL', 'http://'),
new LiteralField('addURLImage', '<button class="action ui-action-constructive ui-button field add-url" data-icon="addMedia"></button>')
);
$remoteURL->addExtraClass('remoteurl');
View
42 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;
}
});

0 comments on commit 6503090

Please sign in to comment.