integral 1.3.0 → 1.4.0

data/app/assets/javascripts/integral/support/lib/materialize-tags.js

@@ -1,3 +1,4 @@
+/* Modified Version of - https://github.com/henrychavez/materialize-tags/blob/1.0.0/src/materialize-tags.js */
 (function ($)
 {
     "use strict";
@@ -440,50 +441,50 @@
 
                 switch (event.which)
                 {
-                    // BACKSPACE
-                    case 8:
-                        if (doGetCaretPosition($input[0]) === 0)
-                        {
-                            var prev = $inputWrapper.prev();
-                            if (prev)
-                            {
-                                self.remove(prev.data('item'));
-                            }
-                        }
-                        break;
-
-                    // DELETE
-                    case 46:
-                        if (doGetCaretPosition($input[0]) === 0)
-                        {
-                            var next = $inputWrapper.next();
-                            if (next)
-                            {
-                                self.remove(next.data('item'));
-                            }
-                        }
-                        break;
-
-                    // LEFT ARROW
-                    case 37:
-                        // Try to move the input before the previous tag
-                        var $prevTag = $inputWrapper.prev();
-                        if ($input.val().length === 0 && $prevTag[0])
-                        {
-                            $prevTag.before($inputWrapper);
-                            $input.focus();
-                        }
-                        break;
-                    // RIGHT ARROW
-                    case 39:
-                        // Try to move the input after the next tag
-                        var $nextTag = $inputWrapper.next();
-                        if ($input.val().length === 0 && $nextTag[0])
-                        {
-                            $nextTag.after($inputWrapper);
-                            $input.focus();
-                        }
-                        break;
+                    // // BACKSPACE
+                    // case 8:
+                    //     if (doGetCaretPosition($input[0]) === 0)
+                    //     {
+                    //         var prev = $inputWrapper.prev();
+                    //         if (prev)
+                    //         {
+                    //             self.remove(prev.data('item'));
+                    //         }
+                    //     }
+                    //     break;
+                    //
+                    // // DELETE
+                    // case 46:
+                    //     if (doGetCaretPosition($input[0]) === 0)
+                    //     {
+                    //         var next = $inputWrapper.next();
+                    //         if (next)
+                    //         {
+                    //             self.remove(next.data('item'));
+                    //         }
+                    //     }
+                    //     break;
+                    //
+                    // // LEFT ARROW
+                    // case 37:
+                    //     // Try to move the input before the previous tag
+                    //     var $prevTag = $inputWrapper.prev();
+                    //     if ($input.val().length === 0 && $prevTag[0])
+                    //     {
+                    //         $prevTag.before($inputWrapper);
+                    //         $input.focus();
+                    //     }
+                    //     break;
+                    // // RIGHT ARROW
+                    // case 39:
+                    //     // Try to move the input after the next tag
+                    //     var $nextTag = $inputWrapper.next();
+                    //     if ($input.val().length === 0 && $nextTag[0])
+                    //     {
+                    //         $nextTag.after($inputWrapper);
+                    //         $input.focus();
+                    //     }
+                    //     break;
                     default:
                     // ignore
                 }
@@ -515,6 +516,10 @@
                     event.preventDefault();
                 }
 
+                if (!self.options.freeInput && keyCombinationInList(event, self.options.confirmKeys)) {
+                  event.preventDefault();
+                }
+
                 // Reset internal input's size
                 var textLength = $input.val().length,
                     wordSpace  = Math.ceil(textLength / 5),

data/app/assets/javascripts/integral/support/ls.instagram.js

@@ -0,0 +1,57 @@
+/* LazySizes Plugin for Instagram created from the Twitter plugin */
+(function(window, factory) {
+	if(!window) {return;}
+	var globalInstall = function(){
+		factory(window.lazySizes);
+		window.removeEventListener('lazyunveilread', globalInstall, true);
+	};
+
+	factory = factory.bind(null, window, window.document);
+
+	if(typeof module == 'object' && module.exports){
+		factory(require('lazysizes'));
+	} else if(window.lazySizes) {
+		globalInstall();
+	} else {
+		window.addEventListener('lazyunveilread', globalInstall, true);
+	}
+}(typeof window != 'undefined' ?
+	window : 0, function(window, document, lazySizes) {
+	/*
+	 @example
+	 <blockquote class="lazyload" data-instagram="instagram" data-lang="en"><p lang="en" dir="ltr">Nothing Twitter is doing is working <a href="https://t.co/s0FppnacwK">https://t.co/s0FppnacwK</a> <a href="https://t.co/GK9MRfQkYO">pic.twitter.com/GK9MRfQkYO</a></p>&mdash; The Verge (@verge) <a href="https://twitter.com/verge/status/725096763972001794">April 26, 2016</a></blockquote>
+	 */
+	'use strict';
+	var instagramScriptAdded;
+
+	function loadExecuteInstagram(){
+		// if(window.twttr && twttr.widgets){
+		// 	twttr.widgets.load();
+		// 	return;
+		// }
+
+		if(instagramScriptAdded){
+			return;
+		}
+
+		var elem = document.createElement('script');
+		var insertElem = document.getElementsByTagName('script')[0];
+
+		elem.src = '//www.instagram.com/embed.js';
+
+		instagramScriptAdded = true;
+		insertElem.parentNode.insertBefore(elem, insertElem);
+	}
+
+	document.addEventListener('lazybeforeunveil', function(e){
+		if(e.detail.instance != lazySizes){return;}
+
+		var twttrWidget = e.target.getAttribute('data-instagram');
+
+		if(twttrWidget){
+			lazySizes.aC(e.target, twttrWidget);
+			loadExecuteInstagram();
+		}
+	});
+
+}));

data/app/assets/javascripts/integral/support/ls.twitter.js

@@ -0,0 +1,66 @@
+/* 5.2.0 - https://github.com/aFarkas/lazysizes */
+(function(window, factory) {
+	if(!window) {return;}
+	var globalInstall = function(){
+		factory(window.lazySizes);
+		window.removeEventListener('lazyunveilread', globalInstall, true);
+	};
+
+	factory = factory.bind(null, window, window.document);
+
+	if(typeof module == 'object' && module.exports){
+		factory(require('lazysizes'));
+	} else if(window.lazySizes) {
+		globalInstall();
+	} else {
+		window.addEventListener('lazyunveilread', globalInstall, true);
+	}
+}(typeof window != 'undefined' ?
+	window : 0, function(window, document, lazySizes) {
+	/*
+	 @example
+	 <blockquote class="lazyload" data-twitter="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Nothing Twitter is doing is working <a href="https://t.co/s0FppnacwK">https://t.co/s0FppnacwK</a> <a href="https://t.co/GK9MRfQkYO">pic.twitter.com/GK9MRfQkYO</a></p>&mdash; The Verge (@verge) <a href="https://twitter.com/verge/status/725096763972001794">April 26, 2016</a></blockquote>
+
+	 <a class="lazyload"
+	 data-twitter="twitter-timeline"
+	 data-widget-id="600720083413962752"
+	 href="https://twitter.com/TwitterDev"
+	 width="300"
+	 height="300">
+	 Tweets by @TwitterDev
+	 </a>
+	 */
+	'use strict';
+	var scriptadded;
+
+	function loadExecuteTwitter(){
+		if(window.twttr && twttr.widgets){
+			twttr.widgets.load();
+			return;
+		}
+
+		if(scriptadded){
+			return;
+		}
+
+		var elem = document.createElement('script');
+		var insertElem = document.getElementsByTagName('script')[0];
+
+		elem.src = '//platform.twitter.com/widgets.js';
+
+		scriptadded = true;
+		insertElem.parentNode.insertBefore(elem, insertElem);
+	}
+
+	document.addEventListener('lazybeforeunveil', function(e){
+		if(e.detail.instance != lazySizes){return;}
+
+		var twttrWidget = e.target.getAttribute('data-twitter');
+
+		if(twttrWidget){
+			lazySizes.aC(e.target, twttrWidget);
+			loadExecuteTwitter();
+		}
+	});
+
+}));

data/app/assets/javascripts/integral/support/record_selector.coffee

@@ -121,7 +121,7 @@ class this.RecordSelector
 
   # Update details sidebar panel
   _updateDetails: ->
-    @container.find('.sidebar img').attr('src', @selectedData.image)
+    @container.find('.sidebar img').attr('src', @selectedData.image || '')
     @container.find('.sidebar .title').text(@selectedData.title)
     @container.find('.sidebar .description').text(@selectedData.description)
 

data/app/assets/javascripts/integral/support/remote_form.coffee

@@ -52,8 +52,10 @@ class this.RemoteForm
 
     @broadcastEvent(target)
 
-    # Reset form
-    target[0].reset()
+    # Reset form if configured
+    resetOnSuccess = target.data('remote-form-reset-on-success')
+    resetOnSuccess = @opts.resetOnSuccess if resetOnSuccess == undefined
+    target[0].reset() if resetOnSuccess == true
 
     return Turbolinks.visit(data.redirect_url) if data.redirect_url
     return @successMessage(data.message) if data.message
@@ -87,5 +89,6 @@ class this.RemoteForm
       handleSuccess: @_handleSuccess
       handleError: @_handleError
       handleComplete: @_handleComplete
+      resetOnSuccess: true
 
     $.extend({}, default_opts, opts)

data/app/assets/stylesheets/integral/backend.sass

@@ -4,6 +4,7 @@
 @import 'integral/backend/foundation_and_overrides'
 @import "integral/support/media-query-indicator"
 @import "integral/backend/materialize-tags"
+@import "integral/backend/modules/timeline"
 @import 'integral/backend/shared'
 @import 'integral/backend/notifications'
 @import 'integral/backend/dashboard-layout'
@@ -38,7 +39,7 @@
       margin-bottom: 1em
       margin-right: 1em
   i
-    width: 2em
+    width: 1.5rem
     text-align: center
 
   hr

data/app/assets/stylesheets/integral/backend/_foundation_settings.scss

@@ -81,7 +81,6 @@ $dark-gray: #8a8a8a;
 $black: #0a0a0a;
 $white: #fefefe;
 $twitter: #59A2DA;
-$google-plus: #E61610;
 $pink: #ef86ae;
 $body-background: #f7f7f7;
 $body-font-color: #17212b;
@@ -115,7 +114,7 @@ $breakpoints: (
   xxlarge: 1440px,
 );
 $print-breakpoint: large;
-$breakpoint-classes: (small medium large);
+$breakpoint-classes: (small medium large xlarge xxlarge);
 
 // 3. The Grid
 // -----------
@@ -829,8 +828,8 @@ $titlebar-icon-spacing: 0.25rem;
 // -----------
 
 $has-tip-cursor: help;
-$has-tip-font-weight: $global-weight-bold;
-$has-tip-border-bottom: dotted 1px $dark-gray;
+$has-tip-font-weight: initial;
+$has-tip-border-bottom: none;
 $tooltip-background-color: $black;
 $tooltip-color: $white;
 $tooltip-padding: 0.75rem;

data/app/assets/stylesheets/integral/backend/dashboard-layout.scss

@@ -211,7 +211,7 @@
   .top-bar {
     .create-dropdown {
       padding: 1em 0;
-      width: 10em;
+      min-width: 10em;
       background-color: $white;
       &:after {
         content: ' ';
@@ -233,6 +233,9 @@
         transform: rotate(225deg) skewX(8deg) skewY(8deg);
         top: -0.1em;
       }
+      li {
+        display: block;
+      }
       i {
         width: 30px;
         text-align: center;

data/app/assets/stylesheets/integral/backend/materialize-tags.sass

@@ -3,7 +3,7 @@
     width: 100%
     margin-top: 1em
     input
-      margin-bottom: 0.5em
+      margin-bottom: 1rem
   .label
     background: scale-color($primary-color, $lightness: 30%)
     margin: 0.2em 0

data/app/assets/stylesheets/integral/backend/modules/timeline.scss

@@ -0,0 +1,214 @@
+$timeline-color: $primary-color;
+$timeline-transition: all 0.25s ease-in;
+$timeline-item-card-bg: $white;
+$timeline-item-font-color: $black;
+$timeline-item-card: false;
+$timeline-item-card-radius: $global-radius;
+
+%clearfix {
+  &::after,
+  &::before {
+    clear: both;
+    content: '';
+    display: block;
+    width: 100%;
+  }
+}
+
+// Timeline
+.timeline {
+  margin: 30px auto;
+  padding: 0 10px;
+  position: relative;
+  transition: $timeline-transition;
+  width: 100%;
+
+  &::before {
+    background: $timeline-color;
+    content: '';
+    height: 100%;
+    left: 50%;
+    position: absolute;
+    top: 0;
+    width: 2px;
+  }
+
+  &::after {
+    clear: both;
+    content: '';
+    display: table;
+    width: 100%;
+  }
+
+  .timeline-item {
+    margin-bottom: 50px;
+    position: relative;
+    @extend %clearfix;
+
+    .timeline-icon {
+      background: $timeline-color;
+      border-radius: 50%;
+      height: 50px;
+      left: 50%;
+      margin-left: -23px;
+      overflow: hidden;
+      position: absolute;
+      top: 0;
+      width: 50px;
+
+      i {
+        width: 100%;
+        font-size: 1.25rem;
+        color: $white;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        text-align: center;
+      }
+    }
+
+    .timeline-content {
+      padding: 20px;
+      text-align: right;
+      transition: $timeline-transition;
+      width: 45%;
+
+      @if $timeline-item-card == true {
+        background: $timeline-item-card-bg;
+        border-radius: $timeline-item-card-radius;
+
+        p {
+          color: $black;
+        }
+      } @else {
+        background: transparent;
+
+        p {
+          color: $timeline-item-font-color;
+        }
+      }
+
+      p {
+        font-size: 16px;
+        line-height: 1.4;
+        margin-bottom: 0;
+      }
+
+      hr {
+        display: none;
+      }
+
+      .timeline-content-header {
+        display: flex;
+        justify-content: space-between;
+      }
+      .timeline-content-user {
+        opacity: 0.75;
+        margin-bottom: 10px;
+        span {
+          font-size: .8rem;
+        }
+        img {
+          border-radius: 50%;
+          width: 20px;
+          height: 20px;
+        }
+        &:hover {
+          color: $primary-color;
+          opacity: 1;
+        }
+      }
+
+      .timeline-content-event {
+        color: $timeline-color;
+        text-transform: uppercase;
+        font-size: .75rem;
+      }
+      .timeline-content-title {
+        margin-top: .5rem;
+        a {
+          font-style: italic;
+          border-bottom: 1px dotted #dbdbdb;
+        }
+      }
+
+      .timeline-content-date {
+        text-transform: uppercase;
+        font-weight: normal;
+        font-size: .7rem;
+        margin-bottom: 0;
+      }
+
+      .timeline-content-month {
+        font-size: rem-calc(14);
+        text-transform: uppercase;
+        font-weight: 400;
+      }
+
+      &.right {
+        float: right;
+        text-align: left;
+      }
+    }
+
+    &:nth-child(even) {
+      .timeline-content {
+        float: right;
+        text-align: left;
+
+        .timeline-content-header {
+          flex-direction: row-reverse;
+        }
+      }
+    }
+  }
+}
+
+@mixin timelinecompressed {
+  margin: 30px;
+  padding: 0;
+  width: 90%;
+
+  &::before {
+    left: 0;
+  }
+
+  .timeline-item {
+    margin-bottom: 0px;
+    .timeline-content {
+      float: right;
+      text-align: left;
+      width: 90%;
+      padding: 0 10px;
+
+      &::before,
+      &.right::before {
+        border-left: 0;
+        border-right: 7px solid $timeline-color;
+        left: 10%;
+        margin-left: -6px;
+      }
+
+      hr {
+        display: block;
+      }
+
+      .timeline-content-header {
+        flex-direction: row-reverse;
+      }
+    }
+
+    .timeline-icon {
+      left: 0;
+    }
+  }
+}
+
+@include breakpoint(small only) {
+  .timeline {
+    @include timelinecompressed;
+  }
+}
+.timeline--compressed {
+  @include timelinecompressed;
+}