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

ENHANCEMENT Using GridField for file selection in "insert image" dialog

Browse Source 
API CHANGE Combined HTMLEditorField_Toolbar->FlashForm() and ImageForm() into new MediaForm() to handle both file types
This commit is contained in:
Ingo Schommer 2012-02-08 21:32:25 +01:00
parent 9f12c5a252
commit 3866f561f5
8 changed files with 115 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
admin/javascript/ModelAdmin.js
View File

@ -210,8 +210,7 @@
closeRightPanel: function(){ closeRightPanel: function(){
if($('.cms-editor-dialogs').is(':visible')) { if($('.cms-editor-dialogs').is(':visible')) {
$('.cms-editor-dialogs').hide(); $('.cms-editor-dialogs').hide();
$('#Form_EditorToolbarImageForm').hide(); $('#Form_EditorToolbarMediaForm').hide();
$('#Form_EditorToolbarFlashForm').hide();
$('#Form_EditorToolbarLinkForm').hide(); $('#Form_EditorToolbarLinkForm').hide();
} }
} }

3
admin/templates/LeftAndMain.ss
View File

@ -26,9 +26,8 @@
<% cached %> <% cached %>
<div id="cms-editor-dialogs"> <div id="cms-editor-dialogs">
<% control EditorToolbar %> <% control EditorToolbar %>
$ImageForm $MediaForm
$LinkForm $LinkForm
$FlashForm
<% end_control %> <% end_control %>
</div> </div>
<% end_cached %> <% end_cached %>

136
forms/HtmlEditorField.php
View File

