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

Merge pull request #2719 from kinglozzer/uploadfield-deferred-loading

Browse Source 
FIX: Defer loading of UploadField EditForm iframes (fixes #2711)
This commit is contained in:
Ingo Schommer 2013-12-19 08:26:57 -08:00
commit 1fc1111eed
9 changed files with 100 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/AssetUploadField.css
View File

@ -42,7 +42,7 @@ body.cms.ss-uploadfield-edit-iframe .fieldholder-small label, .composite.ss-asse
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info { background-color: #c11f1d; padding-right: 130px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c11f1d), color-stop(4%, #bf1d1b), color-stop(8%, #b71b1c), color-stop(15%, #b61e1d), color-stop(27%, #b11d1d), color-stop(31%, #ab1d1c), color-stop(42%, #a51b1b), color-stop(46%, #9f1b19), color-stop(50%, #9f1b19), color-stop(54%, #991c1a), color-stop(58%, #971a18), color-stop(62%, #911b1b), color-stop(65%, #911b1b), color-stop(88%, #7e1816), color-stop(92%, #771919), color-stop(100%, #731817)); background-image: -webkit-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -moz-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -o-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); }
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name { width: 100%; cursor: default; background: #bcb9b9; background: rgba(201, 198, 198, 0.9); }
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name .name { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7); }
.ss-assetuploadfield .ss-uploadfield-files .ui-state-warning .ss-uploadfield-item-info { background-color: #ff9300; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eba547), color-stop(8%, #e89a30), color-stop(50%, #e68f19), color-stop(54%, #e68e19), color-stop(96%, #e17519), color-stop(100%, #dc6718)); background-image: -webkit-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -moz-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -o-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); }
.ss-assetuploadfield .ss-uploadfield-files .ui-state-warning .ss-uploadfield-item-info { background-color: #e9d104; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e5d33b), color-stop(8%, #e2ce24), color-stop(50%, #d1be1c), color-stop(54%, #d1bc1b), color-stop(96%, #d09a1a), color-stop(100%, #ce8719)); background-image: -webkit-linear-gradient(top, #e5d33b 0%, #e2ce24 8%, #d1be1c 50%, #d1bc1b 54%, #d09a1a 96%, #ce8719 100%); background-image: -moz-linear-gradient(top, #e5d33b 0%, #e2ce24 8%, #d1be1c 50%, #d1bc1b 54%, #d09a1a 96%, #ce8719 100%); background-image: -o-linear-gradient(top, #e5d33b 0%, #e2ce24 8%, #d1be1c 50%, #d1bc1b 54%, #d09a1a 96%, #ce8719 100%); background-image: linear-gradient(top, #e5d33b 0%, #e2ce24 8%, #d1be1c 50%, #d1bc1b 54%, #d09a1a 96%, #ce8719 100%); }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name { position: relative; z-index: 1; margin: 3px 0 3px 50px; width: 50%; color: #5e5e5e; background: #eeeded; background: rgba(255, 255, 255, 0.8); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; line-height: 24px; height: 22px; padding: 0 5px; text-align: left; cursor: pointer; display: table; table-layout: fixed; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .name { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); display: inline; float: left; max-width: 50%; font-weight: normal; padding: 0 5px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status { position: relative; float: right; padding: 0 0 0 5px; max-width: 30%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); }
@ -67,6 +67,8 @@ body.cms.ss-uploadfield-edit-iframe .fieldholder-small label, .composite.ss-asse
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress .ss-uploadfield-item-progressbar { background-color: #92a6b3; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a6b3), color-stop(11%, #90aab8), color-stop(22%, #96b1bf), color-stop(33%, #9eb4c1), color-stop(44%, #a7bac7), color-stop(100%, #c1d5dc)); background-image: -webkit-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -moz-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -o-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress .ss-uploadfield-item-progressbarvalue { width: 0; background: #60b3dd url(../images/progressbar_blue.gif) repeat left center; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform { /* don't use display none, for it will break jQuery('iframe').contents().height() */ height: 0; overflow: hidden; clear: both; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform.loading { width: 100%; height: 22px; padding: 15px 0; background: url(../admin/images/spinner.gif) no-repeat 50% 50%; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform.loading iframe { /* Old IE needs this or it'll give the iframe a white background, covering the spinner */ padding-top: 0; margin-top: 37px; border: none; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { width: 100%; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { float: left; margin: 25px 0 0; }
.ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { margin: 10px 0px 0 20px; }

2
css/UploadField.css
View File

@ -39,6 +39,8 @@ Used in side panels and action tabs
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button span.ui-button-text, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button span.ui-button-text { display: none; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start { right: 20px; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform { /* don't use display none, for it will break jQuery('iframe').contents().height() */ height: 0; overflow: hidden; clear: both; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform.loading { width: 100%; height: 22px; margin: 15px 0 0; background: url(../admin/images/spinner.gif) no-repeat 50% 0; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform.loading iframe { /* Old IE needs this or it'll give the iframe a white background, covering the spinner */ padding-top: 0; margin-top: 22px; border: none; }
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { margin-top: 8px; padding-top: 8px; border-top: 1px solid #d0d3d5; width: 100%; }
.ss-uploadfield .ss-uploadfield-addfile.borderTop { border-top: 1px solid #b3b3b3; }

8
javascript/HtmlEditorField.js
View File

@ -1312,7 +1312,10 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
onclick: function(e) {
var editForm = this.getEditForm();
editForm.parent('.ss-uploadfield-item').removeClass('ui-state-warning');
// Make sure we're in an HtmlEditorField here, or fall-back to _super(). HtmlEditorField with
// AssetUploadField doesn't use iframes, so needs its own toggleEditForm() logic
if (this.closest('.ss-uploadfield-item').hasClass('ss-htmleditorfield-file')) {
editForm.parent('ss-uploadfield-item').removeClass('ui-state-warning');
editForm.toggleEditForm();
@ -1320,6 +1323,9 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
return false; // Avoid duplication from button
}
this._super(e);
}
});
$('div.ss-assetuploadfield .ss-uploadfield-item-editform').entwine({

61
javascript/UploadField.js
View File

@ -396,10 +396,49 @@
});
$( 'div.ss-upload:not(.disabled):not(.readonly) .ss-uploadfield-item-edit').entwine({
onclick: function(e) {
var editform = this.closest('.ss-uploadfield-item').find('.ss-uploadfield-item-editform');
var itemInfo = editform.prev('.ss-uploadfield-item-info');
var self = this,
editform = self.closest('.ss-uploadfield-item').find('.ss-uploadfield-item-editform'),
itemInfo = editform.prev('.ss-uploadfield-item-info'),
iframe = editform.find('iframe');
// Ignore clicks while the iframe is loading
if (iframe.parent().hasClass('loading')) {
e.preventDefault();
return false;
}
if (iframe.attr('src') == 'about:blank') {
// Lazy-load the iframe on editform toggle
iframe.attr('src', iframe.data('src'));
// Add loading class, disable buttons while loading is in progress
// (_prepareIframe() handles re-enabling them when appropriate)
iframe.parent().addClass('loading');
disabled=this.siblings();
disabled.addClass('ui-state-disabled');
disabled.attr('disabled', 'disabled');
iframe.on('load', function() {
iframe.parent().removeClass('loading');
// This ensures we only call _prepareIframe() on load once - otherwise it'll
// be superfluously called after clicking 'save' in the editform
if (iframe.data('src')) {
self._prepareIframe(iframe, editform, itemInfo);
iframe.data('src', '');
}
if (editform.hasClass('opened')) editform.fitHeight();
});
} else {
self._prepareIframe(iframe, editform, itemInfo);
}
e.preventDefault(); // Avoid a form submit
return false;
},
_prepareIframe: function(iframe, editform, itemInfo) {
var disabled;
var iframe = editform.find('iframe');
// Mark the row as changed if any of its form fields are edited
iframe.contents().ready(function() {
@ -431,8 +470,6 @@
disabled.removeAttr('disabled');
}
}
e.preventDefault(); // Avoid a form submit
return false;
}
});
@ -504,20 +541,6 @@
status.attr('title',text).text(text);
}
});
$('div.ss-upload .ss-uploadfield-item-editform iframe').entwine({
onmatch: function() {
var form = this.closest('.ss-uploadfield-item-editform');
// TODO entwine event binding doesn't work for iframes
this.load(function() {
$(this).parent().removeClass('loading');
if(form.hasClass('opened')) form.fitHeight();
});
this._super();
},
onunmatch: function() {
this._super();
}
});
$('div.ss-upload .ss-uploadfield-fromfiles').entwine({
onclick: function(e) {
this.getUploadField().openSelectDialog(this.closest('.ss-uploadfield-item'));

2
javascript/UploadField_downloadtemplate.js
View File

@ -27,7 +27,7 @@ window.tmpl.cache['ss-uploadfield-downloadtemplate'] = tmpl(
'{% } %}' +
'</div>' +
'{% if (!file.error) { %}' +
'<div class="ss-uploadfield-item-editform loading"><iframe frameborder="0" src="{%=file.edit_url%}"></iframe></div>' +
'<div class="ss-uploadfield-item-editform"><iframe frameborder="0" data-src="{%=file.edit_url%}" src="about:blank"></iframe></div>' +
'{% } %}' +
'</li>' +
'{% } %}'

13
scss/AssetUploadField.scss
View File

@ -263,6 +263,19 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie
overflow: hidden;
clear: both;
&.loading {
width: 100%;
height: 22px;
padding: 15px 0;
background: url(../admin/images/spinner.gif) no-repeat 50% 50%;
iframe {
/* Old IE needs this or it'll give the iframe a white background, covering the spinner */
padding-top: 0; margin-top: 37px;
border: none;
}
}
iframe {
width: 100%;
}

15
scss/UploadField.scss
View File

@ -189,14 +189,25 @@
overflow: hidden;
clear: both;
&.loading {
width: 100%;
height: 22px;
margin: 15px 0 0;
background: url(../admin/images/spinner.gif) no-repeat 50% 0;
iframe {
/* Old IE needs this or it'll give the iframe a white background, covering the spinner */
padding-top: 0; margin-top: 22px;
border: none;
}
}
iframe {
margin-top: $grid-y;
padding-top: $grid-y;
border-top: 1px solid $color-light-separator;
width: 100%;
}
}
}
.ss-uploadfield-addfile {

4
templates/Includes/HtmlEditorField_viewfile.ss
View File

@ -23,7 +23,6 @@
<div class="clear"><!-- --></div>
</label>
<div class="ss-uploadfield-item-actions">
<div class="ss-uploadfield-item-cancel cancel">
<button data-icon="deleteLight" class="ss-uploadfield-item-cancel ss-uploadfield-item-remove" title="<% _t('UploadField.REMOVE', 'Remove') %>">
<% _t('UploadField.REMOVE', 'Remove') %>
</button>
@ -37,9 +36,8 @@
</button>
</div>
</div>
</div>
<% if $Info %><div class="info">$Info</div><% end_if %>
<div class="details ss-uploadfield-item-editform loading">
<div class="details ss-uploadfield-item-editform">
<fieldset>
<% loop $Fields %>
$FieldHolder

4
templates/UploadField.ss
View File

@ -18,8 +18,8 @@
<% end_if %>
</div>
</div>
<div class="ss-uploadfield-item-editform loading includeParent">
<iframe frameborder="0" src="$UploadFieldEditLink"></iframe>
<div class="ss-uploadfield-item-editform includeParent">
<iframe frameborder="0" data-src="$UploadFieldEditLink" src="about:blank"></iframe>
</div>
</li>
<% end_loop %>