Implemented UI element to jump to specified page of the messages list (#148...

Aleksander Machniak

2015-04-29 9a5d9a83ab10b89437f05c8d0b6a83e429792451

Implemented UI element to jump to specified page of the messages list (#1485235)

 CHANGELOG

@@ -7,6 +7,7 @@
- Plugin API: Added message_part_body hook
- Plugin API: Added message_ready hook
- Plugin API: Add special onload() method to execute plugin actions before startup (session and GUI initialization)
- Implemented UI element to jump to specified page of the messages list (#1485235)
- Add option to place signature at bottom of the quoted text even in top-posting mode [sig_below]
- Fix handling of %-encoded entities in mailto: URLs (#1490346)
- Fix zipped messages downloads after selecting all messages in a folder (#1490339)

 program/js/app.js

@@ -3255,6 +3255,91 @@
    this.set_alttext('delete', label);
  };

  // Initialize input element for list page jump
  this.init_pagejumper = function(element)
  {
    $(element).addClass('rcpagejumper')
      .on('focus', function(e) {
        // create and display popup with page selection
        var i, html = '';

        for (i = 1; i <= ref.env.pagecount; i++)
          html += '<li>' + i + '</li>';

        html = '<ul class="toolbarmenu">' + html + '</ul>';

        if (!ref.pagejump) {
          ref.pagejump = $('<div id="pagejump-selector" class="popupmenu"></div>')
            .appendTo(document.body)
            .on('click', 'li', function() {
              if (!ref.busy)
                $(element).val($(this).text()).change();
            });
        }

        if (ref.pagejump.data('count') != i)
          ref.pagejump.html(html);

        ref.pagejump.attr('rel', '#' + this.id).data('count', i);

        // display page selector
        ref.show_menu('pagejump-selector', true, e);
        $(this).keydown();
      })
      // keyboard navigation
      .on('keydown keyup', function(e) {
        var current, selector = $('#pagejump-selector'),
          ul = $('ul', selector),
          list = $('li', ul),
          height = ul.height(),
          p = parseInt(this.value);

        if (e.type == 'keydown') {
          // arrow-down
          if (e.which == 40) {
            if (!selector.is(':visible'))
              return ref.show_menu('pagejump-selector', true, e);

            if (list.length > p)
              this.value = (p += 1);
          }
          // arrow-up
          else if (e.which == 38) {
            if (!selector.is(':visible'))
              return ref.show_menu('pagejump-selector', true, e);

            if (p > 1 && list.length > p - 1)
              this.value = (p -= 1);
          }
          // enter
          else if (e.which == 13) {
            return $(this).change();
          }
        }

        $('li.selected', ul).removeClass('selected');

        if ((current = $(list[p - 1])).length) {
          current.addClass('selected');
          $('#pagejump-selector').scrollTop(((ul.height() / list.length) * (p - 1)) - selector.height() / 2);
        }
      })
      .on('change', function(e) {
        // go to specified page
        var p = parseInt(this.value);
        if (p && p != ref.env.current_page && !ref.busy) {
          ref.hide_menu('pagejump-selector');
          ref.list_page(p);
        }
      });
  };

  // Update page-jumper state on list updates
  this.update_pagejumper = function()
  {
    $('input.rcpagejumper').val(this.env.current_page).prop('disabled', this.env.pagecount < 2);
  };

  /*********************************************************/
  /*********       mailbox folders methods         *********/
  /*********************************************************/
@@ -6673,6 +6758,8 @@
  {
    this.enable_command('nextpage', 'lastpage', this.env.pagecount > this.env.current_page);
    this.enable_command('previouspage', 'firstpage', this.env.current_page > 1);

    this.update_pagejumper();
  };

  // mark a mailbox as selected and set environment variable

 skins/classic/common.css

@@ -481,6 +481,22 @@
  background-position: -33px -11px;
}

#rcmcountdisplay
{
  float: left;
  margin-right: 10px;
}

#countcontrols #pagejumper
{
  margin: 0 5px;
  float: right;
  text-align: center;
  padding: 0;
  cursor: default;
  font-size: 10px;
}

.splitter
{
  user-select: none;
@@ -1120,7 +1136,8 @@
  cursor: pointer;
}

#rcmKSearchpane ul li.selected
#rcmKSearchpane ul li.selected,
#pagejump-selector ul li.selected
{
  color: #ffffff;
  background-color: #CC3333;
@@ -1279,6 +1296,19 @@
  color: #999;
}

#pagejump-selector
{
  max-height: 250px;
  overflow-x: hidden;
}

#pagejump-selector ul li
{
  min-width: 45px;
  padding: 2px 5px;
  cursor: default;
}


/*** folder selector ***/


 skins/classic/functions.js

@@ -1027,6 +1027,8 @@
          .addEventListener('afterimport-messages', function(){ rcmail_ui.show_popup('uploadform', false); });
      }

      rcmail.init_pagejumper('#pagejumper');

      // fix message list header on window resize (#1490213)
      if (bw.ie && rcmail.message_list)
        $(window).resize(function() {

 skins/classic/templates/mail.html

@@ -79,9 +79,10 @@
    <roundcube:endif />
    </div>
    <div id="countcontrols" class="pagenav">
        <roundcube:object name="messageCountDisplay" />
        <roundcube:button command="lastpage" type="link" class="buttonPas lastpage" classAct="button lastpage" classSel="button lastpageSel" title="lastpage" content=" " />
        <roundcube:button command="nextpage" type="link" class="buttonPas nextpage" classAct="button nextpage" classSel="button nextpageSel" title="nextpage" content=" " />
        <roundcube:object name="messageCountDisplay" style="padding:0 .5em; float:right" />
        <input id="pagejumper" class="pagejumper" type="text" size="3" disabled="disabled" title="<roundcube:label name="currpage" />" />
        <roundcube:button command="previouspage" type="link" class="buttonPas prevpage" classAct="button prevpage" classSel="button prevpageSel" title="previouspage" content=" " />
        <roundcube:button command="firstpage" type="link" class="buttonPas firstpage" classAct="button firstpage" classSel="button firstpageSel" title="firstpage" content=" " />
    </div>

 skins/larry/styles.css

@@ -430,6 +430,14 @@
    top: -2px;
}

.pagenav .pagejumper {
    text-align: center;
    background: #f8f8f8;
    padding: 3px 0;
    background: linear-gradient(to bottom, #dddddd 0%, #f8f8f8 100%);
    cursor: default;
}

a.iconbutton {
    display: inline-block;
    width: 20px;
@@ -2340,6 +2348,7 @@
ul.toolbarmenu li a.active:hover,
ul.toolbarmenu li a.active:focus,
#rcmKSearchpane ul li.selected,
#pagejump-selector ul li.selected,
select.decorated option:hover,
select.decorated option[selected='selected'] {
    background-color: #00aad6;
@@ -2457,6 +2466,17 @@
    background-position: 0 -2150px;
}

#pagejump-selector {
    max-height: 250px;
    overflow-x: hidden;
}

#pagejump-selector ul li {
    min-width: 45px;
    padding: 2px 5px;
    cursor: default;
}

#snippetslist {
    max-width: 200px;
}

 skins/larry/templates/mail.html

@@ -128,6 +128,7 @@
        <span class="pagenavbuttons">
        <roundcube:button command="firstpage" type="link" class="button firstpage disabled" classAct="button firstpage" classSel="button firstpage pressed" innerClass="inner" title="firstpage" label="first" />
        <roundcube:button command="previouspage" type="link" class="button prevpage disabled" classAct="button prevpage" classSel="button prevpage pressed" innerClass="inner" title="previouspage" label="previous" />
        <input id="pagejumper" class="pagejumper" type="text" size="3" disabled="disabled" title="<roundcube:label name="currpage" />" />
        <roundcube:button command="nextpage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextpage" label="next" />
        <roundcube:button command="lastpage" type="link" class="button lastpage disabled" classAct="button lastpage" classSel="button lastpage pressed" innerClass="inner" title="lastpage" label="last" />
        </span>

 skins/larry/ui.js

@@ -231,6 +231,8 @@
        if (previewframe)
          mailviewsplit.init();

        rcmail.init_pagejumper('#pagejumper');

        rcmail.addEventListener('setquota', update_quota)
          .addEventListener('enable-command', enable_command)
          .addEventListener('afterimport-messages', show_uploadform);