mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
ENHANCEMENT Using custom CMSEditForm to render LeftAndMain->EditForm(), in order to place (fake) tab navigation alongside the layout manager areas (outside of actual edit form)
This commit is contained in:
Ingo Schommer
parent
9da43d139a
commit
ba4d7099bb
@ -207,13 +207,13 @@ class LeftAndMain extends Controller {
|
||||
Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-metadata/jquery.metadata.js');
|
||||
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/jquery-fitheighttoparent/jquery.fitheighttoparent.js');
|
||||
|
||||
// entwine
|
||||
Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-entwine/dist/jquery.entwine-dist.js');
|
||||
|
||||
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/ssui.core.js');
|
||||
// @todo Load separately so the CSS files can be inlined
|
||||
Requirements::css(SAPPHIRE_DIR . '/thirdparty/jquery-ui-themes/smoothness/jquery.ui.all.css');
|
||||
|
||||
// entwine
|
||||
Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-entwine/dist/jquery.entwine-dist.js');
|
||||
|
||||
// Required for TreeTools panel above tree
|
||||
Requirements::javascript(SAPPHIRE_DIR . '/javascript/TabSet.js');
|
||||
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/thirdparty/jsizes/lib/jquery.sizes.js');
|
||||
@ -719,7 +719,14 @@ class LeftAndMain extends Controller {
|
||||
return $this->getEditForm();
|
||||
}
|
||||
|
||||
public function getEditForm($id = null) {
|
||||
/**
|
||||
* Calls {@link SiteTree->getCMSFields()}
|
||||
*
|
||||
* @param Int $id
|
||||
* @param FieldSet $fields
|
||||
* @return Form
|
||||
*/
|
||||
public function getEditForm($id = null, $fields = null) {
|
||||
if(!$id) $id = $this->currentPageID();
|
||||
|
||||
if(is_object($id)) {
|
||||
@ -730,7 +737,7 @@ class LeftAndMain extends Controller {
|
||||
}
|
||||
|
||||
if($record) {
|
||||
$fields = $record->getCMSFields();
|
||||
$fields = ($fields) ? $fields : $record->getCMSFields();
|
||||
if ($fields == null) {
|
||||
user_error(
|
||||
"getCMSFields() returned null - it should return a FieldSet object.
|
||||
@ -831,6 +838,7 @@ class LeftAndMain extends Controller {
|
||||
$form->unsetValidator();
|
||||
$form->addExtraClass('cms-edit-form');
|
||||
$form->addExtraClass('root-form');
|
||||
$form->setTemplate($this->getTemplatesWithSuffix('_EditForm'));
|
||||
|
||||
return $form;
|
||||
}
|
||||
@ -946,6 +954,7 @@ class LeftAndMain extends Controller {
|
||||
public function myprofile() {
|
||||
$form = $this->Member_ProfileForm();
|
||||
return $this->customise(array(
|
||||
'Content' => ' ',
|
||||
'Form' => $form
|
||||
))->renderWith('BlankPage');
|
||||
}
|
||||
|
||||
@ -163,6 +163,9 @@
|
||||
self._loadResponse(xmlhttp.responseText, status, xmlhttp, formData);
|
||||
}
|
||||
|
||||
// Re-init tabs (in case the form tag itself is a tabset)
|
||||
if(self.hasClass('ss-tabset')) self.removeClass('ss-tabset').addClass('ss-tabset');
|
||||
|
||||
// re-select previously saved tabs
|
||||
$.each(selectedTabs, function(i, selectedTab) {
|
||||
self.find('#' + selectedTab.id).tabs('select', selectedTab.selected);
|
||||
@ -308,8 +311,8 @@
|
||||
this.removeForm();
|
||||
}
|
||||
|
||||
// @todo Coupling to avoid FOUC (entwine applies to late)
|
||||
this.find('.ss-tabset').tabs();
|
||||
// If the form itself is a tabset, force re-rendering
|
||||
if(this.hasClass('ss-tabset')) this.tabs('destroy').tabs();
|
||||
|
||||
this._setupChangeTracker();
|
||||
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
/**
|
||||
* File: LeftAndMain.js
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
|
||||
$.metadata.setType('html5');
|
||||
|
||||
$.entwine('ss', function($){
|
||||
|
||||
/**
|
||||
* Position the loading spinner animation below the ss logo
|
||||
*/
|
||||
@ -52,13 +55,12 @@
|
||||
var self = this;
|
||||
|
||||
// Initialize layouts, inner to outer
|
||||
$('.cms-content').layout();
|
||||
var doInnerLayout = function() {$('.cms-content').layout();}
|
||||
var outer = $('.cms-container');
|
||||
var layout = function() {
|
||||
outer.layout({resize: false});
|
||||
}
|
||||
layout();
|
||||
$(window).resize(layout);
|
||||
var doOuterLayout = function() {outer.layout({resize: false});}
|
||||
doInnerLayout();
|
||||
doOuterLayout();
|
||||
$(window).resize(doOuterLayout);
|
||||
|
||||
// Remove loading screen
|
||||
$('.ss-loading-screen').hide();
|
||||
@ -67,18 +69,9 @@
|
||||
|
||||
this._setupPinging();
|
||||
|
||||
// If tab has no nested tabs, set overflow to auto
|
||||
$(this).find('.tab').not(':has(.tab)').css('overflow', 'auto');
|
||||
|
||||
// @todo Doesn't resize properly if the response doesn't contain a tabset (see above)
|
||||
$('.cms-edit-form').bind('loadnewpage', function() {
|
||||
// HACK Delay resizing to give jquery-ui tabs a change their dimensions
|
||||
// through dynamically added css classes
|
||||
var timerID = "timerLeftAndMainResize";
|
||||
if (window[timerID]) clearTimeout(window[timerID]);
|
||||
window[timerID] = setTimeout(function() {
|
||||
layout();
|
||||
}, 200);
|
||||
$('.cms-edit-form').live('loadnewpage', function() {
|
||||
doInnerLayout();
|
||||
doOuterLayout();
|
||||
});
|
||||
|
||||
this._super();
|
||||
@ -122,38 +115,11 @@
|
||||
* a new 'clickedButton' property on the form DOM element.
|
||||
*/
|
||||
$('.LeftAndMain :submit, .LeftAndMain button, .LeftAndMain :reset').entwine({
|
||||
|
||||
/**
|
||||
* Constructor: onmatch
|
||||
*/
|
||||
onmatch: function() {
|
||||
this.addClass(
|
||||
'ui-state-default ' +
|
||||
'ui-corner-all'
|
||||
)
|
||||
.hover(
|
||||
function() {
|
||||
$(this).addClass('ui-state-hover');
|
||||
},
|
||||
function() {
|
||||
$(this).removeClass('ui-state-hover');
|
||||
}
|
||||
)
|
||||
.focus(function() {
|
||||
$(this).addClass('ui-state-focus');
|
||||
})
|
||||
.blur(function() {
|
||||
$(this).removeClass('ui-state-focus');
|
||||
})
|
||||
.click(function() {
|
||||
var form = this.form;
|
||||
// forms don't natively store the button they've been triggered with
|
||||
form.clickedButton = this;
|
||||
// Reset the clicked button shortly after the onsubmit handlers
|
||||
// have fired on the form
|
||||
setTimeout(function() {form.clickedButton = null;}, 10);
|
||||
});
|
||||
|
||||
// TODO Adding classes in onmatch confuses entwine
|
||||
var self = this;
|
||||
setTimeout(function() {self.addClass('ss-ui-button');}, 10);
|
||||
|
||||
this._super();
|
||||
}
|
||||
});
|
||||
@ -320,6 +286,7 @@
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
}(jQuery));
|
||||
|
||||
|
||||
@ -1,4 +1,66 @@
|
||||
(function($) {
|
||||
|
||||
$('.ss-ui-button').entwine({
|
||||
/**
|
||||
* Constructor: onmatch
|
||||
*/
|
||||
onmatch: function() {
|
||||
this.addClass(
|
||||
'ui-state-default ' +
|
||||
'ui-corner-all'
|
||||
)
|
||||
.hover(
|
||||
function() {
|
||||
$(this).addClass('ui-state-hover');
|
||||
},
|
||||
function() {
|
||||
$(this).removeClass('ui-state-hover');
|
||||
}
|
||||
)
|
||||
.focus(function() {
|
||||
$(this).addClass('ui-state-focus');
|
||||
})
|
||||
.blur(function() {
|
||||
$(this).removeClass('ui-state-focus');
|
||||
})
|
||||
.click(function() {
|
||||
var form = this.form;
|
||||
// forms don't natively store the button they've been triggered with
|
||||
form.clickedButton = this;
|
||||
// Reset the clicked button shortly after the onsubmit handlers
|
||||
// have fired on the form
|
||||
setTimeout(function() {form.clickedButton = null;}, 10);
|
||||
});
|
||||
|
||||
this._super();
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Creates a jQuery UI tab navigation bar, detached from the container DOM structure.
|
||||
*/
|
||||
$('.ss-ui-tabs-nav').entwine({
|
||||
onmatch: function() {
|
||||
this.addClass('ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-panel ui-corner-bottom');
|
||||
this.find('ul').addClass('ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all');
|
||||
this.find('li').addClass('ui-state-default ui-corner-top');
|
||||
// TODO Figure out selected tab
|
||||
this.find('li:first').selectIt();
|
||||
|
||||
this._super();
|
||||
}
|
||||
});
|
||||
|
||||
$('.ss-ui-tabs-nav li').entwine({
|
||||
onclick: function() {
|
||||
this.selectIt();
|
||||
},
|
||||
selectIt: function() {
|
||||
var cls = 'ui-tabs-selected ui-state-active';
|
||||
this.addClass(cls).siblings().not(this).removeClass(cls);
|
||||
}
|
||||
});
|
||||
|
||||
$.widget("ssui.titlebar", {
|
||||
_create: function() {
|
||||
this.originalTitle = this.element.attr('title');
|
||||
|
||||
16
admin/templates/CMSTabSet.ss
Normal file
16
admin/templates/CMSTabSet.ss
Normal file
@ -0,0 +1,16 @@
|
||||
<div id="$id">
|
||||
|
||||
<%-- Tab nav is rendered in CMSEditForm.ss --%>
|
||||
|
||||
<% control Tabs %>
|
||||
<div class="tab" id="$id">
|
||||
<% if Tabs %>
|
||||
$FieldHolder
|
||||
<% else %>
|
||||
<% control Fields %>
|
||||
$FieldHolder
|
||||
<% end_control %>
|
||||
<% end_if %>
|
||||
</div>
|
||||
<% end_control %>
|
||||
</div>
|
||||
@ -7,38 +7,19 @@
|
||||
<title>$ApplicationName | $SectionTitle</title>
|
||||
</head>
|
||||
|
||||
<body class="loading $CSSClasses">
|
||||
<body class="loading cms $CSSClasses">
|
||||
|
||||
<% include CMSLoadingScreen %>
|
||||
|
||||
<div class="cms-container {layout: {type: 'border'}}">
|
||||
<div class="cms-container" data-layout="{type: 'border'}">
|
||||
|
||||
$Menu
|
||||
|
||||
<div class="cms-content center {layout: {type: 'border'}}" id="right">
|
||||
|
||||
<div class="cms-content-header north">
|
||||
<h2>Section title</h2>
|
||||
<ul>
|
||||
<li>Tab 1</li>
|
||||
<li>Tab 2</li>
|
||||
</ul>
|
||||
<div class="cms-content-search"></div>
|
||||
</div>
|
||||
|
||||
<div class="cms-content-tools west">
|
||||
$Left
|
||||
</div>
|
||||
|
||||
<div class="cms-content-form center">
|
||||
$Right
|
||||
</div>
|
||||
|
||||
</div>
|
||||
$Content
|
||||
|
||||
</div>
|
||||
|
||||
<div id=".cms-editor-dialogs">
|
||||
<div id="cms-editor-dialogs">
|
||||
<% control EditorToolbar %>
|
||||
$ImageForm
|
||||
$LinkForm
|
||||
|
||||
56
admin/templates/LeftAndMain_EditForm.ss
Normal file
56
admin/templates/LeftAndMain_EditForm.ss
Normal file
@ -0,0 +1,56 @@
|
||||
<% if IncludeFormTag %>
|
||||
<form $FormAttributes data-layout="{type: 'border'}">
|
||||
<% end_if %>
|
||||
|
||||
<div class="cms-content-header north">
|
||||
<h2>My Page Title</h2>
|
||||
<% if Fields.hasTabset %>
|
||||
<% with Fields.fieldByName('Root') %>
|
||||
<div class="cms-content-header-tabs">
|
||||
<ul>
|
||||
<% control Tabs %>
|
||||
<li><a href="#$id">$Title</a></li>
|
||||
<% end_control %>
|
||||
</ul>
|
||||
<% end_with %>
|
||||
</div>
|
||||
<% end_if %>
|
||||
|
||||
<!-- <div class="cms-content-search">...</div> -->
|
||||
</div>
|
||||
|
||||
<!-- <div class="cms-content-tools west">
|
||||
$Left
|
||||
</div> -->
|
||||
|
||||
<div class="cms-content-form center">
|
||||
|
||||
<% if Message %>
|
||||
<p id="{$FormName}_error" class="message $MessageType">$Message</p>
|
||||
<% else %>
|
||||
<p id="{$FormName}_error" class="message $MessageType" style="display: none"></p>
|
||||
<% end_if %>
|
||||
|
||||
<fieldset>
|
||||
<% if Legend %><legend>$Legend</legend><% end_if %>
|
||||
<% control Fields %>
|
||||
$FieldHolder
|
||||
<% end_control %>
|
||||
<div class="clear"><!-- --></div>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="cms-content-actions south">
|
||||
<% if Actions %>
|
||||
<div class="Actions">
|
||||
<% control Actions %>
|
||||
$Field
|
||||
<% end_control %>
|
||||
</div>
|
||||
<% end_if %>
|
||||
</div>
|
||||
|
||||
<% if IncludeFormTag %>
|
||||
</form>
|
||||
<% end_if %>
|
||||
Loading…
Reference in New Issue
Block a user