@ -230,16 +230,29 @@ class HtmlEditorField_Readonly extends ReadonlyField {
* @subpackage fields-formattedinput * @subpackage fields-formattedinput
*/ */
class HtmlEditorField_Toolbar extends RequestHandler { class HtmlEditorField_Toolbar extends RequestHandler {
static $allowed_actions = array(
'LinkForm',
'MediaForm',
'browse',
);
protected $controller, $name; protected $controller, $name;
function __construct($controller, $name) { function __construct($controller, $name) {
parent::__construct(); parent::__construct();
Requirements::javascript(SAPPHIRE_DIR . "/thirdparty/jquery/jquery.js");
Requirements::javascript(THIRDPARTY_DIR . '/jquery-ui/jquery-ui.js');
Requirements::javascript(THIRDPARTY_DIR . '/jquery-entwine/dist/jquery.entwine-dist.js');
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/ssui.core.js');
Requirements::javascript(SAPPHIRE_DIR . "/thirdparty/behaviour/behaviour.js"); Requirements::javascript(SAPPHIRE_DIR . "/thirdparty/behaviour/behaviour.js");
Requirements::javascript(SAPPHIRE_DIR . "/javascript/tiny_mce_improvements.js"); Requirements::javascript(SAPPHIRE_DIR . "/javascript/tiny_mce_improvements.js");
Requirements::javascript(SAPPHIRE_DIR ."/thirdparty/jquery-form/jquery.form.js"); Requirements::javascript(SAPPHIRE_DIR ."/thirdparty/jquery-form/jquery.form.js");
Requirements::javascript(SAPPHIRE_DIR ."/javascript/HtmlEditorField.js"); Requirements::javascript(SAPPHIRE_DIR ."/javascript/HtmlEditorField.js");
Requirements::css(THIRDPARTY_DIR . '/jquery-ui-themes/smoothness/jquery-ui.css');
$this->controller = $controller; $this->controller = $controller;
$this->name = $name; $this->name = $name;
} }
@ -319,15 +332,30 @@ class HtmlEditorField_Toolbar extends RequestHandler {
/** /**
* Return a {@link Form} instance allowing a user to * Return a {@link Form} instance allowing a user to
* add images to the TinyMCE content editor. * add images and flash objects to the TinyMCE content editor.
* *
* @return Form * @return Form
*/ */
function ImageForm() { function MediaForm() {
if(!class_exists('ThumbnailStripField')) { if(!class_exists('ThumbnailStripField')) {
throw new Exception('ThumbnailStripField class required for HtmlEditorField->ImageForm()'); throw new Exception('ThumbnailStripField class required for HtmlEditorField->ImageForm()');
} }
// TODO Handle through GridState within field - currently this state set too late to be useful here (during request handling)
$parentID = $this->controller->getRequest()->requestVar('ParentID');
$fileFieldConfig = GridFieldConfig::create();
$fileFieldConfig->addComponent(new GridFieldSortableHeader());
$fileFieldConfig->addComponent(new GridFieldFilter());
$fileFieldConfig->addComponent(new GridFieldDefaultColumns());
$fileFieldConfig->addComponent(new GridFieldPaginator(10));
$fileField = new GridField('Files', false, false, $fileFieldConfig);
$fileField->setList($this->getFiles($parentID));
$fileField->setAttribute('data-selectable', true);
$fileField->setAttribute('data-multiselect', true);
$numericLabelTmpl = '<span class="step-label"><span class="flyout">%d</span><span class="arrow"></span><strong class="title">%s</strong></span>';
$fields = new FieldList( $fields = new FieldList(
new LiteralField( new LiteralField(
'Heading', 'Heading',
@ -335,32 +363,28 @@ class HtmlEditorField_Toolbar extends RequestHandler {
), ),
$contentComposite = new CompositeField( $contentComposite = new CompositeField(
new TreeDropdownField('FolderID', _t('HtmlEditorField.FOLDER', 'Folder'), 'Folder'), new LiteralField('header1', '<h4 class="field">' . sprintf($numericLabelTmpl, '1', _t('HtmlEditorField.Find', 'Find')) . '</h4>'),
new CompositeField(new FieldList( new TreeDropdownField('ParentID', _t('HtmlEditorField.FOLDER', 'Folder'), 'Folder'),
new LiteralField('ShowUpload', '<p class="showUploadField"><a href="#">'. _t('HtmlEditorField.SHOWUPLOADFORM', 'Upload File') .'</a></p>'), $fileField,
new FileField("Files[0]" , _t('AssetAdmin.CHOOSEFILE','Choose file: ')),
new LiteralField('Response', '<div id="UploadFormResponse"></div>'), new LiteralField('header2', '<h4 class="field edit-details">' . sprintf($numericLabelTmpl, '2', _t('HtmlEditorField.EditDetails', 'Edit details')) . '</h4>')
new HiddenField('UploadMode', 'Upload Mode', 'CMSEditor') // used as a hook for doUpload switching // new TextField('AltText', _t('HtmlEditorField.IMAGEALTTEXT', 'Alternative text (alt) - shown if image cannot be displayed'), '', 80),
)), // new TextField('ImageTitle', _t('HtmlEditorField.IMAGETITLE', 'Title text (tooltip) - for additional information about the image')),
new TextField('getimagesSearch', _t('HtmlEditorField.SEARCHFILENAME', 'Search by file name')), // new TextField('CaptionText', _t('HtmlEditorField.CAPTIONTEXT', 'Caption text')),
new ThumbnailStripField('FolderImages', 'FolderID', 'getimages'), // new DropdownField(
new TextField('AltText', _t('HtmlEditorField.IMAGEALTTEXT', 'Alternative text (alt) - shown if image cannot be displayed'), '', 80), // 'CSSClass',
new TextField('ImageTitle', _t('HtmlEditorField.IMAGETITLE', 'Title text (tooltip) - for additional information about the image')), // _t('HtmlEditorField.CSSCLASS', 'Alignment / style'),
new TextField('CaptionText', _t('HtmlEditorField.CAPTIONTEXT', 'Caption text')), // array(
new DropdownField( // 'left' => _t('HtmlEditorField.CSSCLASSLEFT', 'On the left, with text wrapping around.'),
'CSSClass', // 'leftAlone' => _t('HtmlEditorField.CSSCLASSLEFTALONE', 'On the left, on its own.'),
_t('HtmlEditorField.CSSCLASS', 'Alignment / style'), // 'right' => _t('HtmlEditorField.CSSCLASSRIGHT', 'On the right, with text wrapping around.'),
array( // 'center' => _t('HtmlEditorField.CSSCLASSCENTER', 'Centered, on its own.'),
'left' => _t('HtmlEditorField.CSSCLASSLEFT', 'On the left, with text wrapping around.'), // )
'leftAlone' => _t('HtmlEditorField.CSSCLASSLEFTALONE', 'On the left, on its own.'), // ),
'right' => _t('HtmlEditorField.CSSCLASSRIGHT', 'On the right, with text wrapping around.'), // new FieldGroup(_t('HtmlEditorField.IMAGEDIMENSIONS', 'Dimensions'),
'center' => _t('HtmlEditorField.CSSCLASSCENTER', 'Centered, on its own.'), // new TextField('Width', _t('HtmlEditorField.IMAGEWIDTHPX', 'Width'), 100),
) // new TextField('Height', " x " . _t('HtmlEditorField.IMAGEHEIGHTPX', 'Height'), 100)
), // )
new FieldGroup(_t('HtmlEditorField.IMAGEDIMENSIONS', 'Dimensions'),
new TextField('Width', _t('HtmlEditorField.IMAGEWIDTHPX', 'Width'), 100),
new TextField('Height', " x " . _t('HtmlEditorField.IMAGEHEIGHTPX', 'Height'), 100)
)
) )
); );
@ -371,7 +395,7 @@ class HtmlEditorField_Toolbar extends RequestHandler {
$form = new Form( $form = new Form(
$this->controller, $this->controller,
"{$this->name}/ImageForm", "{$this->name}/MediaForm",
$fields, $fields,
$actions $actions
); );
@ -379,53 +403,35 @@ class HtmlEditorField_Toolbar extends RequestHandler {
$contentComposite->addExtraClass('content'); $contentComposite->addExtraClass('content');
// Allow other people to extend the fields being added to the imageform // Allow other people to extend the fields being added to the imageform
$this->extend('updateImageForm', $form); $this->extend('updateMediaForm', $form);
$form->unsetValidator(); $form->unsetValidator();
$form->disableSecurityToken(); $form->disableSecurityToken();
$form->loadDataFrom($this); $form->loadDataFrom($this);
$form->addExtraClass('htmleditorfield-form htmleditorfield-imageform cms-dialog-content'); $form->addExtraClass('htmleditorfield-form htmleditorfield-mediaform cms-dialog-content');
return $form; return $form;
} }
function FlashForm() { public function browse($request) {
if(!class_exists('ThumbnailStripField')) {
throw new Exception('ThumbnailStripField class required for HtmlEditorField->FlashForm()');
} }
$form = new Form( /**
$this->controller, * @param Int
"{$this->name}/FlashForm", * @return DataList
new FieldList( */
new LiteralField( protected function getFiles($parentID = null) {
'Heading', // TODO Use array('Filename:EndsWith' => $exts) once that's supported
sprintf('<h3>%s</h3>', _t('HtmlEditorField.FLASH', 'Flash')) $exts = array('jpg', 'gif', 'png', 'swf');
), $wheres = array();
$contentComposite = new CompositeField( foreach($exts as $ext) $wheres[] = '"Filename" LIKE \'%.' . $ext . '\'';
new TreeDropdownField("FolderID", _t('HtmlEditorField.FOLDER'), "Folder"),
new TextField('getflashSearch', _t('HtmlEditorField.SEARCHFILENAME', 'Search by file name')),
new ThumbnailStripField("Flash", "FolderID", "getflash"),
new FieldGroup(_t('HtmlEditorField.IMAGEDIMENSIONS', "Dimensions"),
new TextField("Width", _t('HtmlEditorField.IMAGEWIDTHPX', "Width"), 100),
new TextField("Height", "x " . _t('HtmlEditorField.IMAGEHEIGHTPX', "Height"), 100)
)
)
),
new FieldList(
$insertAction = new FormAction("insertflash", _t('HtmlEditorField.BUTTONINSERTFLASH', 'Insert Flash'))
)
);
$insertAction->addExtraClass('ss-ui-action-constructive');
$contentComposite->addExtraClass('content');
$this->extend('updateFlashForm', $form); $files = DataList::create('File')->where(implode(' OR ', $wheres));
$form->unsetValidator(); // Limit by folder (if required)
$form->loadDataFrom($this); if($parentID) $files->filter('ParentID', $parentID);
$form->disableSecurityToken();
$form->addExtraClass('htmleditorfield-form htmleditorfield-flashform cms-dialog-content');
return $form; return $files;
} }
} }

1
forms/gridfield/GridField.php
View File

@ -739,6 +739,7 @@ class GridField_Action extends FormAction {
// will strip it from the requests // will strip it from the requests
'name' => 'action_gridFieldAlterAction'. '?' . http_build_query($actionData), 'name' => 'action_gridFieldAlterAction'. '?' . http_build_query($actionData),
'tabindex' => $this->getTabIndex(), 'tabindex' => $this->getTabIndex(),
'data-url' => $this->gridField->Link(),
); );
if($this->isReadonly()) { if($this->isReadonly()) {

7
javascript/GridField.js
View File

@ -134,11 +134,4 @@
}); });
$('fieldset.ss-gridfield[data-multiselect] .ss-gridfield-item').entwine({
onclick: function() {
// this.siblings('selected');
this._super();
}
});
}(jQuery)); }(jQuery));

