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

ENHANCEMENT: SSF-38 initial rearranging of the insert image form to allow uploads as well as choosing an image from the CMS (and you can pick and choose from both)

Browse Source
This commit is contained in:
Julian Seidenberg 2012-03-29 13:34:55 +13:00
parent cbb0259dd7
commit 9f9dc25338
2 changed files with 67 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
forms/HtmlEditorField.php
View File

@ -369,27 +369,55 @@ class HtmlEditorField_Toolbar extends RequestHandler {
)); ));
$numericLabelTmpl = '<span class="step-label"><span class="flyout">%d</span><span class="arrow"></span><strong class="title">%s</strong></span>'; $numericLabelTmpl = '<span class="step-label"><span class="flyout">%d</span><span class="arrow"></span><strong class="title">%s</strong></span>';
$fields = new FieldList(
new LiteralField(
'Heading',
sprintf('<h3>%s</h3>', _t('HtmlEditorField.IMAGE', 'Image'))
),
$contentComposite = new CompositeField( $fromCMS = new CompositeField(
new LiteralField('headerSelect', '<h4 class="field header-select">' . sprintf($numericLabelTmpl, '1', _t('HtmlEditorField.Find', 'Find')) . '</h4>'), new LiteralField('headerSelect', '<h4 class="field header-select">' . sprintf($numericLabelTmpl, '1', _t('HtmlEditorField.Find', 'Find')) . '</h4>'),
$selectComposite = new CompositeField( $selectComposite = new CompositeField(
new TreeDropdownField('ParentID', _t('HtmlEditorField.FOLDER', 'Folder'), 'Folder'), new TreeDropdownField('ParentID', _t('HtmlEditorField.FOLDER', 'Folder'), 'Folder'),
$fileField $fileField
),
new LiteralField('headerEdit', '<h4 class="field header-edit">' . sprintf($numericLabelTmpl, '2', _t('HtmlEditorField.EditDetails', 'Edit details')) . '</h4>'),
$editComposite = new CompositeField(
new LiteralField('contentEdit', '<div class="content-edit"></div>')
) )
);
$fromCMS->addExtraClass('content');
$selectComposite->addExtraClass('content-select');
Requirements::css(SAPPHIRE_DIR . '/css/AssetUploadField.css');
$computerUploadField = Object::create('UploadField', 'AssetUploadField', '');
$computerUploadField->setConfig('previewMaxWidth', 40);
$computerUploadField->setConfig('previewMaxHeight', 30);
$computerUploadField->addExtraClass('ss-assetuploadfield');
$computerUploadField->removeExtraClass('ss-uploadfield');
$computerUploadField->setTemplate('AssetUploadField');
$computerUploadField->setFolderName(Upload::$uploads_folder);
$tabSet = new TabSet(
"MediaFormInsertImageTabs",
new Tab(
'From your computer',
$computerUploadField
),
new Tab(
'From the CMS',
$fromCMS
) )
); );
$allFields = new CompositeField(
$tabSet,
new LiteralField('headerEdit', '<h4 class="field header-edit">' . sprintf($numericLabelTmpl, '2', _t('HtmlEditorField.EditDetails', 'Edit details')) . '</h4>'),
$editComposite = new CompositeField(
new LiteralField('contentEdit', '<div class="content-edit"></div>')
)
);
$fields = new FieldList(
new LiteralField(
'Heading',
sprintf('<h3>%s</h3>', _t('HtmlEditorField.IMAGE', 'Insert Image'))
),
$allFields
);
$actions = new FieldList( $actions = new FieldList(
FormAction::create('insertimage', _t('HtmlEditorField.BUTTONINSERT', 'Insert')) FormAction::create('insertimage', _t('HtmlEditorField.BUTTONINSERT', 'Insert'))
->addExtraClass('ss-ui-action-constructive') ->addExtraClass('ss-ui-action-constructive')
@ -404,8 +432,6 @@ class HtmlEditorField_Toolbar extends RequestHandler {
$actions $actions
); );
$contentComposite->addExtraClass('content');
$selectComposite->addExtraClass('content-select');
$form->unsetValidator(); $form->unsetValidator();
$form->disableSecurityToken(); $form->disableSecurityToken();

24
javascript/HtmlEditorField.js
View File

@ -696,6 +696,30 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
} }
}); });
/**
* Show the second step after uploading an image
*/
$('.ss-assetuploadfield').entwine({
onmatch: function() {
this._super();
// Always hide the "second step" part, we don't need it here
this.find('.ss-uploadfield-editandorganize').hide();
},
onfileuploadstop: function(e) {
//get the uploaded file ID when this event triggers, signaling the upload has compeleted successfully
//always use the last one uploaded
var uploadedFileID = $('ul.ss-uploadfield-files').children('li.ss-uploadfield-item').last().data('fileid');
//trigger the detail view for filling out details about the file we are about to insert into TinyMCE
var form = this.closest('form');
form.closest('form').showFileView(uploadedFileID);
form.redraw();
}
});
/** /**
* Represents a single selected file, together with a set of form fields to edit its properties. * Represents a single selected file, together with a set of form fields to edit its properties.
* Overload this based on the media type to determine how the HTML should be created. * Overload this based on the media type to determine how the HTML should be created.