active_list 6.0.0

data/app/assets/javascripts/active_list.jquery.js

@@ -0,0 +1,136 @@
+/* -*- Mode: Javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2; coding: utf-8 -*- */
+/*jslint browser: true */
+/* List Javascript Inobtrusive Support for jQuery */
+
+(function ($) {
+    "use strict";
+
+    $.ActiveList = {};
+
+    // Main function which reload table with specified data parameters
+    $.ActiveList.refresh = function (element, new_parameters) {
+        var source, parameters, url;
+        // element = $(element);
+        source = element.closest('div[data-list-source]');
+        parameters = {
+            sort: source.data("list-sort-by"),
+            dir: source.data("list-sort-dir"),
+            page: source.data("list-current-page"),
+            per_page: source.data("list-page-size")
+        };
+        $.extend(parameters, new_parameters);
+        url = source.data('list-source');
+        $.ajax(url, {
+            data: parameters,
+            dataType: "html",
+            success: function (data, status, request) {
+                source.replaceWith(data);
+                return true;
+            }
+        });
+        return false;
+    };
+
+
+    $.ActiveList.moveToPage = function (element, page) {
+        var page_attr;
+        // element = $(element);
+        if (page === undefined || page === null || page === '') {
+            page = element.data('list-move-to-page');
+        }
+        if (page === undefined || page === null || page === '') {
+            alert("Cannot define which page to load: "+page);
+        }
+        if (isNaN(page)) {
+            page_attr = page;
+            page = element.attr(page_attr);
+            if (isNaN(page)) {
+                alert("Cannot define which page to load with attribute " + page_attr + ": "+page);
+            }
+        }
+        $.ActiveList.refresh(element, {page: page});
+        return false;
+    };
+
+
+    // Sort by one column
+    $(document).on('click', 'div[data-list-source] th[data-list-column][data-list-column-sort]', function(event) {
+        var element = $(this);
+        $.ActiveList.refresh(element, {
+            sort: element.data('list-column'),
+            dir: element.data('list-column-sort')
+        });
+        return false;
+    });
+
+
+    // Change number of item per page
+    $(document).on('click', 'div[data-list-source] li[data-list-change-page-size]', function(event) {
+        var element = $(this), per_page=element.data('list-change-page-size');
+        if (isNaN(per_page)) {
+            alert("@list-change-page-size attribute is not a number: "+per_page);
+        } else {
+            $.ActiveList.refresh(element, {per_page: per_page});
+        }
+        return false;
+    });
+
+
+    // Toggle visibility of a column
+    $(document).on('click', 'div[data-list-source] li[data-list-toggle-column]', function(event) {
+        var element = $(this), columnId, column, className, search, visibility = '', url, source;
+        columnId = element.data('list-toggle-column');
+        source = element.closest('div[data-list-source]');
+        column = source.find('th[data-list-column="'+columnId+'"]');
+        //$('#'+columnId);
+        className = column.data("list-column-cells");
+        if (className === null) {
+            className = columnId;
+        }
+        search = '.'+className;
+        if (column.hasClass("hidden")) {
+            $(search).removeClass("hidden");
+            column.removeClass("hidden");
+            element.removeClass("unchecked");
+            element.addClass("checked");
+            visibility = 'shown';
+        } else {
+            $(search).addClass("hidden");
+            column.addClass("hidden");
+            element.removeClass("checked");
+            element.addClass("unchecked");
+            visibility = 'hidden';
+        }
+        url = source.data('list-source');
+        $.ajax(url, {
+            dataType: "html",
+            data: {
+                visibility: visibility,
+                column: columnId
+            }
+        });
+        return false;
+    });
+
+    // Change page of table on link clicks
+    $(document).on('click', 'div[data-list-source] a[data-list-move-to-page]', function(event) {
+        $.ActiveList.moveToPage($(this));
+        return false;
+    });
+
+    // Change page of table on input changes
+    $(document).on('change', 'div[data-list-source] input[data-list-move-to-page]', function(event) {
+        $.ActiveList.moveToPage($(this));
+        return false;
+    });
+
+
+    // Adds title attribute based on link name
+    $(document).on('hover', 'div[data-list-source] tbody tr td.act a', function (event) {
+	      var element = $(this), title = element.attr('title');
+	      if (title === null || title === undefined) {
+	          element.attr('title', element.html());
+	      }
+    });
+
+})(jQuery);

data/app/assets/stylesheets/active_list.css.scss

@@ -0,0 +1,7 @@
+@import "active_list/minimal";
+@import "active_list/background";
+@import "active_list/theme";
+
+.active-list[data-list-source], .active-list { 
+  @include active-list-theme;
+}

data/app/assets/stylesheets/active_list/background.scss

