Permalink
Browse files

MINOR Removed '.LeftAndMain' selector from rules in order to avoid DO…

…M hierarchy confusion (.LeftAndMain contains .cms-content vs .LeftAndMain equals .cms-content)
  • Loading branch information...
1 parent 19b9edb commit a1b86983897f3f99675c5d291cc443746ae503cd @chillu chillu committed Jul 5, 2011
@@ -2,10 +2,10 @@
$.entwine('ss', function($){
- $('.LeftAndMain .cms-content, .LeftAndMain .cms-content *').entwine({
+ $('.cms-content, .cms-content *').entwine({
/**
* Triggered before a new URL is loaded, typically via ajax.
- * Loading itself is handled by .LeftAndMain and window.history.
+ * Loading itself is handled by $('.cms-container') and window.history.
*
* @param {String}
*/
@@ -37,7 +37,7 @@
* For example, a page edit form might fill the whole area,
* while a ModelAdmin layout shows a search form on the left, and edit form on the right.
*/
- $('.LeftAndMain .cms-content').entwine({
+ $('.cms-content').entwine({
onmatch: function() {
var self = this;
@@ -71,6 +71,9 @@
/**
* Function: loadForm
*
+ * See $('.cms-container').handleStateChange() on a frequently used alternative
+ * to direct ajax loading of content, with support for the window.History object.
+ *
* Parameters:
* (String) url - ..
* (Function) callback - (Optional) Called after the form content as been loaded
@@ -32,7 +32,7 @@
// $(this).find('a:first').append('<span class="toggle">o</span>');
// });
- $('.LeftAndMain').bind('afterstatechange', function(e, data) {
+ $('.cms-container').bind('afterstatechange', function(e, data) {
var controller = data.xhr.getResponseHeader('X-Controller');
if(controller) self.find('li#Menu-' + controller).select();
});
@@ -4,7 +4,7 @@
(function($) {
$.entwine('ss', function($){
- $('.LeftAndMain').entwine(/** @lends ss.Form_EditForm */{
+ $('.cms-container').entwine(/** @lends ss.Form_EditForm */{
/**
* Variable: PingIntervalSeconds
* (Number) Interval in which /Security/ping will be checked for a valid login session.
@@ -2,7 +2,7 @@
$.entwine('ss', function($){
- $('.LeftAndMain .cms-preview').entwine({
+ $('.cms-preview').entwine({
// Minimum width to keep the CMS operational
SharedWidth: null,
@@ -31,7 +31,7 @@
self._fixIframeLinks();
// Limit to CMS forms for the moment
- $('.CMSMain .cms-edit-form').bind('loadnewpage', function(e, ui) {
+ $('.cms-edit-form').bind('loadnewpage', function(e, ui) {
// var url = ui.xmlhttp.getResponseHeader('x-frontend-url');
var url = $(this).find(':input[name=StageURLSegment]').val();
if(url) self.loadUrl(url + '&cms-preview-disabled=1');
@@ -54,10 +54,12 @@
},
loadCurrentPage: function() {
- var doc = this.find('iframe')[0].contentDocument, container = this.getLayoutContainer();
+ var doc = this.find('iframe')[0].contentDocument,
+ containerEl = this.getLayoutContainer(),
+ contentEl = containerEl.find('.cms-content');
// Only load if we're in the "edit page" view
- if(!container.hasClass('CMSMain') || container.hasClass('CMSPagesController')) return;
+ if(!contentEl.hasClass('CMSMain') || contentEl.hasClass('CMSPagesController') || contentEl.hasClass('CMSSettingsController')) return;
// Load this page in the admin interface if appropriate
var id = $(doc).find('meta[name=x-page-id]').attr('content'), contentPanel = $('.cms-content');
@@ -105,34 +107,34 @@
},
getLayoutContainer: function() {
- return this.parents('.LeftAndMain');
+ return this.parents('.cms-container');
},
toggle: function(bool) {
this[this.hasClass('is-collapsed') ? 'expand' : 'collapse']();
}
});
- $('.LeftAndMain .cms-preview.collapsed').entwine({
+ $('.cms-preview.collapsed').entwine({
onmatch: function() {
this.find('a').text('<');
}
});
- $('.LeftAndMain .cms-preview.expanded').entwine({
+ $('.cms-preview.expanded').entwine({
onmatch: function() {
this.find('a').text('>');
}
});
- $('.LeftAndMain .cms-preview .cms-preview-toggle').entwine({
+ $('.cms-preview .cms-preview-toggle').entwine({
onclick: function(e) {
e.preventDefault();
this.parents('.cms-preview').toggle();
}
});
- $('.LeftAndMain .cms-switch-view a').entwine({
+ $('.cms-switch-view a').entwine({
onclick: function(e) {
e.preventDefault();
var preview = $('.cms-preview');
@@ -141,7 +143,7 @@
}
});
- $('.LeftAndMain .cms-menu li').entwine({
+ $('.cms-menu li').entwine({
onclick: function(e) {
// Prevent reloading of interface when opening the edit panel
if(this.hasClass('Menu-CMSMain')) {
@@ -31,16 +31,14 @@
});
/**
- * Class: .LeftAndMain
- *
* Main LeftAndMain interface with some control panel and an edit form.
*
* Events:
* ajaxsubmit - ...
* validate - ...
* loadnewpage - ...
*/
- $('.LeftAndMain').entwine({
+ $('.cms-container').entwine({
CurrentXHR: null,
@@ -80,9 +78,9 @@
redraw: function() {
// Not all edit forms are layouted
- var editForm = this.find('.cms-edit-form[data-layout]').layout();
- this.find('.cms-content').layout();
- this.find('.cms-container').layout({resize: false})
+ var editForm = $('.cms-edit-form[data-layout]').layout();
+ $('.cms-content').layout();
+ $('.cms-container').layout({resize: false})
},
/**
@@ -114,8 +112,7 @@
// Don't allow parallel loading to avoid edge cases
if(this.getCurrentXHR()) this.getCurrentXHR().abort();
- // TODO Support loading into multiple panels
- var contentEl = $(state.data.selector || '.LeftAndMain .cms-content');
+ var contentEl = $(state.data.selector || '.cms-content');
this.trigger('beforestatechange', {state: state});
contentEl.beforeLoad(state.url);
@@ -140,20 +137,18 @@
/**
* Monitor all panels for layout changes
*/
- $('.LeftAndMain .cms-panel').entwine({
+ $('.cms-panel').entwine({
ontoggle: function(e) {
- this.parents('.LeftAndMain').redraw();
+ this.parents('.cms-container').redraw();
}
});
/**
- * Class: .LeftAndMain :submit, .LeftAndMain button, .LeftAndMain :reset
- *
* Make all buttons "hoverable" with jQuery theming.
* Also sets the clicked button on a form submission, making it available through
* a new 'clickedButton' property on the form DOM element.
*/
- $('.LeftAndMain :submit, .LeftAndMain button, .LeftAndMain :reset').entwine({
+ $('.cms-container :submit, .cms-container button, .cms-container :reset').entwine({
onmatch: function() {
// TODO Adding classes in onmatch confuses entwine
var self = this;
@@ -168,7 +163,7 @@
*
* Link for editing the profile for a logged-in member through a modal dialog.
*/
- $('.LeftAndMain .profile-link').entwine({
+ $('.cms-container .profile-link').entwine({
/**
* Constructor: onmatch
@@ -310,7 +305,7 @@
* the DOM element on creation, rather than onclick - which allows us to decorate
* the field with a calendar icon
*/
- $('.LeftAndMain .field.date input.text').entwine({
+ $('.cms-container .field.date input.text').entwine({
onmatch: function() {
var holder = $(this).parents('.field.date:first'), config = holder.metadata({type: 'class'});
if(!config.showcalendar) return;
@@ -7,7 +7,7 @@
<title>$Title</title>
</head>
-<body class="loading cms $BaseCSSClasses">
+<body class="loading cms">
<% include CMSLoadingScreen %>

4 comments on commit a1b8698

Owner

wilr replied Aug 3, 2011

Since we're going down the path of splitting the CMS / sapphire perhaps we should use a better class than cms throughout sapphire, Usage of cms is now all over the place in sapphire/admin, perhaps that should be changed sooner rather than later?

Owner

chillu replied Aug 5, 2011

sapphire/admin is a pseudo-sub-module, in preparation for spinning it off into a proper module and providing a leaner core without much UI stuff.
So in this light, the "CMS" semantics seem adequate. Sure, you could call it a "CMF" (Content Management Framework), with a "CMS" module, but we haven't done anything around this on a marketing side, and frankly I think it'd confuse users. Do you have any alternative suggestions?

Owner

wilr replied Aug 5, 2011

Well I was thinking more along the lines of just using 'ss' for the core styles. If the cms module is going to extend the built in ui then it would be useful to have a distinction between what is provided by the sapphire ui module and what is needed by cms. At the moment all styles for the cms are all going into sapphire/ui but I almost feel some at least should be in the CMS module and keep sapphire/ui lighter and more generic.

Owner

chillu replied Aug 13, 2011

I agree that some styles should be in cms/scss rather than sapphire/admin/scss. A good example is the URLSegment field styling you've done recently, that could go in there. But it'd be the minority of styles - I'd rather have some styles in a less specific place (sapphire rather than cms), and have people actually find it and extend it in the right place (for core dev).

"ss-" vs "cms-": Yeah, that'd work for reusable UI components: I've started this with calling tabset styles "ss-tabset" rather than "cms-tabset", but its not 100% consistent - e.g. we have an "ss-loading-screen" thats only used in the CMS. My main intent for separating them is making it clear to core devs where certain styles are expected to be used - do you see any other important considerations?

Please sign in to comment.