dojox/widget/Pager.js

  • Provides:

    • dojox.widget.Pager
  • Requires:

    • dijit._Widget in common in project dijit
    • dijit._Templated in common in project dijit
    • dojo.fx in common in project dojo
  • dojox.widget.Pager

    • type
      Function
    • chains:
      • dijit._Widget: (prototype)
      • dijit._Widget: (call)
      • dijit._Templated: (call)
    • mixins:
      • dijit._Templated.prototype: (prototype)
    • summary
      A Pager, displaying a list of sized nodes
  • dojox.widget.Pager.templateString

    • summary
  • dojox.widget.Pager.iconPrevious

    • type
      String
    • summary
      The url of the previous page icon
  • dojox.widget.Pager.iconNext

    • type
      String
    • summary
      The url of the next page icon
  • dojox.widget.Pager.iconPage

    • summary
  • dojox.widget.Pager.iconPageActive

    • summary
  • dojox.widget.Pager.store

    • type
      Object
    • summary
      A dojo.data Data store
  • dojox.widget.Pager.orientation

    • type
      String
    • summary
      Either "horizontal or "vertical" to define the direction the pages will slide
  • dojox.widget.Pager.statusPos

    • type
      String
    • summary
      A string describing where to put the Pager "current page" indicator. Options are
      "leading" or "trailing". In the case of horiztonal orientation, "leading" indicates
      positioned above the PageItems. In the case of vertical, "leading" indicates "before".
  • dojox.widget.Pager.pagerPos

    • type
      String
    • summary
      TODOC
  • dojox.widget.Pager.duration

    • type
      Integer
    • summary
      Time in milliseconds to transition the pages
  • dojox.widget.Pager.itemSpace

    • type
      Integer
    • summary
      Spacing between items? TODOC
  • dojox.widget.Pager.resizeChildren

    • type
      Boolean
    • summary
      TODOC
  • dojox.widget.Pager.itemClass

    • type
      String
    • summary
      The full dotted named of a Class to use for the internal Pager Items.
  • dojox.widget.Pager.itemsPage

    • type
      Integer
    • summary
      The numbers of items to display in each "Page"
  • dojox.widget.Pager.postMixInProperties

    • type
      Function
    • source: [view]
        var h = (this.orientation == "horizontal");
        dojo.mixin(this,{
         _totalPages:0,
         _currentPage:1,
         dirClass: "pager" + (h ? "Horizontal" : "Vertical"),
         iconNext: dojo.moduleUrl("dojox.widget", "Pager/images/" + (h ? "h" : "v") + "Next.png"),
         iconPrevious: dojo.moduleUrl("dojox.widget", "Pager/images/" + (h ? "h" : "v") + "Previous.png")
        });
    • summary
  • dojox.widget.Pager.postCreate

    • type
      Function
    • source: [view]
        this.inherited(arguments);
        //this.connect(this.domNode,"onkeypress","_handleKey");
        this.store.fetch({
         onComplete: dojo.hitch(this, "_init")
        });
    • summary
  • dojox.widget.Pager._a11yStyle

    • type
      Function
    • parameters:
      • e: (typeof )
    • source: [view]
        dojo[(e.type == "focus" ? "addClass" : "removeClass")](e.target,"pagerFocus");
    • summary
      top level onfocus/onblur listen to set a class "pagerFocus" on some node
      and remove it onblur
  • dojox.widget.Pager._handleKey

    • type
      Function
    • parameters:
      • e: (typeof )
    • source: [view]
        var dk = dojo.keys;
        var key = (e.charCode == dk.SPACE ? dk.SPACE : e.keyCode);
        switch(key){

         
         case dk.UP_ARROW:
         case dk.RIGHT_ARROW:
         case 110:
         case 78: // key "n"
          e.preventDefault();
          this._pagerNext();
          break;


         case dk.DOWN_ARROW:
         case dk.LEFT_ARROW:
         case 112:
         case 80: // key "p"
          e.preventDefault();
          this._pagerPrevious();
          break;

         
         case dk.ENTER:
          switch(e.target){
           case this.pagerNext : this._pagerNext(); break;
           case this.pagerPrevious : this._pagerPrevious(); break;
          }
          break;
        }
    • summary
      Handle keyboard navigation internally
  • dojox.widget.Pager._init

    • type
      Function
    • parameters:
      • items: (typeof )
    • source: [view]
        this.items = items;
        this._renderPages();
        this._renderStatus();
        this._renderPager();
    • summary
  • dojox.widget.Pager._renderPages

    • type
      Function
    • source: [view]
        var pcv = this.pagerContainerView;
        var _h = (this.orientation == "horizontal");
        var style = dojo.style;
        if(_h){


         var pagerH = dojo.marginBox(this.pagerContainerPager).h;
         var statusH = dojo.marginBox(this.pagerContainerStatus).h;
         if (this.pagerPos != 'center'){
          var addonHeight = pagerH+statusH;
         }else{
          var addonHeight = statusH;
          var widthSub = this.pagerIconNext.width;
          var containerWidth = style(pcv, 'width');
          var newWidth = containerWidth-(2*widthSub);
          style(pcv, {
           width: newWidth+'px',
           marginLeft: this.pagerIconNext.width+'px',
           marginRight: this.pagerIconNext.width+'px'
          });
         }
         var totalH = style(this.pagerContainer, 'height') - addonHeight;
         style(this.pagerContainerView, 'height', totalH+'px');

         
         var itemSpace = Math.floor(style(pcv, 'width') / this.itemsPage);
         if(this.statusPos == 'trailing'){
          if(this.pagerPos != 'center'){
           style(pcv, 'marginTop', pagerH+'px');
          }
          style(pcv, 'marginBottom', statusH+'px');
         }else{
          style(pcv, 'marginTop', statusH+'px');
          if (this.pagerPos != 'center'){
           style(pcv, 'marginTop', pagerH+'px');
          }
         }

         
        }else{


         var pagerW = dojo.marginBox(this.pagerContainerPager).w;
         var statusW = dojo.marginBox(this.pagerContainerStatus).w;
         var containerW = style(this.pagerContainer, 'width');
         if(this.pagerPos != 'center'){
          var addonWidth = pagerW + statusW;
         }else{
          var addonWidth = statusW;
          var heightSub = this.pagerIconNext.height;
          var containerHeight = style(pcv, 'height');
          var newHeight = containerHeight - (2 * heightSub);
          style(pcv,{
           height: newHeight+'px',
           marginTop: this.pagerIconNext.height+'px',
           marginBottom: this.pagerIconNext.height+'px'
          });
         }
         var totalW = style(this.pagerContainer, 'width') - addonWidth;
         style(pcv, 'width', totalW+'px');

         
         var itemSpace = Math.floor(style(pcv, 'height') / this.itemsPage);
         if(this.statusPos == 'trailing'){
          if (this.pagerPos != 'center'){
           style(pcv, 'marginLeft', pagerW + 'px');
          }
          style(pcv, 'marginRight', statusW + 'px');
         }else{
          style(pcv, 'marginLeft', statusW + 'px');
          if(this.pagerPos != 'center'){
           style(pcv, 'marginRight', pagerW+'px');
          }
         }
        }

        
        var _PagerItem = dojo.getObject(this.itemClass);
        var paddingLead = "padding" + (_h ? "Left" : "Top");
        var paddingTrail = "padding" + (_h ? "Right" : "Bottom");

         
        dojo.forEach(this.items, function(item, cnt){

         
         var contentContainer = dojo.create('div', {
          innerHTML: item.content
         });


         var pagerItem = new _PagerItem({
          id: this.id + '-item-' + (cnt + 1)
         }, contentContainer);

         
         this.pagerItems.appendChild(pagerItem.domNode);

         
         var containerProps = {};
         containerProps[(_h ? "width" : "height")] = (itemSpace - this.itemSpace) + "px";
         var p = (_h ? "height" : "width");
         containerProps[p] = style(pcv, p) + "px";
         style(pagerItem.containerNode, containerProps);


         if(this.resizeChildren){
          pagerItem.resizeChildren();
         }
         pagerItem.parseChildren();

         
         // only display amount of items as defined in itemsPage
         style(pagerItem.domNode, "position", "absolute");


         if (cnt < this.itemsPage){
          var pos = (cnt) * itemSpace;
          var trailingDir = (_h ? "left" : "top");
          var dir = (_h ? "top" : "left");
          style(pagerItem.domNode, dir, "0px");
          style(pagerItem.domNode, trailingDir, pos+"px");
         }else{
          style(pagerItem.domNode, "top", "-1000px");
          style(pagerItem.domNode, "left", "-1000px");
         }


         style(pagerItem.domNode, paddingTrail, (this.itemSpace/2)+"px");
         style(pagerItem.domNode, paddingLead, (this.itemSpace/2)+"px");

         
        }, this);
    • summary
  • dojox.widget.Pager._renderPager

    • type
      Function
    • source: [view]
        var tcp = this.pagerContainerPager;
        var zero = "0px";
        var _h = (this.orientation == "horizontal");
        if(_h){


         if(this.statusPos == 'center'){

          
         }else if (this.statusPos == 'trailing'){
          dojo.style(tcp, 'top', zero);
         }else{
          dojo.style(tcp, 'bottom', zero);
         }
         dojo.style(this.pagerNext, 'right', zero);
         dojo.style(this.pagerPrevious, 'left', zero);

         
        }else{

         
         if (this.statusPos == 'trailing'){
          dojo.style(tcp, 'left', zero);
         }else{
          dojo.style(tcp, 'right', zero);
         }
         dojo.style(this.pagerNext, 'bottom', zero);
         dojo.style(this.pagerPrevious, 'top', zero);
        }
    • summary
  • dojox.widget.Pager._renderStatus

    • type
      Function
    • source: [view]
        this._totalPages = Math.ceil(this.items.length / this.itemsPage);
        // FIXME!!
        this.iconWidth = 0;
        this.iconHeight = 0;
        this.iconsLoaded = 0;
        this._iconConnects = [];

        
        for (var i = 1; i <= this._totalPages; i++){
         var icon = new Image();

         
         var pointer = i;
         dojo.connect(icon, 'onclick', dojo.hitch(this, function(pointer) {
          this._pagerSkip(pointer);
         }, pointer));

         
         this._iconConnects[pointer] = dojo.connect(icon, 'onload', dojo.hitch(this,function(pointer){
          this.iconWidth += icon.width;
          this.iconHeight += icon.height;
          this.iconsLoaded++;


          if (this._totalPages == this.iconsLoaded){
           if (this.orientation == "horizontal"){
            if (this.statusPos == 'trailing'){
             if (this.pagerPos == 'center'){
              var containerHeight = dojo.style(this.pagerContainer, 'height');
              var statusHeight = dojo.style(this.pagerContainerStatus, 'height');
              dojo.style(this.pagerContainerPager, 'top', ((containerHeight/2)-(statusHeight/2))+'px');
             }
             dojo.style(this.pagerContainerStatus, 'bottom', '0px');
            }else{
             if (this.pagerPos == 'center'){
              var containerHeight = dojo.style(this.pagerContainer, 'height');
              var statusHeight = dojo.style(this.pagerContainerStatus, 'height');
              dojo.style(this.pagerContainerPager, 'bottom', ((containerHeight/2)-(statusHeight/2))+'px');
             }
             dojo.style(this.pagerContainerStatus, 'top', '0px');
            }

           
            var position = (dojo.style(this.pagerContainer, 'width')/2)-(this.iconWidth/2);
            dojo.style(this.pagerContainerStatus, 'paddingLeft', position+'px');
           }else{
            if (this.statusPos == 'trailing'){
             if (this.pagerPos == 'center'){
              var containerWidth = dojo.style(this.pagerContainer, 'width');
              var statusWidth = dojo.style(this.pagerContainerStatus, 'width');
              dojo.style(this.pagerContainerPager, 'left', ((containerWidth/2)-(statusWidth/2))+'px');
             }
             dojo.style(this.pagerContainerStatus, 'right', '0px');
            }else{
             if (this.pagerPos == 'center'){
              var containerWidth = dojo.style(this.pagerContainer, 'width');
              var statusWidth = dojo.style(this.pagerContainerStatus, 'width');
              dojo.style(this.pagerContainerPager, 'right', ((containerWidth/2)-(statusWidth/2))+'px');
             }
             dojo.style(this.pagerContainerStatus, 'left', '0px');
            }
            var position = (dojo.style(this.pagerContainer, 'height')/2)-(this.iconHeight/2);
            dojo.style(this.pagerContainerStatus, 'paddingTop', position+'px');
           }
          }
          dojo.disconnect(this._iconConnects[pointer]);
         }, pointer));

         
         if (i==this._currentPage){
          icon.src=this.iconPageActive;
         }else{
          icon.src=this.iconPage;
         }
         var pointer = i;


         dojo.addClass(icon, this.orientation+'PagerIcon');
         dojo.attr(icon, 'id', this.id+'-status-'+i);
         this.pagerContainerStatus.appendChild(icon);

           
         if (this.orientation == "vertical"){
          dojo.style(icon, 'display', 'block');
         }
        }
    • summary
  • dojox.widget.Pager._pagerSkip

    • type
      Function
    • parameters:
      • page: (typeof )
    • source: [view]
        if (this._currentPage == page){
         return;
        }else{
         // calculate whether to go left or right, take shortest way
         var distanceP; var distanceN;
         if (page < this._currentPage){
          distanceP = this._currentPage - page;
          distanceN = (this._totalPages + page) - this._currentPage;
         }else{
          distanceP = (this._totalPages + this._currentPage) - page;
          distanceN = page - this._currentPage;
         }

         
         var b = (distanceN > distanceP);
         this._toScroll = (b ? distanceP : distanceN);
         var cmd = (b ? "_pagerPrevious" : "_pagerNext");
         var connect = this.connect(this, "onScrollEnd", function(){
          this._toScroll--;
          if(this._toScroll < 1){
           this.disconnect(connect);
          }else{
           this[cmd]();
          }
         });
         this[cmd]();

         
        }
    • summary
  • dojox.widget.Pager._pagerNext

    • type
      Function
    • source: [view]
        if(this._anim) return;


        /**
         * fade slide out current items
         * make sure that next items are ligned up nicely before sliding them in
         */
        var _anims = [];
        for (var i = this._currentPage * this.itemsPage; i > (this._currentPage - 1) * this.itemsPage; i--){
         if (!dojo.byId(this.id+'-item-'+i)) continue;

         
         var currentItem = dojo.byId(this.id+'-item-'+i);
         var marginBox = dojo.marginBox(currentItem);
         if (this.orientation == "horizontal") {
          var move = marginBox.l - (this.itemsPage * marginBox.w);
          _anims.push(dojo.fx.slideTo({node: currentItem, left: move, duration: this.duration}));
         }else{
          var move = marginBox.t - (this.itemsPage * marginBox.h);
          _anims.push(dojo.fx.slideTo({node: currentItem, top: move, duration: this.duration}));
         }


        }
        var previousPage = this._currentPage;
        if (this._currentPage == this._totalPages){
         this._currentPage = 1;
        }else{
         this._currentPage++;
        }

        
        var cnt = this.itemsPage;
        for (var i=this._currentPage*this.itemsPage; i>(this._currentPage-1)*this.itemsPage; i--){
         if (dojo.byId(this.id+'-item-'+i)){
          var currentItem = dojo.byId(this.id+'-item-'+i);
          var marginBox = dojo.marginBox(currentItem);
          if (this.orientation == "horizontal") {
           var newPos = (dojo.style(this.pagerContainerView, 'width')+((cnt-1)*marginBox.w))-1;
           dojo.style(currentItem, 'left', newPos+'px');
           dojo.style(currentItem, 'top', '0px');

           
           var move = newPos-(this.itemsPage*marginBox.w);
           _anims.push(dojo.fx.slideTo({node: currentItem, left: move, duration: this.duration}));
          }else{
           newPos = (dojo.style(this.pagerContainerView, 'height')+((cnt-1)*marginBox.h))-1;
           dojo.style(currentItem, 'top', newPos+'px');
           dojo.style(currentItem, 'left', '0px');

           
           var move = newPos-(this.itemsPage*marginBox.h);
           _anims.push(dojo.fx.slideTo({ node: currentItem, top: move, duration: this.duration}));
          }
         }
         cnt--;
        }

        
        this._anim = dojo.fx.combine(_anims);
        var animConnect = this.connect(this._anim, "onEnd", function(){
         delete this._anim;
         this.onScrollEnd();
         this.disconnect(animConnect);
        });
        this._anim.play();

        
        // set pager icons
        dojo.byId(this.id+'-status-'+previousPage).src = this.iconPage;
        dojo.byId(this.id+'-status-'+this._currentPage).src = this.iconPageActive;
    • summary
  • dojox.widget.Pager._pagerPrevious

    • type
      Function
    • source: [view]
        if(this._anim) return;


        var _anims = [];
        for (var i=this._currentPage*this.itemsPage; i>(this._currentPage-1)*this.itemsPage; i--){
          if (!dojo.byId(this.id+'-item-'+i)) continue;

        
          var currentItem = dojo.byId(this.id+'-item-'+i);
          var marginBox = dojo.marginBox(currentItem);
          if (this.orientation == "horizontal") {
            var move = dojo.style(currentItem, 'left')+(this.itemsPage*marginBox.w);
            _anims.push(dojo.fx.slideTo({node: currentItem, left: move, duration: this.duration}));
          }else{
            var move = dojo.style(currentItem, 'top')+(this.itemsPage*marginBox.h);
            _anims.push(dojo.fx.slideTo({node: currentItem, top: move, duration: this.duration}));
          }
        }


        var previousPage = this._currentPage;
        if (this._currentPage == 1){
          this._currentPage = this._totalPages;
        }else{
          this._currentPage--;
        }


        var cnt = this.itemsPage;
        var j=1;
        for (var i=this._currentPage*this.itemsPage; i>(this._currentPage-1)*this.itemsPage; i--){
         if(dojo.byId(this.id+'-item-'+i)){
          var currentItem = dojo.byId(this.id+'-item-'+i);
          var marginBox = dojo.marginBox(currentItem);


          if (this.orientation == "horizontal") {
           var newPos = -(j * marginBox.w) + 1;
           dojo.style(currentItem, 'left', newPos+'px');
           dojo.style(currentItem, 'top', '0px');

         
           var move = ((cnt - 1) * marginBox.w);
           _anims.push(dojo.fx.slideTo({node: currentItem, left: move, duration: this.duration}));

         
           var move = newPos+(this.itemsPage * marginBox.w);
           _anims.push(dojo.fx.slideTo({node: currentItem, left: move, duration: this.duration}));
          }else{
           newPos = -((j * marginBox.h) + 1);
           dojo.style(currentItem, 'top', newPos+'px');
           dojo.style(currentItem, 'left', '0px');

         
           var move = ((cnt - 1) * marginBox.h);
           _anims.push(dojo.fx.slideTo({node: currentItem, top: move, duration: this.duration}));
          }

        
         }
         cnt--;
         j++;
        }


        this._anim = dojo.fx.combine(_anims);
        var animConnect = dojo.connect(this._anim, "onEnd", dojo.hitch(this, function(){
         delete this._anim;
         this.onScrollEnd();
         dojo.disconnect(animConnect);
        }));
        this._anim.play();


        // set pager icons
        dojo.byId(this.id + '-status-' + previousPage).src = this.iconPage;
        dojo.byId(this.id + '-status-' + this._currentPage).src = this.iconPageActive;
    • summary
  • dojox.widget.Pager.onScrollEnd

    • type
      Function
    • source: [view]
        // summary: Stub Function. Fired after the slide is complete. Override or connect.
    • summary
      Stub Function. Fired after the slide is complete. Override or connect.
  • dojox.widget.Pager.items

    • summary
  • dojox.widget.Pager._totalPages

    • summary
  • dojox.widget.Pager.iconWidth

    • summary
  • dojox.widget.Pager.iconHeight

    • summary
  • dojox.widget.Pager.iconsLoaded

    • summary
  • dojox.widget.Pager._iconConnects

    • summary
  • dojox.widget.Pager._currentPage

    • summary
  • dojox.widget.Pager._toScroll

    • summary
  • dojox.widget.Pager._anim

    • summary
  • dojox.widget._PagerItem

    • type
      Function
    • chains:
      • dijit._Widget: (prototype)
      • dijit._Widget: (call)
      • dijit._Templated: (call)
    • mixins:
      • dijit._Templated.prototype: (prototype)
    • summary
  • dojox.widget._PagerItem.templateString

    • summary
  • dojox.widget._PagerItem.resizeChildren

    • type
      Function
    • source: [view]
        var box = dojo.marginBox(this.containerNode);
        dojo.style(this.containerNode.firstChild, {
         width: box.w +'px',
         height: box.h + 'px'
        });
    • summary
  • dojox.widget._PagerItem.parseChildren

    • type
      Function
    • source: [view]
        dojo.parser.parse(this.containerNode);
    • summary
  • this._totalPages

    • summary
  • this._currentPage

    • summary
  • this.dirClass

    • summary
  • this.iconNext

    • summary
  • this.iconPrevious

    • summary
  • dojox.widget

    • type
      Object
    • summary
  • dojox

    • type
      Object
    • summary