Skip to content

Commit

Permalink
MINOR Removed '.LeftAndMain' selector from rules in order to avoid DO…
Browse files Browse the repository at this point in the history 
…M hierarchy confusion (.LeftAndMain contains .cms-content vs .LeftAndMain equals .cms-content)
  • Loading branch information
@chillu
chillu committed Jul 8, 2011
1 parent 19b9edb commit a1b8698
Show file tree
Hide file tree
Showing 6 changed files with 31 additions and 31 deletions.
9 changes: 6 additions & 3 deletions admin/javascript/LeftAndMain.Content.js
View file
Expand Up @@ -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}
*/
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion admin/javascript/LeftAndMain.Menu.js
View file
Expand Up @@ -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();
});
Expand Down
2 changes: 1 addition & 1 deletion admin/javascript/LeftAndMain.Ping.js
View file
Expand Up @@ -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.
Expand Down
22 changes: 12 additions & 10 deletions admin/javascript/LeftAndMain.Preview.js
View file
Expand Up @@ -2,7 +2,7 @@

$.entwine('ss', function($){

$('.LeftAndMain .cms-preview').entwine({
$('.cms-preview').entwine({

// Minimum width to keep the CMS operational
SharedWidth: null,
Expand Down Expand Up @@ -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');
Expand All @@ -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');
Expand Down Expand Up @@ -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');
Expand All @@ -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')) {
Expand Down
25 changes: 10 additions & 15 deletions admin/javascript/LeftAndMain.js
View file
Expand Up @@ -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,

Expand Down Expand Up @@ -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})
},

/**
Expand Down Expand Up @@ -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);

Expand All @@ -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;
Expand All @@ -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
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion admin/templates/LeftAndMain.ss
View file
Expand Up @@ -7,7 +7,7 @@
<title>$Title</title>
</head>

<body class="loading cms $BaseCSSClasses">
<body class="loading cms">

<% include CMSLoadingScreen %>

Expand Down

4 comments on commit a1b8698

@wilr
Copy link
Member

@wilr wilr commented on a1b8698 Aug 3, 2011

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

@chillu
Copy link
Member Author

@chillu chillu commented on a1b8698 Aug 5, 2011

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

@wilr
Copy link
Member

@wilr wilr commented on a1b8698 Aug 5, 2011

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@chillu
Copy link
Member Author

@chillu chillu commented on a1b8698 Aug 13, 2011

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.