1 /**
  2  * Wordpress CMS mobilization using mobilization.js.
  3  *
  4  * This functionality is retrofitted to core <i>mobilize</i> class.
  5  * 
  6  *
  7  * @namespace Wordpress mobilization
  8  * 
  9  * @extends mobilize
 10  */
 11 var mobilizeWordpress = {
 12 	
 13 	getExtendedOptions : function() {			   
 14 	   return {};
 15 	},
 16 	
 17 	constructBody : function() {
 18 		
 19 		mobilize.log("Wordpress constructBody()");
 20 				
 21 		if($("body").hasClass("single-post")) {
 22 			this.constructPostPage();
 23 		}
 24 		else {
 25 			this.constructFrontPage();
 26 		}
 27 		this.constructHeader();
 28 		this.constructFooter();
 29 		
 30 	},
 31 	
 32 	constructHeader : function() {
 33         // Set page heading from <title> tag
 34 		
 35 		var header;
 36         header = $("#mobile-body div[data-role=header]");
 37 		
 38         var title = $("head title").text();
 39         header.append("<h1>" + title + "</h1>");	
 40 		
 41 		mobilize.constructBackButton(header);
 42 	},
 43 	
 44 	constructFooter : function() {
 45 	    //$("#mobile-body div[data-role=footer]").append($("#site-info"));     	
 46 		
 47 		// Put site slogan to footer 
 48 		$("#mobile-body div[data-role=footer]").append($("#site-description"));         
 49 	},
 50 
 51     /**
 52      * Create back button
 53      * 
 54      * Point to Home if not already there
 55      */	
 56 	constructBackButton : function(header) {
 57 		
 58 		if (!$("body").hasClass("home")) {
 59 			header.prepend("<a data-icon=home href='/'>Home</a>");
 60 		}
 61 	},
 62 	
 63 	constructPostPage : function(){
 64 		
 65 		// Add back button to header
 66 		// The header is defined in to template.html(core.html)
 67 		var header;
 68 		header = $("#mobile-body div[data-role=header]");
 69 								
 70 		var content = $("#mobile-body div[data-role=content]");
 71 		var entry_content = $(".entry-content");
 72 		content.append(entry_content);
 73 		
 74 		// Add comment area which can be hidden.
 75 		
 76 		// jQuery element which controls the collapsiple section
 77 		var collapsible = $('<div id="comment-collapsible" data-role="collapsible" data-collapsed="true">');
 78 		collapsible.appendTo(content);
 79 				
 80 		var header = $('<h3>');
 81 		// TODO: Get from page for localization
 82 		header.text("Comments");
 83 		header.appendTo(collapsible);
 84 		
 85 		var comments = $("<p>");
 86 		comments.append($("#comments"));
 87 		comments.appendTo(collapsible);
 88 		
 89 	},
 90 	
 91 	/**
 92 	 * This is a nasty one
 93 	 */
 94 	constructFrontPage : function() {
 95 	
 96 		var baseurl = mobilize.baseurl(window.location.href);
 97 	    
 98 		// Move box on the left hand to body first
 99 		var content = $("#mobile-body div[data-role=content]");
100 		if(content.size() == 0) {
101 			throw "No template content section to fill in";
102 		}
103 		
104 		content.append($("#current"));
105 		
106 		var entries = $(".post");
107 		function outputter(list, input, a) {
108 			
109 			var output = $("<li role='option'>");
110 			var title = input.find(".entry-title");
111 			
112 			// Add mobilize=true to get the new page show mobile version
113 			// This is mainly for testing on pc
114 			var href = title.find("a").attr("href");
115 			if(href) {
116 				if(href.indexOf("http://") != 0) {
117 					title.find("a").attr("href", href + "?mobilize=true");
118 				}
119 			}
120 			
121 			var text = title.text();
122 			title = $("<div class='ui-btn-text'>")
123 			var tmp = $("<h3 class='ui-li-heading'>")
124 			tmp.text(text);
125 			
126 			var date = input.find(".entry-date").text();
127 			var info = $('<p class="ui-li-aside">');
128 			info.text(date);
129 			tmp.append(info);
130 			
131 			title.append(tmp);
132 			output.append(title);
133 			
134 			var entry_content = input.find(".entry-content");
135 			output.append(entry_content);
136 			
137 			output.appendTo(list);
138 		}
139 		
140 		var mainNavigation = mobilize.createNavigationBox(entries, "Recent headlines", outputter);
141 		content.append(mainNavigation);		
142 	},
143 	
144 	/**
145 	 * This is called when jQuery Mobile internal transform is done.
146 	 * 
147 	 * We can start binding jQuery Mobile UI elements
148 	 * @param {Object} event
149 	 * @param {Object} data
150 	 */
151 	 bindEventHandlers : function(event, data) {
152 	 	
153 		// XXX: Something is wrong with $ shortcut in this point
154 		// jQuery() event bindings work, but not when using $
155 		
156 		mobilize.log("Installing Wordpress event handlers");
157 	    var collapsible = jQuery("#comment-collapsible");
158 
159 		mobilize.log("Found collapsible:" + collapsible.size());
160 		collapsible.bind("expand", mobilize.onCommentsOpen);	    
161      },
162 	
163 	/**
164 	 * Special handler which will move focus to comments when comment button is pressed
165 	 */
166 	onCommentsOpen : function(event, data) {
167 
168 	   	mobilize.log("comments open");
169         
170 		var x = 0;
171 		var y = event.target.offsetTop;
172 		window.scrollTo(x, y);
173         console.log(event);
174 	}
175 };
176 
177 mobilize.extend(mobilize, mobilizeWordpress);
178 
179