src/widgets/pagelist/js/pagelist.js

   1 /*
   2  *
   3  * This software is licensed under the MIT licence (as defined by the OSI at
   4  * http://www.opensource.org/licenses/mit-license.php)
   5  *
   6  * ***************************************************************************
   7  * Copyright (C) 2011 by Intel Corporation Ltd.
   8  *
   9  * Permission is hereby granted, free of charge, to any person obtaining a
  10  * copy of this software and associated documentation files (the "Software"),
  11  * to deal in the Software without restriction, including without limitation
  12  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
  13  * and/or sell copies of the Software, and to permit persons to whom the
  14  * Software is furnished to do so, subject to the following conditions:
  15  *
  16  * The above copyright notice and this permission notice shall be included in
  17  * all copies or substantial portions of the Software.
  18  *
  19  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  20  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  21  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  22  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  23  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  24  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  25  * DEALINGS IN THE SOFTWARE.
  26  * ***************************************************************************
  27  */
  28
  29 // pagelist widget
  30 //
  31 // Given an element, this widget collects all links contained in the descendants of the element and constructs
  32 // a popupwindow widget containing numbered buttons for each encountered link.
  33 //
  34 // You can mark any one element in your document with "data-pagelist='true'" and a pagelist will be created that
  35 // will allow the user to navigate between the pages linked to within the element.
  36 //
  37 // Currently, only one pagelist can exist in a document and, once created, it cannot be modified.
  38
  39 (function($, undefined) {
  40
  41 ensureNS("jQuery.mobile.tizen");
  42
  43 $.widget("tizen.pagelist", $.tizen.widgetex, {
  44     _htmlProto: {
  45         ui: {
  46             pageList: "#pagelist",
  47             button:   "#pagelist-button",
  48             rowBreak: "#pagelist-rowbreak"
  49         }
  50     },
  51     _create: function() {
  52         var self = this,
  53             popPageList = false,
  54             idx = 0;
  55
  56         this._ui.button.remove();
  57         this._ui.rowBreak.remove();
  58         this._ui.pageList
  59             .appendTo($("body"))
  60             .popupwindow()
  61             .bind("vclick", function(e) {
  62                 $(this).popupwindow("close");
  63             });
  64
  65         this.element.find("a[href]").each(function(elemIdx, elem) {
  66             if (idx > 0 && !(idx % 10))
  67                 self._ui.pageList.append(self._ui.rowBreak.clone());
  68
  69             self._ui.button
  70                 .clone()
  71                 .attr("href", $(elem).attr("href"))
  72                 .text(++idx)
  73                 .appendTo(self._ui.pageList)
  74                 .buttonMarkup()
  75                 .bind("vclick", function() { self._ui.pageList.popupwindow("close"); })
  76                 .find(".ui-btn-inner")
  77                 .css({padding: 2});
  78         });
  79
  80         $(document).bind("keydown", function(e) {
  81             popPageList = (e.keyCode === $.mobile.keyCode.CONTROL);
  82         });
  83         $(document).bind("keyup", function(e) {
  84             if (e.keyCode === $.mobile.keyCode.CONTROL && popPageList) {
  85                 var maxDim = {cx: 0, cy: 0};
  86                 self._ui.pageList.popupwindow("open", undefined, 0);
  87                 self._ui.pageList.find("a")
  88                     .each(function() {
  89                         var btn = $(this),
  90                             dim = {
  91                                 cx: btn.outerWidth(true),
  92                                 cy: btn.outerHeight(true)
  93                             };
  94
  95                         // Make sure things will be even later, because padding cannot have decimals - apparently :-S
  96                         if (dim.cx % 2) btn.css("padding-left",   parseInt(btn.css("padding-left"))   + 1);
  97                         if (dim.cy % 2) btn.css("padding-bottom", parseInt(btn.css("padding-bottom")) + 1);
  98
  99                         maxDim.cx = Math.max(maxDim.cx, dim.cx);
 100                         maxDim.cy = Math.max(maxDim.cy, dim.cy);
 101                     })
 102                     .each(function() {
 103                         var padding = {
 104                                 h: Math.max(0, (maxDim.cx - $(this).outerWidth(true))  / 2),
 105                                 v: Math.max(0, (maxDim.cy - $(this).outerHeight(true)) / 2)
 106                             },
 107                             btn = $(this),
 108                             inner = btn.find(".ui-btn-inner");
 109
 110                         inner.css({
 111                             "padding-left"   : parseInt(inner.css("padding-left"))   + padding.h,
 112                             "padding-top"    : parseInt(inner.css("padding-top"))    + padding.v,
 113                             "padding-right"  : parseInt(inner.css("padding-right"))  + padding.h,
 114                             "padding-bottom" : parseInt(inner.css("padding-bottom")) + padding.v
 115                         });
 116                         btn[((btn.attr("href") === "#" + $.mobile.activePage.attr("id")) ? "addClass" : "removeClass")]("ui-btn-active");
 117                     });
 118                 e.stopPropagation();
 119                 e.preventDefault();
 120             }
 121             popPageList = false;
 122         });
 123     }
 124 });
 125
 126 // Look for an element marked as a pagelist and assign $.mobile.tizen.pagelist with a newly created pagelist.
 127 // If $.mobile.tizen.pagelist is already assigned, ignore any new "data-pagelist='true'" designations.
 128 $(document).bind("pagecreate create", function(e) {
 129     $(":jqmData(pagelist='true')", e.target)
 130         .not(":jqmData(role='none'), :jqmData(role='nojs')")
 131         .each(function() {
 132             if ($.mobile.tizen.pagelist === undefined) {
 133                 $.extend($.mobile.tizen, {
 134                     pagelist: $(this).pagelist()
 135                 });
 136             }
 137             return false;
 138         });
 139 });
 140
 141 })(jQuery);