nfg_ui 0.9.15 → 0.9.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bcde1c0cb0c6710204e47174a49a1d9714b9eb7c4e8efc056a324931e1800461
-  data.tar.gz: 568118cf6b42f055b63ee32a14f6176bf2c8c0ebc61c29d4054a8c645068c3ef
+  metadata.gz: a5eff2dbd27f1207470e754379027bd19cb9836c237a56658ab84b30f17cb7f4
+  data.tar.gz: 01aef97bf4e2783e9f3dd6bd29c84e34cb31e0ab6d5c26643033aa5802ca166a
 SHA512:
-  metadata.gz: 857ab4ccaf62efa694c51439e508745aaab198efa34629cefe390324a78e8de6345ded9e078dc32a0ff8e3321d8803ead3f86f3c000a6ee490cbaef161ae381c
-  data.tar.gz: c7c24d5c2eb5a605c28f7488d26219eaf371f0683c6e40814de5901ced519314686b3663df758d2818ea89c3549bdb66c2b33838e9f71df4db9a8a2920c6eeb5
+  metadata.gz: 59fa2d8d00081d85487382b477ced0d9f3ea869697cf7a90a395e3564e3806fe5c052c0005fd83500754ac99740a874eedbbd4a71a095683f453ce3ed8341c99
+  data.tar.gz: b0231f761e74ffffe0284805cea470fcaf04e7b89af05813a4fe5aaa394f11e9fb8f66c4521675252622f2e30cad16220dcd4ff4bfc864c0aab73f28393a544a

data/README.md

@@ -1,7 +1,9 @@
 # Network for Good's Design System for Ruby on Rails
 The authoritative resource for the Network for Good front-end UI, empowered by the NFG Design System.
 