41
javascript/HtmlEditorField.js
View File

@ -17,36 +17,21 @@
*/ */
if($("#FolderImages").length > 0 && $("body.CMSMain").length > 0) loadImages(false); if($("#FolderImages").length > 0 && $("body.CMSMain").length > 0) loadImages(false);
/**
* Show / Hide the Upload Form
*/
$("#Form_EditorToolbarImageForm .showUploadField a").click(function() {
if($(this).hasClass("showing")) {
$("#Form_EditorToolbarImageForm_Files-0").parents('.file').hide();
$(this).text(ss.i18n._t('HtmlEditorField.ShowUploadForm', 'Upload File')).removeClass("showing");
}
else {
$("#Form_EditorToolbarImageForm_Files-0").parents('.file').show();
$(this).text(ss.i18n._t('HtmlEditorField.HideUploadForm', 'Hide Upload Form')).addClass("showing");
}
return false;
}).show();
/** /**
* On folder change - lookup the new images * On folder change - lookup the new images
*/ */
$("#Form_EditorToolbarImageForm_Files-0").change(function() { $("#Form_EditorToolbarMediaForm_Files-0").change(function() {
$(".cms-editor-dialogs #Form_EditorToolbarImageForm").ajaxForm({ $(".cms-editor-dialogs #Form_EditorToolbarMediaForm").ajaxForm({
url: 'admin/assets/UploadForm?action_doUpload=1', url: 'admin/assets/UploadForm?action_doUpload=1',
iframe: true, iframe: true,
dataType: 'json', dataType: 'json',
beforeSubmit: function(data) { beforeSubmit: function(data) {
$("#UploadFormResponse").text("Uploading File...").addClass("loading").show(); $("#UploadFormResponse").text("Uploading File...").addClass("loading").show();
$("#Form_EditorToolbarImageForm_Files-0").parents('.file').hide(); $("#Form_EditorToolbarMediaForm_Files-0").parents('.file').hide();
}, },
success: function(data) { success: function(data) {
$("#UploadFormResponse").text("").removeClass("loading"); $("#UploadFormResponse").text("").removeClass("loading");
$("#Form_EditorToolbarImageForm_Files-0").val("").parents('.file').show(); $("#Form_EditorToolbarMediaForm_Files-0").val("").parents('.file').show();
$("#FolderImages").html('<h2>'+ ss.i18n._t('HtmlEditorField.Loading', 'Loading') + '</h2>'); $("#FolderImages").html('<h2>'+ ss.i18n._t('HtmlEditorField.Loading', 'Loading') + '</h2>');
@ -59,13 +44,13 @@
* Loads images from getimages() to the thumbnail view. It's called on * Loads images from getimages() to the thumbnail view. It's called on
*/ */
function loadImages(params) { function loadImages(params) {
$.get('admin/EditorToolbar/ImageForm', { $.get('admin/EditorToolbar/MediaForm', {
action_callfieldmethod: "1", action_callfieldmethod: "1",
fieldName: "FolderImages", fieldName: "FolderImages",
ajax: "1", ajax: "1",
methodName: "getimages", methodName: "getimages",
folderID: $("#Form_EditorToolbarImageForm_FolderID").val(), folderID: $("#Form_EditorToolbarMediaForm_ParentID").val(),
searchText: $("#Form_EditorToolbarImageForm_getimagesSearch").val(), searchText: $("#Form_EditorToolbarMediaForm_getimagesSearch").val(),
cacheKillerDate: parseInt((new Date()).getTime()), cacheKillerDate: parseInt((new Date()).getTime()),
cacheKillerRand: parseInt(10000 * Math.random()) cacheKillerRand: parseInt(10000 * Math.random())
}, },
@ -480,5 +465,17 @@
return false; return false;
} }
}); });
$('form.htmleditorfield-mediaform').entwine({
});
$('form.htmleditorfield-mediaform #ParentID .TreeDropdownField').entwine({
onchange: function() {
var fileList = this.closest('form').find('fieldset.ss-gridfield');
fileList.setState('ParentID', this.getValue());
fileList.reload();
}
});
}); });
})(jQuery); })(jQuery);

