Plugin AP List: Add pagination controls

plugins/ap-list.css

@@ -90,4 +90,59 @@
 
 .ap-list-link-selected {
   font-style:italic;
+}
+
+.ap-list-center-div {
+  width: 50%;
+  margin: 0px auto;
+
+}
+
+.ap-list-page-control {
+  float:left;
+  padding: 0 5px;
+}
+
+.ap-list-page-text {
+  float:left;
+  text-align: center;
+  color: rgb(32, 168, 177);
+}
+
+#ap-list-current-p {
+  width: 20px;
+}
+
+#ap-list-total-p {
+  width: 20px;
+}
+
+.ap-list-triangle {
+  float:left;
+  clear:none;
+  border-style:solid;
+}
+
+.ap-list-triangle-left {
+  border-color: transparent rgb(32, 168, 177) transparent transparent;
+}
+
+.ap-list-triangle-left-half {
+  border-width: 7.5px 7.5px 7.5px 0px;
+}
+
+.ap-list-triangle-left-full {
+  border-width: 7.5px 13px 7.5px 0px;
+}
+
+.ap-list-triangle-right {
+  border-color: transparent transparent transparent rgb(32, 168, 177);
+}
+
+.ap-list-triangle-right-half {
+  border-width: 7.5px 0px 7.5px 7.5px;
+}
+
+.ap-list-triangle-right-full {
+  border-width: 7.5px 0px 7.5px 13px;
 }

plugins/ap-list.user.js

@@ -718,12 +718,37 @@ window.plugin.apList.setupList = function() {
           + 'plugin.apList.hideReloadLabel();return false;">↻ R</a>'
           + '</span>'
           + '<div id="ap-list-table"></div>'
+          + '<div id="ap-list-pagination"></div>'
           + '</div>';
 
   $('#sidebar').append(content);
   $('#ap-list-reload').hide();
 }
 
+window.plugin.apList.setupPagination = function() {
+  var content = '<div class="ap-list-center-div">'
+                + '<div id="ap-list-first-p" class="ap-list-page-control">'
+                  + '<div class="ap-list-triangle ap-list-triangle-left ap-list-triangle-left-half"/>'
+                  + '<div class="ap-list-triangle ap-list-triangle-left ap-list-triangle-left-half"/>'
+                + '</div>'
+                + '<div id="ap-list-next-p" class="ap-list-page-control">'
+                  + '<div class="ap-list-triangle ap-list-triangle-left ap-list-triangle-left-full"/>'
+                + '</div>'
+                + '<div id="ap-list-current-p" class="ap-list-page-text">1</div>'
+                + '<div id="ap-list-page-slash" class="ap-list-page-text">/</div>'
+                + '<div id="ap-list-total-p" class="ap-list-page-text">1</div>'
+                + '<div id="ap-list-prev-p" class="ap-list-page-control">'
+                  + '<div class="ap-list-triangle ap-list-triangle-right ap-list-triangle-right-full"/>'
+                + '</div>'
+                + '<div id="ap-list-last-p" class="ap-list-page-control">'
+                  + '<div class="ap-list-triangle ap-list-triangle-right ap-list-triangle-right-half"/>'
+                  + '<div class="ap-list-triangle ap-list-triangle-right ap-list-triangle-right-half"/>'
+                + '</div>'
+                + '<div class="spacer" style="clear: both;"></div>'// fix collapsion of parent caused by inner div's float:left
+              + '</div>';
+  $('#ap-list-pagination').html(content);
+}
+
 window.plugin.apList.setupMapEvent = function() {
   map.on('zoomstart', function() {
     plugin.apList.setupMapEvent.zoomLevelBefore = map.getZoom();
@@ -758,6 +783,7 @@ var setup = function() {
   window.plugin.apList.setupTableColumns();
   window.plugin.apList.setupCSS();
   window.plugin.apList.setupList();
+  window.plugin.apList.setupPagination();
   window.plugin.apList.setupMapEvent();
   window.addHook('requestFinished', window.plugin.apList.handleUpdate);
 }