tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity

BUGFIX: Add validation to fix open.silverstripe.org ticket #7494

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
admin/css/screen.css
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; }

22
admin/scss/_style.scss
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);
}
}
}
}

2
forms/HtmlEditorField.php
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');

42
javascript/HtmlEditorField.js
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 urlField = this.getURLField();
if (urlField.validate()) {
var form = this.closest('form');
var urlField = this.closest('.CompositeField').find('input.remoteurl');
form.showFileView(urlField.val());
form.showFileView('http://' + urlField.val());
form.redraw();
}
return false;
}
});