1 /** 2 * @fileOverview a footer 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.kFooter 14 * @namespace kFooter widget 15 * @example Emits the event kFooterWinGame when the maxScore is reached <br /> 16 * Emits the event kFooterRestart when game restarted <br /> 17 * Start button emits kFooterStart event when clicked <br /> 18 * Restart button emits kFooterRestart event when clicked <br /> 19 * Pause button emits the kFooterPause event when clicked <br /> 20 */ 21 $.ui.kFooter = function(){}; 22 23 $.widget('ui.kFooter', 24 /** @lends $.ui.kFooter.prototype */ 25 { 26 /** Gets the current score 27 * @returns {Number} current score 28 */ 29 getScore : function(){ 30 return this._getData('score'); 31 }, 32 /** Sets the current score 33 * @param {Number} newScore new score 34 */ 35 setScore : function(newScore){ 36 this._setData('score', parseInt(newScore)); 37 this._refresh(); 38 }, 39 /** Gets the current total 40 * @returns {Number} current total 41 */ 42 getTotal : function(){ 43 return this._getData('total'); 44 }, 45 /** Sets the current total 46 * @param {Number} newTotal new total 47 */ 48 setTotal : function(newTotal){ 49 this._setData('total', parseInt(newTotal)); 50 this._refresh(); 51 }, 52 /** 53 * Resets the score and total to initial values and triggers 54 * the "kFooterRestart" event 55 */ 56 restart : function(){ 57 this.element.trigger('kFooterRestart'); 58 this._setData('score', this._getData('initialScore')); 59 this._setData('total', this._getData('initialTotal')); 60 this._refresh(); 61 }, 62 /** Increments the score by 1 or by the supplied numeric argument 63 * @param {Number} [val] increment value 64 */ 65 inc : function(val){ 66 var incVal = parseInt(val) || 1; 67 this._setData('score', this._getData('score') + incVal); 68 this._refresh(); 69 if(this._getData('winScore') === this._getData('score')){ 70 this.element.trigger('kFooterWinGame'); 71 } 72 }, 73 /** Increments the total by 1 or by the supplied numeric argument 74 * @param {Number} [val] increment value 75 */ 76 incTotal : function(val){ 77 var incVal = parseInt(val) || 1; 78 this._setData('total', this._getData('total') + incVal); 79 this._refresh(); 80 }, 81 /** Decrements the score by 1 or by the supplied numeric argument 82 * @param {Number} [val] decrement value 83 */ 84 dec : function(val){ 85 var decVal = parseInt(val) || 1; 86 this._setData('score', this._getData('score') - decVal); 87 this._refresh(); 88 }, 89 /** Decrements the total by 1 or by the supplied numeric argument 90 * @param {Number} [val] decrement value 91 */ 92 decTotal : function(val){ 93 var decVal = parseInt(val) || 1; 94 this._setData('total', this._getData('total') - decVal); 95 this._refresh(); 96 }, 97 /** Start the timer, defaults to 0:00 if no arguments supplied 98 * @param {Number} [minutes] value for minutes, default to 0 99 * @param {Number} [seconds] value for seconds, default to 0 100 */ 101 startTimer : function(minutes, seconds){ 102 var timerRunning = this._getData('timerRunning')|| false; 103 104 if (this._$timer && timerRunning === false){ 105 var mins = minutes || 0; 106 var secs = seconds || 0; 107 var timerId = null; 108 var self = this; 109 110 111 this._setData('mins', mins); 112 this._setData('secs', secs); 113 114 var addLeadingZero = function(num){ 115 if(''.concat(num).length === 1){ 116 return "0".concat(num); 117 } else { 118 return num; 119 } 120 121 }; 122 123 var increaseTimer = function(){ 124 if (self._getData('timerRunning') === false){ 125 return; 126 } 127 128 var s = self._getData('secs') + 1; 129 var m = null; 130 var timerId = null; 131 132 if (s < 60) { 133 self._setData('secs', s); 134 self._$timerSecs.text(self._n(addLeadingZero(s))); 135 } else { 136 s = 0; 137 m = self._getData('mins') + 1; 138 self._$timerSecs.text(self._n(addLeadingZero(s))); 139 self._$timerMins.text(self._n(addLeadingZero(m))); 140 self._setData('secs', s); 141 self._setData('mins', m); 142 } 143 144 timerId = setTimeout(increaseTimer, 1000); 145 self._setData('timerId', timerId); 146 147 }; 148 149 timerId = setTimeout(increaseTimer , 1000); 150 151 this._setData('timerRunning', true); 152 this._setData('timerId', timerId); 153 } 154 }, 155 /** Stop the timer 156 */ 157 stopTimer : function(){ 158 this._setData('timerRunning', false); 159 }, 160 _ : function(val, loc){ 161 return $.i18n.call($.ui.kFooter, val, loc); 162 }, 163 _n : function(val, loc){ 164 return $._n(val, loc); 165 }, 166 _init : function(){ 167 168 var divDisplay = "inline"; 169 var score = this.options.score; 170 var total = this.options.total; 171 var self = this; 172 173 var options = $.extend({}, $.ui.kFooter.defaults, this.options); 174 175 this._setData('initialScore', parseInt(options.score)); 176 this._setData('initialTotal', parseInt(options.total)); 177 this._setData('score', parseInt(options.score)); 178 this._setData('total', parseInt(options.total)); 179 this._setData('winScore', parseInt(options.winningScore)); 180 this._setData('locale', options.locale); 181 182 183 this.element.addClass('ui-widget ui-widget-content ' + 184 ' ui-kFooter'); 185 186 187 var $kFooter = $("<ul></ul>"); 188 189 190 if(options.scoreboard === true){ 191 192 var $scoreboard = $("<li class='left'>" + this._("Score") + 193 "</li>" + "<li class='left'>" + 194 "<span id='kFooterScore' class='ui-corner-all number'>" + 195 this._n(score) + "</span></li>" + 196 "<li class='left'>" + this._("Total") + "</li>" + 197 "<li class='left'><span id='kFooterTotal' " + 198 "class='ui-corner-all number'>" + 199 this._n(total) + "</span></li>") 200 .appendTo($kFooter); 201 202 this._score = $('#kFooterScore', $scoreboard); 203 this._total = $('#kFooterTotal', $scoreboard); 204 205 } 206 207 if(options.timer === true){ 208 this._$timer = $("<li class='left'>" + this._("Timer") + 209 "</li>" + 210 "<li class='left'><span id='kFooterMins'" + 211 "class='ui-corner-all" + 212 " number timer'>" + this._n("00") + 213 "</span></li>" + 214 "<li class='left'><span id='kFooterSecs'" + 215 "class='ui-corner-all " + 216 "number timer'>"+ this._n("00") + 217 "</span></li>") 218 .appendTo($kFooter); 219 220 this._$timerMins = $('#kFooterMins', this._$timer); 221 this._$timerSecs = $('#kFooterSecs', this._$timer); 222 } 223 224 //if options.checkAnswerBtn === true 225 226 if (options.restartButton === true){ 227 var $restartButton = $("<li class='right'><button " + 228 "class='ui-corner-all ui-state-default'>" + 229 "<span class='ui-icon ui-icon-arrowrefresh-1-w'>" + 230 "</span>" + 231 "<span class='text left'>" + this._('Play Again') + 232 "</span></button></li>") 233 .click(function(){ 234 self.startTimer(); 235 self.restart(); 236 }) 237 .appendTo($kFooter); 238 } 239 240 if (options.pauseButton === true){ 241 var $pauseButton = $("<li class='right'><button " + 242 "class='ui-corner-all ui-state-default'>" + 243 "<span class='ui-icon ui-icon-pause'>" + 244 "</span>" + 245 "<span class='text left'>" + this._('Pause') + 246 "</span></button></li>") 247 .click(function(){ 248 self.stopTimer(); 249 self.element.trigger('kFooterPause'); 250 }) 251 .appendTo($kFooter); 252 } 253 254 if (options.startButton === true){ 255 var $startButton = $("<li class='right'><button " + 256 "class='ui-corner-all ui-state-default'>" + 257 "<span class='ui-icon ui-icon-play'>" + 258 "</span>" + 259 "<span class='text left'>" + this._('Start') + 260 "</span></button></li>") 261 .click(function(){ 262 self.startTimer(); 263 self.element.trigger('kFooterStart'); 264 }) 265 .appendTo($kFooter); 266 } 267 268 $('button', $kFooter).hover( 269 function(){ 270 $(this).addClass("ui-state-hover"); 271 }, 272 function(){ 273 $(this).removeClass("ui-state-hover"); 274 }); 275 276 277 // Check if any html w/in this.element, if so wrap it in <li> </li> 278 // and add to $kFooter later 279 var $userHtml = this.element 280 .children() 281 .appendTo($kFooter); 282 283 284 $userHtml.wrap('<li class="left"></li>'); 285 286 //get rid of userHtml 287 this.element.empty(); 288 289 this.element.append($kFooter); 290 291 }, 292 _refresh : function(){ 293 this._score.text(this._n(this._getData('score'))); 294 this._total.text(this._n(this._getData('total'))); 295 }, 296 /** Removes the kFooter widget and all related data from the DOM */ 297 destroy : function(){ 298 this.element.remove(); 299 $.widget.prototype.destroy.apply(this, arguments); 300 } 301 302 303 }); 304 305 $.ui.kFooter.getter = ['getScore', 'getTotal', '_n', '_' ]; 306 307 $.ui.kFooter.i18n = {}; 308 309 310 /** Default settings for the kFooter widget 311 * @namespace Default settings for the kFooter widget 312 * @extends $.ui.kFooter 313 */ 314 $.ui.kFooter.defaults = { 315 /** Initial score 316 * @type Number 317 * @default 0 318 */ 319 score: 0, 320 /** Initial total 321 * @type Number 322 * @default 0 323 */ 324 total: 0, 325 /** The score that will win the game 326 * @type Number 327 * @default 0 328 */ 329 winningScore: 0, 330 /** Default locale, valid options are "en" and "ne" 331 * @type String 332 * @default "en" 333 */ 334 locale: "ne", 335 /** Display the scoreboard 336 * @type boolean 337 * @default true 338 */ 339 scoreboard: true, 340 /** Display the Start Button 341 * @type boolean 342 * @default false 343 */ 344 startButton: false, 345 /** Display the Retart Button 346 * @type boolean 347 * @default true 348 */ 349 restartButton: true, 350 /** Display the Pause Button 351 * @type boolean 352 * @default false 353 */ 354 pauseButton: false, 355 /** Display the timer 356 * @type boolean 357 * @default false 358 */ 359 timer: false 360 }; 361 362 })(jQuery);