Permalink
Browse files

navigation refactor, almost there

  • Loading branch information...
Thiago de Mello Bueno
Thiago de Mello Bueno committed May 4, 2011
1 parent d1d1e26 commit 2d1f3fd035fa5cf9db132c226f17b939f48d3693
View
@@ -117,6 +117,7 @@ mop.util.loadStyleSheet = function( cssURL, mediaString, opts ){
jsURL - {String} path to the script element to be attached
*/
mop.util.loadJS = function( jsURL, options ){
+ console.log( "loadJS", jsURL)
return new Asset.javascript( jsURL, options );
}
View
@@ -1,4 +1,3 @@
-127
/*
Section: mop.module
mop Modules
@@ -49,6 +48,7 @@ mop.modules.Module = new Class({
Function build: Instantiates mop.ui elements by calling initUI, can be extended for other purposes...
*/
build: function(){
+ console.log("mop.modules.Module.build!")
this.UIElements = this.initUI();
this.initModules();
},
@@ -74,20 +74,15 @@ mop.modules.Module = new Class({
Loops through elements with the class "module" and initializes each as a module
// there is likely a better ( faster ) way to solve this
*/
- initModules: function( whereToLook ){
-
- var descendantModules = ( whereToLook )? $( whereToLook ).getElements(".module") : this.element.getElements(".module");
+ initModules: function( anElement ){
+ var descendantModules = ( anElement )? anElement.getElements(".module") : this.element.getElements(".module");
var filteredOutModules = [];
-
-// console.log( "initModules", this.toString(), this.childModules, descendantModules );
-
+ console.log( "\tinitModules", this.toString(), anElement );
descendantModules.each( function( aDescendant ){
descendantModules.each( function( anotherDescendant ){
-// console.log( "initModule, looping through descendant of", this.toString(), "\n\t", aDescendant,"\n\t", anotherDescendant );
if( aDescendant.hasChild( anotherDescendant ) ) filteredOutModules.push( anotherDescendant );
}, this );
}, this );
-
// console.log( this.toString(), "\t\tfilteredOutModules", filteredOutModules );
descendantModules.each( function( aDescendant ){
if( !filteredOutModules.contains( aDescendant ) ){
@@ -97,12 +92,9 @@ mop.modules.Module = new Class({
this.childModules.set( instanceName, module );
}
}, this );
-
-// console.log( "childModules", this.toString(), this.childModules );
-
+// console.log( "childModules", this.toString(), this.childModules );
delete filteredOutModules, descendantModules;
filteredOutModules = descendantModules = null;
-
},
getObjectId: function(){
@@ -114,12 +106,12 @@ mop.modules.Module = new Class({
Initializes a specific module
*/
initModule: function( element ){
- console.log( "initModule", this.toString(), element, element.get( "class" ) );
var classPath = mop.util.getValueFromClassName( "classPath", element.get( "class" ) ).split( "_" );
+ console.log( "\t\tinitModule", this.toString(), element.get( "class" ), classPath );
ref = null;
classPath.each( function( node ){
ref = ( !ref )? this[node] : ref[node];
- console.log( ref, node );
+// console.log( ref, node );
});
var newModule = new ref( element, this );
return newModule;
@@ -132,14 +124,14 @@ mop.modules.Module = new Class({
var elements = [];
anElement.getChildren().each( function( aChild, anIndex ){
if( aChild.get( "class" ).indexOf( "ui-" ) > -1 ){
- console.log( "\t\tgetModuleUIElements ", aChild );
+// console.log( "\t\tgetModuleUIElements ", aChild );
elements.combine( [ aChild ] );
} else if( !aChild.hasClass( "modal" ) && !aChild.hasClass( "module" ) && !aChild.hasClass( "listItem" ) ){
- console.log( "\t\tgetModuleUIElements ", aChild );
+// console.log( "\t\tgetModuleUIElements ", aChild );
elements.combine( this.getModuleUIElements( aChild ) );
}
}, this );
- console.log( "getModuleUIElements", this.toString(), anElement, elements );
+// console.log( "getModuleUIElements", this.toString(), anElement, elements );
return elements;
},
/*
@@ -187,7 +179,7 @@ mop.modules.Module = new Class({
},
destroyUIElements: function(){
- console.log( "destroyUIElements", this, this.instanceName, this.UIElements );
+// console.log( "destroyUIElements", this, this.instanceName, this.UIElements );
if( !this.UIElements || !this.UIElements.length || this.UIElements.length == 0 ) return;
this.UIElements.each( function( aUIElement ){
var key = aUIElement.fieldName;
@@ -228,7 +220,7 @@ mop.modules.Cluster = new Class({
Extends: mop.modules.Module,
initialize: function( anElementOrId, aMarshal, options ){
this.parent( anElementOrId, aMarshal, options );
- console.log( "Cluster objectId", this.getObjectId() );
+// console.log( "Cluster objectId", this.getObjectId() );
},
getSubmissionController: function(){
return this.marshal.getSubmissionController();
@@ -18,11 +18,23 @@ mop.modules.CMS = new Class({
initialize: function( anElement, options ){
// console.log( "CMS INIT", this.childModules );
- this.parent( anElement, null, options );
+ console.log(":::::::", this.toString(), "initialize");
+
+ this.parent( anElement, null, options );
+ this.instanceName = this.element.get("id");
this.objectId = this.getValueFromClassName( "objectId" );
+ var scripttags = $$( "script" ).each( function( aScriptTag ){
+ console.log( "building loaded js array", aScriptTag );
+ this.loadedJS.push( aScriptTag );
+ }, this );
+ var scripttags = $$( "link[rel=stylesheet]" ).each( function( aStyleSheetTag ){
+ this.loadedCSS.push( aStyleSheetTag );
+ }, this );
+ console.log( this.loadedJS );
},
build: function(){
+ console.log( "::", this.toString(), "build" );
this.pageContent = $("nodeContent");
this.initModules( this.element );
},
@@ -43,8 +55,7 @@ mop.modules.CMS = new Class({
this.clearPage();
this.pageContent.spin();
var url = mop.util.getAppURL() + "ajax/html/cms/getPage/" + nodeId;
- mop.util.JSONSend( url, null, { onSuccess: this.onPageLoaded.bind( this ) } );
- console.log( "loadPage", url );
+ mop.util.JSONSend( url, null, { onSuccess: this.onNodeLoaded.bind( this ) } );
mop.util.setObjectId( nodeId );
},
@@ -56,74 +67,60 @@ mop.modules.CMS = new Class({
},
/*
- Function: onPageLoaded
+ Function: onNodeLoaded
Callback to getPage, loops through supplied JSON object and attached css, html, js, in that order then looks through #pageContent and initialize modules therein....
Arguments:
pageJSON - Object : { css: [ "pathToCSSFile", "pathToCSSFile", ... ], js: [ "pathToJSFile", "pathToJSFile", "pathToJSFile", ... ], html: "String" }
*/
- onPageLoaded: function( response ){
- console.log( ">>> ", response );
- var pageData = response.response;
- pageData.css.each( function( styleSheetURL, index ){
+ onNodeLoaded: function( json ){
+ console.log( "ONNODELOADED!", json.response.js, this.loadedJS );
+ json.response.css.each( function( styleSheetURL, index ){
if( !this.loadedCSS.contains( styleSheetURL ) ) mop.util.loadStyleSheet( styleSheetURL );
this.loadedCSS.push( styleSheetURL );
}, this );
$("nodeContent").unspin();
- var scripts = pageData.js;
this.scriptsLoaded = 0;
- this.scriptsTotal = scripts.length;
this.currentPageLoadIndex = this.pageLoadCount++;
- console.log( "onPageLoaded", pageData.js );
- if( this.scriptsTotal && this.scriptsTotal > 0 ){
- scripts.each( function( urlString ){
- console.log( this.toString(), "loadJS loading ", urlString );
- if( !this.loadedJS.contains( urlString ) ) mop.util.loadJS( urlString, { type: "text/javascript", onload: this.onJSLoaded.bind( this, [ pageData.html, this.currentPageLoadIndex ] ) } );
- this.loadedJS.push( urlString );
- }, this);
+// console.log( "……… onNodeLoaded", pageData.js, this.loadedJS );
+ if( json.response.js.length ){
+ json.response.js.each( function( urlString ){
+ var isScriptLoaded = ( this.loadedJS.some( function( item ){ item.src == urlString } ) )? true : false;
+ console.log(":::::::", urlString, "isScriptLoaded", isScriptLoaded );
+ if( isScriptLoaded ){
+ this.loadedJS.push( mop.util.loadJS( urlString, { type: "text/javascript", onload: this.onJSLoaded.bind( this, [ json.response.html, this.currentPageLoadIndex ] ) } ));
+ }
+ }, this );
}
- this.populate( pageData.html );
+ console.log(":::::::", this.loadedJS );
},
- onJSLoaded: function( pageHTML, pageLoadCount ){
+ onJSLoaded: function( html, pageLoadCount ){
+ console.log( this.toString(), "onJSLoaded", html );
// keeps any callbacks from previous pageloads from registering
if( pageLoadCount != this.currentPageLoadIndex ) return;
-
this.scriptsLoaded++;
-
- if( this.scriptsLoaded == this.scriptsTotal ){
-
+ if( this.scriptsLoaded == this.scriptsTotal ){
this.scriptsTotal = null;
- this.populate( pageHTML );
-
+ this.populate( html );
}
},
populate: function( html ){
-
this.pageContent.set( 'html', html );
-
+ console.log("CMS.populate", html)
this.uiElements = this.initUI( this.pageContent );
this.initModules( this.pageContent );
-
this.titleElement = this.element.getElement( ".pageTitle" );
-
-
if( this.titleElement ){
-
this.titleText = this.titleElement.getElement( "h2" ).get( "text" );
this.deletePageLink = this.titleElement.getElement( "a.deleteLink" );
-
this.editSlugLink = this.titleElement.getElement( ".field-slug label" );
- if( this.editSlugLink ){
- this.editSlugLink.addEvent( "click", this.toggleSlugEditField.bindWithEvent( this ) );
- // this.editSlugLink.retrieve( "Class" ).registerOnLeaveEditModeCallback( this.onSlugEdited.bind( this ) );
- }
+ if( this.editSlugLink ) this.editSlugLink.addEvent( "click", this.toggleSlugEditField.bindWithEvent( this ) );
var titleIPE = this.titleElement.getElement( ".field-title" ).retrieve("Class");
if( titleIPE ) titleIPE.registerOnCompleteCallBack( this.renameNode.bind( this ) );
if( titleIPE ) titleIPE.registerOnCompleteCallBack( this.onTitleEdited.bind( this ) );
if( this.deletePageLink ) this.deletePageLink.addEvent( "click", this.onDeleteNodeReleased.bindWithEvent( this ) );
-
}
},
@@ -156,7 +153,6 @@ mop.modules.CMS = new Class({
this.childModules.get( "navigation" ).renameNode( response.value );
},
-
addObject: function( objectName, templateId, parentId, whichTier, placeHolder ){
console.log( "addObject", this.toString(), $A( arguments ) );
// crappy hack to add... fuckit lets do this right.
@@ -185,10 +181,7 @@ mop.modules.CMS = new Class({
Callback: onTogglePublish
*/
togglePublishedStatus: function( nodeId ){
- new Request.JSON({
- url: mop.util.getAppURL() + "ajax/data/cms/togglePublish/"+ nodeId
-// onComplete: this.onPublishedStatusToggled
- }).send();
+ new Request.JSON({ url: mop.util.getAppURL() + "ajax/data/cms/togglePublish/"+ nodeId }).send();
},
/*
@@ -198,7 +191,6 @@ mop.modules.CMS = new Class({
*/
onDeleteNodeReleased: function( e ){
mop.util.stopEvent( e );
-// console.log( "onDeleteNodeReleased", mop.objectId );
this.deleteNode( mop.objectId, this.titleText );
this.childModules.get( "navigation" ).removeNode( mop.objectId, true );
},
@@ -562,6 +554,7 @@ mop.modules.ListItem = new Class({
window.addEvent( "domready", function(){
+console.log( "DOMREADY!!!!");
mop.HistoryManager = new mop.util.HistoryManager().instance();
mop.HistoryManager.init( "pageId", "onPageIdChanged" );
mop.ModalManager = new mop.ui.ModalManager();
@@ -49,6 +49,8 @@ mop.modules.navigation.Navigation = new Class({
displayNode: function( nodeId ){
// marshal instead of dataSource here??? Even though at the moment they are the same?
this.marshal.displayNode( nodeId );
+ this.currentParentId = nodeId;
+ this.requestTier( nodeId );
},
removeObject: function( nodeId ){
@@ -83,7 +85,7 @@ mop.modules.navigation.Tier = new Class({
render: function( data, html ){
// focus/blur events are good for keyboard activation/indication
- console.log( this.toString(), "render", this.element, data, html );
+// console.log( this.toString(), "render", this.element, data );
this.element.set( 'html', html );
this.nodes = this.element.getElements(".node");
this.nodes.each( function( aNodeElement, index ){
@@ -122,7 +124,7 @@ mop.modules.navigation.Tier = new Class({
onNodeClicked: function( e, nodeElement ){
mop.util.stopEvent( e );
console.log( "onNodeClicked" );
- if( this.activeNode ) this.deindicateNode( this.activeNode );
+ if( this.activeNode )this.deindicateNode( this.activeNode );
this.activeNode = nodeElement;
this.indicateNode( nodeElement );
this.displayNode( this.getNodeIdFromElement( nodeElement ) );
@@ -187,3 +189,4 @@ mop.modules.navigation.Tier = new Class({
});
+
@@ -5,3 +5,5 @@
<a class="icon removeNode" title="delete">delete</a>
</div>
</li>
+
+

0 comments on commit 2d1f3fd

Please sign in to comment.