Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

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)
  • Loading branch information...
commit ba4d7099bb5aecce273bf03f955fb5ca089cf254 1 parent 9da43d1
@chillu chillu authored
View
19 admin/code/LeftAndMain.php
@@ -207,13 +207,13 @@ function init() {
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 @@ function EditForm($request = null) {
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 @@ public function getEditForm($id = null) {
}
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 @@ function EmptyForm() {
$form->unsetValidator();
$form->addExtraClass('cms-edit-form');
$form->addExtraClass('root-form');
+ $form->setTemplate($this->getTemplatesWithSuffix('_EditForm'));
return $form;
}
@@ -946,6 +954,7 @@ function BatchActionsForm() {
public function myprofile() {
$form = $this->Member_ProfileForm();
return $this->customise(array(
+ 'Content' => ' ',
'Form' => $form
))->renderWith('BlankPage');
}
View
7 admin/javascript/LeftAndMain.EditForm.js
@@ -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();
View
67 admin/javascript/LeftAndMain.js
@@ -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));
View
62 admin/javascript/ssui.core.js
@@ -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');
View
16 admin/templates/CMSTabSet.ss
@@ -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>
View
27 admin/templates/LeftAndMain.ss
@@ -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
View
56 admin/templates/LeftAndMain_EditForm.ss
@@ -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 %>
Please sign in to comment.
Something went wrong with that request. Please try again.