@@ -0,0 +1,39 @@
+// Provides mixin to generate colors for cells backgrounds
+//
+
+@function merge-color($color-1, $color-2) {
+  $col2: rgb(red($color-2), green($color-2), blue($color-2));
+  $percent: 100*alpha($color-2);
+  @return mix($col2, $color-1, $percent);
+}
+
+@function merge-colors($color, $color-1: rgba(0, 0, 0, 0), $color-2: rgba(0, 0, 0, 0), $color-3: rgba(0, 0, 0, 0), $color-4: rgba(0, 0, 0, 0), $color-5: rgba(0, 0, 0, 0), $color-6: rgba(0, 0, 0, 0), $color-7: rgba(0, 0, 0, 0), $color-8: rgba(0, 0, 0, 0), $color-9: rgba(0, 0, 0, 0), $color-10: rgba(0, 0, 0, 0)) {
+  @return merge-color(merge-color(merge-color(merge-color(merge-color(merge-color(merge-color(merge-color(merge-color(merge-color($color, $color-1), $color-2), $color-3), $color-4), $color-5), $color-6), $color-7), $color-8), $color-9), $color-10);
+}
+
+$list-line-backgrounds:   ("&" rgba(#FFF, 0)) ("&.error, &.undone" rgba(red, 0.12)) ("&.warning, &.in_progress" rgba(orange, 0.12));
+$list-column-backgrounds: ("&" rgba(#FFF, 0)) ("&.act" rgba(#F90, 0.01)) ("&.sor" rgba(#05A, 0.05));
+$list-hover-backgrounds:  ("&" rgba(#FFF, 0)) ("&:hover" rgba(blue, 0.05));
+
+@mixin list-colors($bgcolor: #000000, $selector: '&') {
+  tr {
+    #{$selector} {
+      @each $line-background in $list-line-backgrounds {
+        #{nth($line-background, 1)} {
+          @each $hover-background in $list-hover-backgrounds {
+            #{nth($hover-background, 1)} {
+              @each $col-background in $list-column-backgrounds {
+		td {
+		  #{nth($col-background, 1)} {
+                    background-color: merge-colors($bgcolor, nth($line-background, 2), nth($col-background, 2), nth($hover-background, 2));
+		  }
+		}
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+

data/app/assets/stylesheets/active_list/minimal.scss

@@ -0,0 +1,87 @@
+// Minimal style to get a working ActiveList
+
+div[data-list-source] {
+  table.list {
+    thead {
+      tr {
+        th {
+          &[data-list-column-sort] {
+            cursor: pointer;
+          }
+
+          &.spe {
+            padding: 0;
+            .list-menu {
+              position: relative;
+              a { cursor: pointer; }
+              .list-menu-start {
+                display: block;
+                height: 16px;
+                padding: 2px;
+              }
+              &:hover {
+                .list-menu-start { z-index:5000;  position: relative; top: 0px; }
+                & > ul { display: block; }
+              }
+              ul {
+                display: none;
+                position:absolute;
+                top: 20px;
+                padding: 1px;
+                margin:0;
+                 & { right: 0px;}
+                html[dir="rtl"] & { left: 0px;}
+                li {
+                  &[data-list-change-page-size], &[data-list-toggle-column] {
+                    cursor: pointer;
+                    display: block;
+                  }
+                  list-style-type: none;
+                  width: 25ex;
+                  position: relative;
+                  a {
+                    display: block;
+                  }
+                  ul {
+                    display: none;
+                    position: absolute;
+                    top: -2px;
+                     & { right: 25ex; }
+                    html[dir="rtl"] & { left: 25ex; }
+                    &:hover { display:block; }
+                  }
+                  &:hover ul { display:block; }
+                }
+              }
+            }
+          }
+
+          &.hidden {
+            display: none;
+          }
+
+        }
+      }
+    }
+
+    tbody {
+      tr {
+        td.hidden {
+          display: none;
+        }
+      }
+    }
+
+  }
+
+  div.extras {
+    .pagination {
+      a[data-list-move-to-page] {
+        cursor: pointer;
+      }
+      a[data-list-move-to-page][disabled] {
+        cursor: default;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/active_list/theme.scss

@@ -0,0 +1,189 @@
+// Default style for ActiveList
+@import "compass/css3";
+@import "compass/typography/text/replacement";
+
+
+
+// Because Compass sprites do not seems to work well in gems
+@mixin active-list-sprite($name, $size: 16px) {
+  background-image: image-url("active-list.png");
+  background-repeat: no-repeat;
+  height: $size;
+  width: $size;
+  $i: 0;
+  @each $icon in menu check columns export pages first-page previous-page previous-line next-line next-page last-page sort sort-down sort-up true false {
+    @if $icon == $name {
+      background-position: (-$i * $size) 0;
+    }
+    $i: $i + 1;
+  }
+}
+
+
+@mixin active-list-theme($theme-color: #777777) {
+  $default-border-color: mix($theme-color, #FFF, 30%);
+  $menu-width: 250px;
+  table.list {
+    border-collapse: collapse;
+    width: 100%;
+    border: 1px solid $default-border-color;
+    z-index: 2;
+    @include box-shadow(0 0 7px rgba(0, 0, 0, 0.15));
+    thead {
+      th {
+        border: 1px solid $default-border-color;
+        padding: 2px 3px;
+        @include background($theme-color linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8)));
+        &[data-list-column-sort] {
+          .icon {
+            @include active-list-sprite(sort);
+            @include inline-block;
+            margin: 0 2px;
+          }
+          &.sor[data-list-column-sort="desc"] .icon {
+            @include active-list-sprite(sort-down); }
+          &.sor[data-list-column-sort="asc"] .icon {
+            @include active-list-sprite(sort-up); }
+        }
+        & { text-align: left; }
+        html[dir="rtl"] & { text-align: right; }
+        &.spe {
+          width: 16px;
+          height: 16px;
+          .list-menu {
+            position: relative;
+            background: none;
+            .list-menu-start {
+              padding: 2px;
+              width: 16px;
+              height: 16px;
+              .icon { @include active-list-sprite(menu); display: block; }
+              .text { display: none; }
+            }
+            &:hover {
+              .list-menu-start {
+                background-color: white;
+                z-index:5000;
+              }
+            }
+            ul {
+              width: $menu-width;
+              border: 1px solid $default-border-color;
+              background: #FFF;
+              @include box-shadow(0 0 5px rgba(0, 0, 0, 0.3));
+              li {
+                width: $menu-width;
+                padding: 0;
+                ul {
+                  & { right: $menu-width; }
+                  html[dir="rtl"] & { left: $menu-width; }
+                }
+              }
+            }
+            & > ul {
+              top: 19px;
+            }
+            li {
+              padding: 0;
+              display: block;
+              a {
+                display: block;
+                padding: 2px;
+                .icon {
+                  @include inline-block;
+                  height:16px;
+                  width: 16px;
+                  & { margin-right:  4px; }
+                  html[dir="rtl"] & { margin-left: 4px; }
+                }
+                .text {
+                  @include inline-block;
+                  width: $menu-width - 24px;
+                  line-height: 18px;
+                  font-weight: normal;
+                }
+                & * {
+                  vertical-align: middle;
+                }
+                &.pages     .icon { @include active-list-sprite(pages); }
+                &.columns   .icon { @include active-list-sprite(columns); }
+              }
+              &.export    .icon { @include active-list-sprite(export); }
+              &.check     .icon { @include active-list-sprite(check); }
+              &.checked   .icon { @include active-list-sprite(true); }
+              &.unchecked .icon { @include active-list-sprite(false); }
+              &:hover {
+                text-decoration: none;
+                background: mix($theme-color, #FFF, 10%);
+              }
+              &.separator {
+                padding: 0;
+                height: 1px;
+                width: $menu-width - 6px;
+                margin: 3px;
+                background: $default-border-color;
+              }
+            }
+
+          }
+        }
+      }
+    }
+    tbody {
+      tr {
+        td {
+          padding: 2px 3px;
+          border-top: 1px solid mix($theme-color, #FFF, 10%);
+          border-bottom: none;
+          border-left: none;
+          border-right: none;
+          &.chk,&.act, &.dld, &.bln, &.dat, &.web  { text-align:center }
+          &.dec, &.flt, &.int {
+             & { text-align: right; }
+            html[dir="rtl"] & { text-align: left; }
+          }
+          &.country { white-space: nowrap; }
+          &.color { color: white; text-shadow: 0 0 2px #000; width: 6ex; text-align: center; }
+        }
+        &:first-child td {
+          border-top: none;
+        }
+      }
+    }
+
+    @include list-colors(#FFFFFF);
+  }
+  .extras {
+    z-index: 0;
+    @include background(transparentize(mix($theme-color, #FFF, 40%), 0.7));
+    .pagination {
+        & { text-align: left; }
+       html[dir="rtl"] & { text-align: right; }
+       & > * {
+         margin: 0 2px;
+       }
+       .first-page, .previous-page, .next-page, .last-page {
+         @include inline-block;
+         @include squish-text;
+       }
+        html[dir="rtl"] & .last-page,  & .first-page {
+          @include active-list-sprite(first-page);
+        }
+        html[dir="rtl"] & .first-page,  & .last-page {
+          @include active-list-sprite(last-page);
+        }
+        html[dir="rtl"] & .next-page,  & .previous-page {
+          @include active-list-sprite(previous-page);
+        }
+        html[dir="rtl"] & .previous-page, & .next-page {
+          @include active-list-sprite(next-page);
+        }
+       .separator {
+         @include inline-block;
+         width: 2px;
+         height: 1.2em;
+         background: transparentize($theme-color, 0.7);
+       }
+    }
+  }
+}