26
javascript/tiny_mce_improvements.js vendored
View File

@ -43,8 +43,8 @@ SideFormAction.prototype = {
} }
} }
ImageForm = Class.extend('ToolbarForm'); MediaForm = Class.extend('ToolbarForm');
ImageForm.prototype = { MediaForm.prototype = {
initialize: function() { initialize: function() {
var __form = this; var __form = this;
@ -153,8 +153,8 @@ ImageForm.prototype = {
try { try {
var imgTag = image.getElementsByTagName('img')[0]; var imgTag = image.getElementsByTagName('img')[0];
this.selectedImageWidth = $('Form_EditorToolbarImageForm_Width').value = imgTag.className.match(/destwidth=([0-9.\-]+)([, ]|$)/) ? RegExp.$1 : null; this.selectedImageWidth = $('Form_EditorToolbarMediaForm_Width').value = imgTag.className.match(/destwidth=([0-9.\-]+)([, ]|$)/) ? RegExp.$1 : null;
this.selectedImageHeight = $('Form_EditorToolbarImageForm_Height').value = imgTag.className.match(/destheight=([0-9.\-]+)([, ]|$)/) ? RegExp.$1 : null; this.selectedImageHeight = $('Form_EditorToolbarMediaForm_Height').value = imgTag.className.match(/destheight=([0-9.\-]+)([, ]|$)/) ? RegExp.$1 : null;
} catch(er) { } catch(er) {
} }
}, },
@ -174,12 +174,12 @@ ImageThumbnail.prototype = {
}, },
onclick: function(e) { onclick: function(e) {
$('Form_EditorToolbarImageForm').selectImage(this); $('Form_EditorToolbarMediaForm').selectImage(this);
return false; return false;
}, },
insert: function() { insert: function() {
var formObj = $('Form_EditorToolbarImageForm'); var formObj = $('Form_EditorToolbarMediaForm');
var altText = formObj.elements.AltText.value; var altText = formObj.elements.AltText.value;
var titleText = formObj.elements.ImageTitle.value; var titleText = formObj.elements.ImageTitle.value;
var cssClass = formObj.elements.CSSClass.value; var cssClass = formObj.elements.CSSClass.value;
@ -193,8 +193,8 @@ ImageThumbnail.prototype = {
var data = { var data = {
'src' : relativeHref, 'src' : relativeHref,
'alt' : altText, 'alt' : altText,
'width' : $('Form_EditorToolbarImageForm_Width').value, 'width' : $('Form_EditorToolbarMediaForm_Width').value,
'height' : $('Form_EditorToolbarImageForm_Height').value, 'height' : $('Form_EditorToolbarMediaForm_Height').value,
'title' : titleText, 'title' : titleText,
'class' : cssClass 'class' : cssClass
}; };
@ -246,7 +246,7 @@ function reselectImage(transport) {
image = link.href.substring(0, quesmark); image = link.href.substring(0, quesmark);
if(image == selectedimage) { if(image == selectedimage) {
link.className = 'selectedImage'; link.className = 'selectedImage';
$('Form_EditorToolbarImageForm').selectedImage = link; $('Form_EditorToolbarMediaForm').selectedImage = link;
break; break;
} }
} }
@ -328,9 +328,9 @@ FlashThumbnail.prototype = {
} }
} }
ImageForm.applyTo('#Form_EditorToolbarImageForm'); MediaForm.applyTo('#Form_EditorToolbarMediaForm');
ImageThumbnail.applyTo('#Form_EditorToolbarImageForm div.thumbnailstrip a'); ImageThumbnail.applyTo('#Form_EditorToolbarMediaForm div.thumbnailstrip a');
SideFormAction.applyTo('#Form_EditorToolbarImageForm .Actions input'); SideFormAction.applyTo('#Form_EditorToolbarMediaForm .Actions input');
FlashForm.applyTo('#Form_EditorToolbarFlashForm'); FlashForm.applyTo('#Form_EditorToolbarFlashForm');
FlashThumbnail.applyTo('#Form_EditorToolbarFlashForm div.thumbnailstrip a'); FlashThumbnail.applyTo('#Form_EditorToolbarFlashForm div.thumbnailstrip a');
@ -345,7 +345,7 @@ MCEImageResizer.prototype = {
//TinyMCE.prototype.addEvent(this, 'click', this._onclick); //TinyMCE.prototype.addEvent(this, 'click', this._onclick);
}, },
_onclick: function() { _onclick: function() {
var form = $('Form_EditorToolbarImageForm'); var form = $('Form_EditorToolbarMediaForm');
if(form) { if(form) {
form.elements.AltText.value = this.alt; form.elements.AltText.value = this.alt;
form.elements.ImageTitle.value = this.title; form.elements.ImageTitle.value = this.title;

12
tests/forms/HtmlEditorFieldTest.php
View File

@ -10,7 +10,7 @@ class HtmlEditorFieldTest extends FunctionalTest {
public static $use_draft_site = true; public static $use_draft_site = true;
protected $requiredExtensions = array( protected $requiredExtensions = array(
'HtmlEditorField_Toolbar' => array('HtmlEditorFieldTest_DummyImageFormFieldExtension') 'HtmlEditorField_Toolbar' => array('HtmlEditorFieldTest_DummyMediaFormFieldExtension')
); );
protected $extraDataObjects = array('HtmlEditorFieldTest_Object'); protected $extraDataObjects = array('HtmlEditorFieldTest_Object');
@ -76,15 +76,15 @@ class HtmlEditorFieldTest extends FunctionalTest {
); );
} }
public function testExtendImageFormFields() { public function testExtendMediaFormFields() {
if(class_exists('ThumbnailStripField')) { if(class_exists('ThumbnailStripField')) {
$controller = new Controller(); $controller = new Controller();
$toolbar = new HtmlEditorField_Toolbar($controller, 'DummyToolbar'); $toolbar = new HtmlEditorField_Toolbar($controller, 'DummyToolbar');
$imageForm = $toolbar->ImageForm(); $form = $toolbar->MediaForm();
$this->assertTrue(HtmlEditorFieldTest_DummyImageFormFieldExtension::$update_called); $this->assertTrue(HtmlEditorFieldTest_DummyMediaFormFieldExtension::$update_called);
$this->assertEquals($imageForm->Fields(), HtmlEditorFieldTest_DummyImageFormFieldExtension::$fields); $this->assertEquals($form->Fields(), HtmlEditorFieldTest_DummyMediaFormFieldExtension::$fields);
} else { } else {
$this->markTestSkipped('Test requires cms module (ThumbnailStripfield class)'); $this->markTestSkipped('Test requires cms module (ThumbnailStripfield class)');
} }
@ -96,7 +96,7 @@ class HtmlEditorFieldTest extends FunctionalTest {
* @package sapphire * @package sapphire
* @subpackage tests * @subpackage tests
*/ */
class HtmlEditorFieldTest_DummyImageFormFieldExtension extends Extension implements TestOnly { class HtmlEditorFieldTest_DummyMediaFormFieldExtension extends Extension implements TestOnly {
public static $fields = null; public static $fields = null;
public static $update_called = false; public static $update_called = false;