Merge pull request #556 from silverstripe-rebelalliance/trac/7494

Trac/7494

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

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

forms/HtmlEditorField.php

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

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