1 /** 2 * @fileOverview a Header widget 3 * @author Bryan Berry <bryan@olenepal.org> 4 * uses MIT License 5 */ 6 7 8 9 (function($){ 10 11 // This is a dummy function, just here as placeholder to 12 // to make the jsdoc tool happy 13 /** @name $.ui.kHeader 14 * @namespace kHeader widget 15 * @example 16 */ 17 $.ui.kHeader = function(){}; 18 19 $.widget('ui.kHeader', 20 /** @lends $.ui.kHeader.prototype */ 21 { _ : function(val, loc){ 22 if($.i18n){ 23 return $.i18n.call($.ui.kHeader, val, loc); 24 } 25 return val; 26 }, 27 _n : function(val, loc){ 28 if ($.i18n){ 29 return $._n(val, loc); 30 } 31 return val; 32 }, 33 34 _init : function(){ 35 var options = $.extend({}, $.ui.kHeader.defaults, this.options); 36 37 this.element.addClass('ui-widget ui-widget-content'); 38 39 var $kHeader = $("<ul></ul>"); 40 41 var backLink = "#"; 42 var urlParams = window.location.search.slice(1).split('&'); 43 if (urlParams){ 44 backLink = urlParams[0].split('=')[1]; 45 } 46 47 var $backBtn = $("<li class='left'> <a href='" + backLink + 48 "' class='kHeader-btn kHeader-back'></a></li>") 49 .appendTo($kHeader); 50 51 var $lessonTitle = $("<li class='left kHeader-title'>" + 52 "<span>" + options.title + 53 "</span></li>") 54 .appendTo($kHeader); 55 56 57 58 if (options.lessonPlan || options.teacherNote){ 59 60 var $dropDownArrow = $("<span class='kHeader-kDoc right'>" + 61 "</span>") 62 .appendTo($lessonTitle); 63 64 var $dropDownArea = $("<div class='drop-down'></div>"); 65 66 if (options.lessonPlan){ 67 $("<div>" + 68 "<a href='./kDoc.html?back=index.html&doc=lessonPlan'>" + 69 this._("Lesson Plan") + "</a></div>") 70 .appendTo($dropDownArea); 71 } 72 73 if (options.teachersNote){ 74 $("<div>" + 75 "<a href='./kDoc.html?back=index.html&doc=teachersNote'>" + 76 this._("Teacher's Note") + "</a></div>") 77 .appendTo($dropDownArea); 78 } 79 80 $dropDownArea.appendTo($dropDownArrow); 81 82 $dropDownArrow.hover( 83 function(){ 84 $dropDownArea.show(); 85 }, 86 function(){ 87 $dropDownArea.hide(); 88 } 89 ); 90 91 } 92 93 if(options.zoom === true){ 94 95 var iframeScale = 1.0; 96 var translateY = 0; 97 var getIframeStyle = function(){ 98 return window.frames[0].document.body.style; 99 }; 100 101 var zoomIn = function(){ 102 var iframeStyle = getIframeStyle(); 103 iframeScale = iframeScale + 0.1; 104 translateY = translateY + 50; 105 var scale = 'scale(' + iframeScale + ')'; 106 var translate = "translate(0px, " + translateY + "px)"; 107 108 iframeStyle.MozTransform = scale + ' ' + translate; 109 iframeStyle.WebkitTransform = scale + ' ' + translate; 110 }; 111 112 var zoomOut = function(){ 113 var iframeStyle = getIframeStyle(); 114 iframeScale = iframeScale - 0.1; 115 translateY = translateY - 50; 116 117 var scale = 'scale(' + iframeScale + ')'; 118 var translate = "translate(0px, " + translateY + "px)"; 119 120 121 iframeStyle.MozTransform = scale + ' ' + translate; 122 iframeStyle.WebkitTransform = scale + ' ' + translate; 123 124 }; 125 126 $("<li class='left kHeader-zoomIn kHeader-btn'>" + 127 " </li>") 128 .click(zoomIn) 129 .appendTo($kHeader); 130 131 $("<li class='left kHeader-zoomOut " + 132 "kHeader-btn'> </li>") 133 .click(zoomOut) 134 .appendTo($kHeader); 135 } 136 137 138 139 if($('#' + options.help).length){ 140 if($.ui.dialog){ 141 var $help = $('#'+ options.help) 142 .dialog({ 143 position:[ "right", "top"], 144 modal:'true',autoOpen:false,width:500, 145 height: 400, 146 dialogClass: 'kHeader-help' 147 }); 148 } else { 149 150 if(console){ 151 console.log("You need to add the jQuery UI dialog" + 152 " widget in order to use Help feature."); 153 } 154 } 155 156 } 157 158 $("<li class='right'> <a href='#'" + 159 "' class='kHeader-btn kHeader-help'></a></li>") 160 .click(function(){ 161 if($.ui.dialog && $help){ 162 $help.dialog('open'); 163 } 164 }) 165 .appendTo($kHeader); 166 167 168 $("<li class='right'> <a href='http://olenepal.org'" + 169 "' class='kHeader-btn kHeader-brand'" + 170 "title='साझा शिक्षा ई-पाटी'></a></li>") 171 .appendTo($kHeader); 172 173 this.element.append($kHeader); 174 175 //0-width divs that hold hover imgs for pre-loading 176 var $preloadImgDivs = $("<div class='kHeader-preload-img " + 177 "kHeader-preload-back'></div>" + 178 "<div class='kHeader-preload-img " + 179 "kHeader-preload-zoom-in'></div>" + 180 "<div class='kHeader-preload-img " + 181 "kHeader-preload-zoom-out'></div>" + 182 "<div class='kHeader-preload-img " + 183 "kHeader-preload-ole'></div>" + 184 "<div class='kHeader-preload-img " + 185 "kHeader-preload-help'></div>" 186 ) 187 .appendTo($kHeader); 188 189 }, 190 /** Removes the kHeader widget and all related data from the DOM */ 191 destroy : function(){ 192 this.element.remove(); 193 $.widget.prototype.destroy.apply(this, arguments); 194 } 195 196 197 }); 198 199 $.ui.kHeader.getter = []; 200 201 $.ui.kHeader.i18n = {}; 202 203 /** Default settings for the kHeader widget 204 * @namespace Default settings for the kHeader widget 205 * @extends $.ui.kHeader 206 */ 207 $.ui.kHeader.defaults = { 208 /** title 209 * @type String 210 * @default "" 211 */ 212 title: "", 213 /** Turns on zoom buttons 214 * @type boolean 215 * @default false 216 */ 217 zoom: false, 218 /** Creates drop-down with link to lesson plan 219 * @type boolean or string file path to lesson plan 220 * @default false 221 */ 222 lessonPlan: false, 223 /** Creates drop-down with link to teachersNote 224 * @type boolean or string file path to teachersNote 225 * @default false 226 */ 227 teachersNote: false, 228 /** Id of element containing help text 229 * @type String 230 * @default "kHelp" 231 */ 232 help: "kHelp" 233 }; 234 235 })(jQuery);