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
This commit is contained in:
Hamish Friedlander 2012-06-21 14:19:41 +12:00
parent 3a7128d00c
commit 65030906ad
4 changed files with 66 additions and 6 deletions

View File

@ -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 File

@ -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 File

@ -392,7 +392,7 @@ class HtmlEditorField_Toolbar extends RequestHandler {
$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 File

@ -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;
}
});