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