-Note: the readme documentation is a little out of date and will be updated with accurate info soon (note added on Jan. 19, 2019)
+Note: the readme documentation is a little out of date and will be updated with accurate info soon (noted on Aug. 22, 2019)
+
+See [changelog](https://github.com/network-for-good/nfg_ui/blob/master/CHANGELOG.md) for notes on updates.
 
 [Jump to development / setting up the gem locally](https://github.com/network-for-good/nfg_ui/blob/master/README.md#local-development--accessing-documentation)
 

data/app/assets/javascripts/nfg_ui/application.coffee

@@ -2,11 +2,14 @@
 #= require popper
 #= require select2
 #= require bootstrap
+#= require moment
+#= require bootstrap-datetimepicker.min
 
 #= require_self
 #= require nfg_ui/collapsible_toggle
 #= require nfg_ui/vendor/select2
 #= require nfg_ui/vendor/tooltips
+#= require nfg_ui/vendor/datetimepicker_configuration
 
 window.NfgUi = {}
 

data/app/assets/javascripts/nfg_ui/vendor/datetimepicker_configuration.js

@@ -0,0 +1,77 @@
+"use strict";
+
+function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }
+
+function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+NfgUi.DateTimePicker =
+/*#__PURE__*/
+function () {
+  function DateTimePicker(input) {
+    _classCallCheck(this, DateTimePicker);
+
+    this.input = input;
+    this.input[0].readOnly = true;
+    this.input.datetimepicker(this.options());
+    this.input.on('dp.show', function (event) {
+      $('.bootstrap-datetimepicker-widget').addClass('fs-ignore-rage-clicks'); // makes fullstory ignore "rage clicks" on the datetimepicker
+    });
+  }
+
+  _createClass(DateTimePicker, [{
+    key: "options",
+    value: function options() {
+      var options = this.input.data('options') || {};
+
+      if (!options.format) {
+        options.format = this.defaultFormat();
+      }
+
+      options.useCurrent = false;
+      options.ignoreReadonly = true;
+      options.icons = {
+        time:"fa fa-clock-o",
+        date:"fa fa-calendar",
+        up:"fa fa-caret-up",
+        down:"fa fa-caret-down",
+        previous:"fa fa-caret-left",
+        next:"fa fa-caret-right",
+        today:"fa fa-crosshairs",
+        clear:"fa fa-trash-o",
+        close:"fa fa-times"
+      }
+      // options.debug = true
+      return options;
+    }
+  }, {
+    key: "defaultFormat",
+    value: function defaultFormat() {
+
+      if (this.input.data('datetimepicker') == 'datetime') {
+        return 'Y-MM-DD hh:mm A';
+      } else if (this.input.data('datetimepicker') == 'time') {
+        return 'hh:mm A';
+      } else {
+        return 'Y-MM-DD';
+      }
+    }
+  }]);
+
+  return DateTimePicker;
+}();
+
+$(function() {
+  var inputs = $("input[data-datetimepicker='datetime'], input[data-datetimepicker='date'], input[data-datetimepicker='time']");
+
+  if (!(inputs.length > 0)) {
+    return;
+  }
+
+  return inputs.each(function (index, input) {
+    return new NfgUi.DateTimePicker($(input));
+  });
+});

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/application.scss

@@ -16,6 +16,7 @@
 
 // Plugins
 @import 'nfg_ui/network_for_good/public/plugins/datepicker';
+@import 'nfg_ui/network_for_good/public/plugins/datetimepicker';
 @import 'nfg_ui/network_for_good/public/plugins/sticky_div';
 @import 'nfg_ui/network_for_good/public/plugins/select2';
 

data/app/assets/stylesheets/nfg_ui/network_for_good/public/application.scss

@@ -18,6 +18,7 @@
 @import 'plugins/datepicker';
 @import 'plugins/sticky_div';
 @import 'plugins/select2';
+@import 'plugins/datetimepicker';
 
 // Legacy browser support
 @import 'legacy_browser_support/application';

data/app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/application.scss

@@ -16,4 +16,5 @@
 @import 'nfg_theme/custom';
 
 // Plugins
+@import 'plugins/datetimepicker';
 @import 'plugins/select2';

data/app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/plugins/_datetimepicker.scss

@@ -0,0 +1,44 @@
+// Specific styles for entity branding
+.datepicker, .timepicker {
+
+  //** Default states for actions
+  [data-action^='select'],
+  [data-action^='picker'],
+  .prev,
+  .next,
+  .timepicker-picker a.btn {
+    &:hover, &:active, &.active {
+      color: color-yiq($primary) !important;
+      background-color: $primary !important;
+    }
+  }
+
+  //** Today's state
+  .today {
+    &.active {
+      &:hover, &:active {
+        color: color-yiq($primary) !important;
+        background-color: $primary !important;
+      }
+    }
+  }
+}
+
+//** Datepicker specific
+.datepicker {
+  .prev, .next { color: color-yiq($primary, $yiq-text-dark, $primary); }
+}
+
+//** Timepicker picker section
+.timepicker-picker td a { color: color-yiq($primary, $yiq-text-dark, $primary); }
+
+//** Time/Date Toggle
+.picker-switch.accordion-toggle {
+  a {
+    color: color-yiq($primary, $yiq-text-dark, $primary);
+    &:hover, &:active {
+      color: color-yiq($primary) !important;
+      background-color: $primary !important;
+    }
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/public/plugins/_datetimepicker.scss

@@ -0,0 +1,265 @@
+// @import 'jquery.datetimepicker.min.css';
+
+//*****************************//
+// DATEPICKER -- based on http://eonasdan.github.io/bootstrap-daetetimepicker/
+//*****************************//
+
+//** Base styles
+.bootstrap-datetimepicker-widget {
+  display: block;
+  top: 0 !important;
+  padding: 0;
+  min-width: ($spacer * 14);
+  max-width: ($spacer * 14);
+  background-color: $white;
+  border: $border-width solid $border-color;
+  border-radius: 0;
+  z-index: 110;
+
+  &.dropdown-menu {
+    position: absolute !important;
+    top: 100% !important;
+    right: auto !important;
+    bottom: auto !important;
+    left: auto !important;
+    opacity: 1;
+    pointer-events: auto;
+    visibility: visible !important;
+    transform: none;
+  }
+
+  //** Base date and time styles
+  ul { margin: 0; }
+  .datepicker, .timepicker {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  a[data-action] { display: block; }
+
+  //** Table defaults
+  table {
+    width: 100%;
+    td, th {
+      text-align: center;
+      vertical-align: middle;
+    }
+  }
+
+  //** Time/Date Toggle
+  .collapse.show {
+    .timepicker-picker {
+      tr:first-child a, tr:last-child a { border-radius: 0; }
+    }
+    + .picker-switch { border-top: $border-width solid $border-color; }
+  }
+  .picker-switch + .collapse.show { border-top: $border-width solid $border-color; }
+
+  //** Accessbility
+  .prev, .next {
+    &:after {
+      position: absolute;
+      margin: -1px;
+      padding: 0;
+      width: 1px;
+      height: 1px;
+      border: 0;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+    }
+  }
+  .prev:after { content: 'Previous Month'; }
+  .next:after { content: 'Next Month'; }
+}
+
+//** Shared datepicker and timepicker styles
+.datepicker, .timepicker {
+
+  //** Default states for actions
+  [data-action^='select'],
+  [data-action^='picker'],
+  .prev,
+  .next,
+  .timepicker-picker a.btn {
+    cursor: pointer;
+    background-color: $white;
+    @include transition(color 250ms ease, background-color 250ms ease);
+    &:hover, &:active, &.active {
+      color: $white;
+      background-color: $link-color;
+    }
+  }
+  [data-action^='select'],
+  [data-action^='picker'] {
+    font-weight: $font-weight-bold;
+    font-size: $font-size-base;
+    color: $body-color;
+    border-left: $border-width solid $border-color;
+    border-top: $border-width solid $border-color;
+  }
+
+  //** Disabled or unavailable states
+  .unavailable, .old, .new, .disabled, .disabled:hover {
+    font-size: $font-size-sm;
+    color: $input-placeholder-color;
+    background-color: $input-disabled-bg;
+  }
+  .unavailable, .disabled { cursor: not-allowed; }
+
+  //** Today's state
+  .today {
+    color: $white;
+    background-color: $dark;
+    &.active {
+      &:hover, &:active { background-color: $link-color; }
+    }
+  }
+
+  //** Default sizing for select cells
+  [data-action^='select'] {
+    display: inline-block;
+    height: ($spacer * 3);
+    line-height: ($spacer * 3);
+  }
+}
+
+//** Datepicker specific
+.datepicker {
+
+  //** Top picker switcher for month, year, decade
+  [data-action^='picker'] {
+    padding-top: ($spacer / 2);
+    padding-bottom: ($spacer / 2);
+    width: ($spacer * 10);
+    border-right: $border-width solid $border-color;
+    border-left: $border-width solid $border-color;
+    border-top: none;
+  }
+
+  //** Day of the week
+  .dow {
+    padding: ($spacer / 4);
+    font-weight: $font-weight-bold;
+    font-size: $font-size-base;
+    border-top: $border-width solid $border-color;
+  }
+
+  //** Previous/Next buttons
+  .prev, .next {
+    color: $link-color;
+    width: ($spacer * 2);
+    height: 100%;
+  }
+
+  //** Body
+  .datepicker-days {
+    [data-action^='select'] {
+      display: table-cell;
+      width: ($spacer * 2);
+      height: ($spacer * 2);
+      line-height: 1;
+      &:first-child { border-left: none; }
+    }
+  }
+  .datepicker-months,
+  .datepicker-years,
+  .datepicker-decades {
+    [data-action^='select'] {
+      width: 33.3333333%;
+      &:nth-child(3n + 1) { border-left: none; }
+    }
+  }
+}
+
+//** Timepicker specific
+.timepicker {
+  [data-action^='select'] {
+    width: 25%;
+    &:nth-child(4n + 1) { border-left: none; }
+  }
+  [class^='timepicker-'] {
+    tr:first-child td { border-top: none; }
+  }
+}
+
+//** Timepicker picker section
+.timepicker-picker {
+  padding-right: ($spacer / 2);
+  td {
+    width: 35%;
+    &:nth-child(2) { width: ($spacer / 2); }
+    &:nth-child(4) {
+      padding-left: ($spacer / 2);
+      width: ($spacer * 2);
+    }
+    a { color: $link-color; }
+  }
+  [class^='timepicker-'] {
+    display: block;
+    width: 100%;
+    height: ($spacer * 2);
+    line-height: ($spacer * 2);
+    font-weight: $font-weight-bold;
+    font-size: $font-size-lg;
+    cursor: pointer;
+    transition: background-color 250ms ease; // @include transition(background-color 250ms ease);
+    &:hover, &:active { background-color: $border-color; }
+  }
+  .btn {
+    position: relative;
+    display: block;
+    padding: ($spacer / 2) 0;
+    width: 100%;
+    height: ($spacer * 2);
+  }
+}
+
+//** Time/Date Toggle
+.picker-switch.accordion-toggle {
+  a {
+    display: block;
+    padding-top: ($spacer / 2);
+    padding-bottom: ($spacer / 2);
+    color: $link-color;
+    background-color: $white;
+    cursor: pointer;
+    transition: color 250ms ease, background-color 250ms ease; // @include transition(color 250ms ease, background-color 250ms ease);
+    &:hover, &:active {
+      color: $white;
+      background-color: $link-color;
+    }
+  }
+}
+
+//** Accessbility
+[data-action='togglePicker'],
+[data-action='incrementHours'],
+[data-action='incrementMinutes'],
+[data-action='decrementHours'],
+[data-action='decrementMinutes'],
+[data-action='showHours'],
+[data-action='showMinutes'],
+[data-action='togglePeriod'],
+[data-action='clear'],
+[data-action='today'] {
+  &:after {
+    position: absolute;
+    margin: -1px;
+    padding: 0;
+    width: 1px;
+    height: 1px;
+    border: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+  }
+}
+[data-action='togglePicker']:after { content: 'Toggle Date and Time Screens'; }
+[data-action='incrementHours']:after { content: 'Increment Hours'; }
+[data-action='incrementMinutes']:after { content: 'Increment Minutes'; }
+[data-action='decrementHours']:after { content: 'Decrement Hours'; }
+[data-action='decrementMinutes']:after { content: 'Decrement Minutes'; }
+[data-action='showHours']:after { content: 'Show Hours'; }
+[data-action='showMinutes']:after { content: 'Show Minutes'; }
+[data-action='togglePeriod']:after { content: 'Toggle AM/PM'; }
+[data-action='clear']:after { content: 'Clear the picker'; }
+[data-action='today']:after { content: 'Set the date to today'; }

data/lib/nfg_ui.rb

@@ -9,6 +9,7 @@ require 'jquery-rails'
 require 'sass-rails'
 require 'select2-rails'
 require 'inky'
+require 'momentjs-rails'
 
 module NfgUi
   DEFAULT_BOOTSTRAP_THEME    = :primary

data/lib/nfg_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module NfgUi
-  VERSION = '0.9.15'
+  VERSION = '0.9.16'
 end

data/lib/nfg_ui/version.rb.orig

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module NfgUi
+<<<<<<< HEAD
+  VERSION = '0.9.15.1'
+=======
+  VERSION = '0.9.16'
+>>>>>>> master
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nfg_ui
 version: !ruby/object:Gem::Version
-  version: 0.9.15
+  version: 0.9.16
 platform: ruby
 authors:
 - Jonathan Roehm
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-08-01 00:00:00.000000000 Z
+date: 2019-08-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootstrap
@@ -123,6 +123,26 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '4.0'
+- !ruby/object:Gem::Dependency
+  name: momentjs-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.11'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.11.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.11'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.11.1
 - !ruby/object:Gem::Dependency
   name: browser
   requirement: !ruby/object:Gem::Requirement
@@ -343,8 +363,8 @@ files:
 - app/assets/images/nfg_ui/email/nfg-logo.png
 - app/assets/javascripts/nfg_ui/application.coffee
 - app/assets/javascripts/nfg_ui/collapsible_toggle.coffee
-- app/assets/javascripts/nfg_ui/disable_with_for_links.coffee
 - app/assets/javascripts/nfg_ui/prevent_clickable_disabled_element.coffee
+- app/assets/javascripts/nfg_ui/vendor/datetimepicker_configuration.js
 - app/assets/javascripts/nfg_ui/vendor/select2.coffee
 - app/assets/javascripts/nfg_ui/vendor/tooltips.coffee
 - app/assets/stylesheets/nfg_ui/bootstrap/application.scss
@@ -411,6 +431,7 @@ files:
 - app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/nfg_theme/_utilities.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/nfg_theme/custom/_everyday_default.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/nfg_theme/custom/_nav_step.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/plugins/_datetimepicker.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/plugins/_select2.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/_variables.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/application.scss
@@ -468,6 +489,7 @@ files:
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_tile.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_user_navbar.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/plugins/_datepicker.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/public/plugins/_datetimepicker.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/plugins/_select2.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/plugins/_sticky_div.scss
 - app/controllers/nfg_ui/application_controller.rb
@@ -711,6 +733,7 @@ files:
 - lib/nfg_ui/ui/utilities.rb
 - lib/nfg_ui/ui/utilities/initializer.rb
 - lib/nfg_ui/version.rb
+- lib/nfg_ui/version.rb.orig
 - lib/tasks/nfg_ui_tasks.rake
 homepage: https://github.com/network-for-good/nfg_ui
 licenses:

data/app/assets/javascripts/nfg_ui/disable_with_for_links.coffee

@@ -1,32 +0,0 @@
-class NfgUi.DisableWithForLinks
-  constructor: (@el) ->
-    @buttonInnerHTML = @el.html()
-    @initialize()
-
-    $('body').on 'hide.bs.modal', '.modal', (e) =>
-      @restoreHTML()
-
-  initialize: ->
-    return if @el.hasClass 'disabled'
-    @el.addClass 'disabled'
-       .attr { 'data-link-disabled' : true, 'disabled' : '', 'tabindex' : '-1' }
-
-
-  restoreHTML: ->
-    return unless @el.data('link-disabled')
-    @el.html @buttonInnerHTML
-
-    @el.removeClass 'disabled'
-       .removeAttr 'data-link-disabled', 'disabled'
-
-$ ->
-  elSelector = "a[data-disable-with]"
-
-  $(elSelector).click (e) =>
-    e.preventDefault();
-    inst = new NfgUi.DisableWithForLinks $(e.target)
-
-  $(document).on 'ajax:success', (e, xhr, settings) ->
-    return unless $(elSelector).length
-    $(elSelector).click (e) =>
-      inst = new NfgUi.DisableWithForLinks $(e.target)