tips 0.0.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 9684df1fded8d68ca41ee1ce6f427df5af471b34
+  data.tar.gz: dfbf087e71d2d7d8d9553bf560e00e1254b45081
+SHA512:
+  metadata.gz: 405cd0a5dcb1b15ee664b066a23149bb893dc4aff4d18c3b6e5635c20c2911a3339b6d7fe1a588a520af4f19443dfcb293a1d501e32c0fcdb013bd176e8204d3
+  data.tar.gz: a1f9c2b17f0230b56b385db8d3a756689eb4cc819688405fd86d51f4efbdd63143ac1ee771ee5f6ad9b90274b1e4ba6d4a55c3adc5b875b47a3fed0dddcf052d

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in tips.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2015 Ryan Guerrettaz
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,29 @@
+# Tips
+
+TODO: Write a gem description
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'tips'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install tips
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Contributing
+
+1. Fork it ( http://github.com/<my-github-username>/tips/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/app/assets/javascripts/tips.js

@@ -0,0 +1,582 @@
+;(function setup(window){
+
+  function initTips(){
+    function Validation(config, settableAttrs, acceptableValues) {
+
+      function logInvalidKeyError(key){
+        console.log(key + ' is not a valid config key.')
+      }
+
+      function logInvalidValueError(attrKey, attrVal){
+        console.log(attrVal + ' is not a valid value for ' + attrKey)
+      }
+
+      Object.keys(config).forEach(function(key){
+        if (settableAttrs.indexOf(key) > -1) {
+          var value =  config[key]
+
+          if (acceptableValues[key].indexOf(config[key]) === -1) {
+            logInvalidValueError(key, value)
+
+            // Remove the invalid key from the config hash
+            config[key] = undefined
+          }
+        } else logInvalidKeyError(key)
+      })
+    }
+
+    //
+    //
+    // STORAGE DEVICE
+    //
+    //
+    var tipsCustomStorageDevice;
+    var storageDevice;
+    var defaultStorageDevice = {
+      optOutKey: 'tips-opted-out',
+
+      addTip: function(tipName){
+        localStorage.setItem(tipName, true);
+      },
+
+      tipHasBeenSeen: function(tipName){
+        return !!localStorage.getItem(tipName);
+      },
+
+      optOut: function(){
+        localStorage.setItem(this.optOutKey, true);
+      },
+
+      userHasOptedOut: function(){
+        return !!localStorage.getItem(this.optOutKey);
+      },
+
+      removeAll: function(tipNames){
+        tipNames.push(this.optOutKey)
+        tipNames.forEach(function(key){
+          localStorage.removeItem(key)
+        })
+      }
+    };
+
+    if (tipsCustomStorageDevice == undefined) storageDevice = defaultStorageDevice;
+    else storageDevice = tipsCustomStorageDevice();
+
+    //
+    //
+    // TIPS
+    //
+    //
+    var Tips = {
+      list: [],
+
+      userOptedOut: function(){ return storageDevice.userHasOptedOut() },
+
+      reset: function(){ storageDevice.removeAll(this.tipNames()) },
+
+      tipNames: function(){
+        var names = [];
+        this.list.forEach( function(tip){ names.push(tip.name) } )
+        return names
+      },
+
+      showNextTip: function(){
+        // Guard clause
+        if (this.userOptedOut()) return
+        var unseen = Tips.unseen()
+        if (unseen.length != 0) unseen[0].hotSpot.show()
+      },
+
+      unseen: function() {
+        var unseen = [];
+        this.list.forEach(function(tip){
+          if (!tip.hasBeenSeen()) unseen.push(tip)
+        })
+        return unseen
+      }
+    }
+
+    //
+    //
+    // TIP
+    //
+    //
+    function Tip(el) {
+      this.name = 'tips:' + el.getAttribute('data-tips-name');
+      this.priority = el.getAttribute('data-tips-priority') || 1;
+      this.pages = el.getAttribute('data-tips-pages') || 1;
+      this.tipNode = el;
+      this.height = 246;
+      this.width = 485;
+      this.hotspotPosition = el.getAttribute('data-tips-hot-spot-position') || 'right';
+      this.cardPosition = el.getAttribute('data-tips-card-position') || 'right';
+      this.tipCard = new TipCard(el, this);
+      this.hotSpot = new HotSpot(this);
+    }
+
+    Tip.prototype.hasBeenSeen = function() {
+      //Look in storage device for tip seen
+      return !!storageDevice.tipHasBeenSeen(this.name)
+    }
+
+    //
+    //
+    // HOT SPOT
+    //
+    //
+    function HotSpot(tip) {
+      var hotSpot = {};
+      var hotSpotSpecs = {
+        width: 56,
+        height: 56,
+        middle: 56/2
+      };
+
+      hotSpot.tipCard = tip.tipCard;
+      hotSpot.tip = tip;
+      hotSpot.position = tip.hotspotPosition;
+      hotSpot.tipNode = tip.tipNode;
+      hotSpot.tipName = tip.name;
+      hotSpot.hotSpotNode = createHotSpotNode();
+
+      hotSpot.show = function(){
+        this.hotSpotNode.style.display = '';
+      }
+
+      hotSpot.hide = function(){
+        this.hotSpotNode.style.display = 'none';
+      }
+
+      // Private functions
+
+      function createHotSpotNode(){
+        var bounds = hotSpot.tipNode.getBoundingClientRect();
+        var hotSpotNode = document.createElement('div');
+        var offsetLeft = calcualteHotSpotOffsetLeft(bounds);
+        var offsetTop  = calculateHotSpotOffsetTop(bounds);
+
+        hotSpotNode.className = 'tips-throbber';
+        hotSpotNode.style.position = 'absolute';
+        hotSpotNode.style.top = offsetTop + 'px';
+        hotSpotNode.style.left = offsetLeft + 'px';
+        hotSpotNode.style.display = 'none';
+
+        addHotSpotListener(hotSpotNode);
+
+        document.body.appendChild(hotSpotNode);
+
+        return hotSpotNode
+      }
+
+      function calculateHotSpotOffsetTop(bounds) {
+        var topPxLength     = 0;
+        var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset :
+                          (document.documentElement ||
+                          document.body.parentNode || document.body).scrollTop;
+        var topPositions    = ['top-left', 'top', 'top-right'];
+        var bottomPositions = ['bottom-left', 'bottom', 'bottom-right'];
+        var middlePositions = ['middle', 'left', 'right'];
+
+        if (topPositions.indexOf(hotSpot.position) !== -1) {
+          topPxLength = bounds.top - hotSpotSpecs.middle + scrollTop;
+        } else if (bottomPositions.indexOf(hotSpot.position) !== -1) {
+          topPxLength = bounds.top + bounds.height - hotSpotSpecs.middle +
+                        scrollTop;
+        } else if (middlePositions.indexOf(hotSpot.position) !== -1) {
+          topPxLength = bounds.top + bounds.height/2 - hotSpotSpecs.middle +
+                        scrollTop;
+        } else { console.log(hotSpot.position + ' is an invalid position hotSpot position') };
+
+        return topPxLength;
+      }
+
+      function calcualteHotSpotOffsetLeft(bounds) {
+        var leftPositions   = ['top-left', 'left', 'bottom-left'];
+        var rightPositions  = ['top-right', 'right', 'bottom-right'];
+        var middlePositions = ['middle', 'top', 'bottom'];
+        var scrollLeft = (window.pageXOffset !== undefined) ?
+                          window.pageXOffset : (document.documentElement ||
+                                                document.body.parentNode ||
+                                                document.body).scrollLeft;
+
+        if (leftPositions.indexOf(hotSpot.position) !== -1) {
+          return bounds.left - hotSpotSpecs.middle + scrollLeft;
+        } else if (rightPositions.indexOf(hotSpot.position) !== -1) {
+          return bounds.left + bounds.width - hotSpotSpecs.middle + scrollLeft;
+        } else if (middlePositions.indexOf(hotSpot.position) !== -1) {
+          return bounds.left + bounds.width/2 - hotSpotSpecs.middle + scrollLeft;
+        } else { console.log(hotSpot.position + ' is an invalid hotSpot position') };
+      }
+
+      function addHotSpotListener(hotSpotNode){
+        hotSpotNode.addEventListener('click', function(){
+          storeThatTipHasBeenSeen();
+          showTipCard();
+          hotSpot.hide();
+        })
+      }
+
+      function storeThatTipHasBeenSeen(){
+        storageDevice.addTip(hotSpot.tipName);
+      }
+
+      function showTipCard(){
+        hotSpot.tipCard.show();
+      }
+
+      return hotSpot
+    }
+
+    //
+    //
+    // TIP CARD
+    //
+    //
+    function TipCard(tipNode, tip) {
+      var tipCard = {};
+      tipCard.tip = tip;
+      tipCard.tipNode = tipNode;
+      tipCard.content = JSON.parse(tipNode.getAttribute('data-tips-content'));
+      tipCard.position = tip.cardPosition;
+      tipCard.cardNode = createCardNode();
+      tipCard.scritNode = createScritNode();
+
+      tipCard.show = function(){
+        this.cardNode.style.display = '';
+        this.scritNode.style.display = '';
+
+        // Highlight the tip node
+        // For z-index to work the tipNode must have a positon in the following:
+        // ['absolute', 'relative', 'fixed']
+        this.tipNode.style.zIndex = 9999;
+      };
+
+      tipCard.hide = function(){
+        this.cardNode.style.display = 'none';
+        this.scritNode.style.display = 'none';
+        this.tipNode.style.zIndex = 0;
+        Tips.showNextTip();
+      }
+
+      // Private functions
+
+      function createCardNode(){
+        var bounds = tipCard.tipNode.getBoundingClientRect();
+        var cardNode = document.createElement('div');
+        cardNode.className = 'tips-card tips-card-' + tipCard.position;
+        cardNode.appendChild(createContent());
+        cardNode.appendChild(createOptOut())
+        cardNode.style.display = 'none';
+        cardNode.style.position = 'absolute';
+        cardNode.style.width = tip.width + 'px';
+        cardNode.style.left = calculateOffsetLeft(bounds, cardNode);
+        cardNode.style.top = calculateOffsetTop(bounds, cardNode);
+        cardNode.style.zIndex = 9999;
+
+        document.body.appendChild(cardNode);
+        return cardNode;
+      }
+
+      function createContent(){
+        var pageCount = tip.pages
+        var content = document.createElement('div')
+        content.className = 'tips-content-wrapper'
+
+        for(var i = 1; i <= pageCount; i++){
+          var lastPage = false;
+
+          if(i == pageCount) lastPage = true;
+
+          content.appendChild(createPage(i, lastPage))
+        }
+
+        return content
+      }
+
+      function createPage(pageNumber, lastPage){
+        var page = document.createElement('div')
+
+        if (pageNumber === 1) {
+          page.className = 'tips-content-page-' + pageNumber +
+                            ' tips-last-page-' + lastPage + ' tips-active-tip' +
+                            ' tips-page';
+        } else {
+          page.className = 'tips-content-page-' + pageNumber +
+                            ' tips-last-page-' + lastPage + ' tips-page';
+        }
+
+        page.innerHTML = headerHtml(pageNumber) + bodyHtml(pageNumber);
+        page.zIndex = 100 - pageNumber;
+
+        if (pageNumber !== 1) page.style.display = 'none';
+
+        page.appendChild(createNavigation(lastPage, pageNumber))
+
+        return page
+      }
+
+      function headerHtml(pageNumber) {
+        return  '<h2>' + tipCard.content['page' + pageNumber + 'Header'] +
+                '</h2>'
+      }
+
+      function bodyHtml(pageNumber) {
+        return  '<p>' + tipCard.content['page' + pageNumber + 'Body'] +
+                '</p>'
+      }
+
+      function createNavigation(lastPage, pageNumber) {
+        var wrapper = document.createElement('div')
+        wrapper.className = 'tips-navigation-wrapper'
+
+        if (tip.pages > 1) {
+          wrapper.appendChild(createNavigationalDots(pageNumber))
+        }
+
+        if (lastPage) { wrapper.appendChild(createDoneButton()) }
+        else { wrapper.appendChild(createNextButton()) }
+
+        return wrapper
+      }
+
+      function createNextButton(){
+        var wrapper = document.createElement('div');
+        wrapper.className = 'tips-btn-wrapper'
+        var btn = document.createElement('button');
+        btn.className = 'tips-btn tips-next-btn tips-green';
+        btn.textContent = 'Next';
+        addNextButtonListener(btn);
+        wrapper.appendChild(btn)
+
+        return wrapper
+      }
+
+      function addNextButtonListener(btn){
+        btn.addEventListener('click', function(e){
+          e.preventDefault();
+
+          // TODO: traversing DOM seems nasty, must be better way
+          removeClass(this.parentNode.parentNode.parentNode, 'tips-active-tip')
+          this.parentNode.parentNode.parentNode.style.display = 'none';
+
+          this.parentNode.parentNode.parentNode.nextSibling.style.display = '';
+          addClass(this.parentNode.parentNode.parentNode.nextSibling, 'tips-active-tip')
+        })
+      }
+
+      function createDoneButton() {
+        var wrapper = document.createElement('div');
+        wrapper.className = 'tips-btn-wrapper';
+        var btn = document.createElement('button')
+        btn.className = 'tips-btn tips-done-btn tips-red';
+        btn.textContent = 'Done';
+        addDoneButtonListener(btn);
+        wrapper.appendChild(btn)
+
+        return wrapper
+      }
+
+      function addDoneButtonListener(btn){
+        btn.addEventListener('click', function(){
+          tipCard.hide();
+        })
+      }
+
+      function createNavigationalDots(pageNumber){
+        var dots = document.createElement('div');
+        dots.className = 'tips-navigational-dots-wrapper'
+
+        for(var i = 1; i <= tip.pages; i++){
+          dots.appendChild(createDot(pageNumber, i))
+        }
+
+        return dots;
+      }
+
+      function createDot(parentPageNumber, pageNumber){
+        // var dot = document.createElement('div');
+        var dotClass = 'tips-navigational-dot';
+        var activeDotClass = 'tips-active-dot';
+        var dot = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+        dot.setAttribute('data-tips-page-number', pageNumber);
+
+        if(parentPageNumber == pageNumber) dot.setAttribute('class', dotClass + ' ' + activeDotClass)
+        else dot.setAttribute('class', dotClass)
+
+        dot.setAttribute('height', '6');
+        dot.setAttribute('width' ,'6');
+
+        circle.setAttribute('cx', '3');
+        circle.setAttribute('cy', '3');
+        circle.setAttribute('r', '3');
+        circle.setAttribute('fill', 'red');
+
+        dot.appendChild(circle);
+
+        addDotListener(dot)
+
+        return dot;
+      }
+
+      function addDotListener(dot){
+        dot.addEventListener('click', function(){
+          hideActiveDotsCard(dot);
+          showClickedDotsCard(dot);
+        })
+      }
+
+      function hideActiveDotsCard(dot) {
+        // TODO: YUCK!!!!! Safari doesn't support .closest
+        // Surely there must be a cleaner/safer way to find this el
+        dot.parentNode.parentNode.parentNode.style.display = 'none';
+      }
+
+      function showClickedDotsCard(dot) {
+        var pageNumber = dot.getAttribute('data-tips-page-number')
+
+        // TODO: find cleaner way to find parent el
+        var pageToShow = dot.parentNode.parentNode.parentNode.parentNode
+                            .getElementsByClassName('tips-content-page-' +
+                                                    pageNumber)[0];
+        pageToShow.style.display = '';
+      }
+
+
+      function createOptOut() {
+        var optOutWrapper = document.createElement('span');
+        var optOutLink = document.createElement('a');
+        optOutWrapper.className = 'tips-opt-out';
+        optOutWrapper.textContent = 'Seen this before?'
+        optOutLink.className = 'tips-opt-out-link'
+        optOutLink.textContent = ' Opt out of these tips.'
+        optOutLink.setAttribute('href', '#')
+        optOutWrapper.appendChild(optOutLink)
+        addOptOutListener(optOutLink)
+        return optOutWrapper
+      }
+
+      function addOptOutListener(optOutLink) {
+        optOutLink.addEventListener('click', function(e){
+          e.preventDefault();
+          storageDevice.optOut();
+          tipCard.hide();
+        })
+      };
+
+      // TODO: A tipCard should know the optimal location for its speech
+      // bubble point based on the window boundaries. For now it the speech
+      // bubble point will always be centered on the tipNode
+      function calculateOffsetLeft(bounds, cardNode){
+        // length of speech box tip
+        var pointerLength = 15;
+        var scrollLeft = (window.pageXOffset !== undefined) ?
+                          window.pageXOffset : (document.documentElement ||
+                                                document.body.parentNode ||
+                                                document.body).scrollLeft;
+        if(tipCard.position === 'right'){
+          return bounds.left + bounds.width + pointerLength +
+                  scrollLeft + 'px';
+        } else if(tipCard.position === 'left'){
+          return  bounds.left - cardNode.style.width.replace('px', '')/1 -
+                  pointerLength + scrollLeft + 'px';
+        } else if (['top', 'bottom'].indexOf(tipCard.position) !== -1){
+          return bounds.left - cardNode.style.width.replace('px', '')/2 +
+                  bounds.width/2 + scrollLeft + 'px';
+        } else {
+          console.log(tipCard.position + ' is an invalid tipCard position.')
+
+          // Same position as right as it's the default position, for now
+          return bounds.left + bounds.width + scrollLeft + 'px';
+        }
+      };
+
+      function calculateOffsetTop(bounds, cardNode){
+        var pointerLength = 15;
+        var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset :
+                          (document.documentElement ||
+                          document.body.parentNode || document.body).scrollTop;
+
+        if(['right', 'left'].indexOf(tipCard.position) !== -1){
+          return  bounds.top + bounds.height/2 - tip.height/2 + scrollTop + 'px';
+        } else if(tipCard.position === 'top'){
+          return bounds.top - tip.height - pointerLength + scrollTop + 'px';
+        } else if(tipCard.position === 'bottom'){
+          return  bounds.top + bounds.height + pointerLength + scrollTop + 'px';
+        } else {
+          // Same position as right as it's the default position, for now
+          return  bounds.top - bounds.height/2 +
+                  tip.height/2 + scrollTop + 'px';
+        }
+      };
+
+      function createScritNode(){
+        var scritNode = document.createElement('div')
+        scritNode.className = 'shadow';
+        scritNode.style.height = '100%';
+        scritNode.style.width = '100%';
+        scritNode.style.zIndex = 9998;
+        scritNode.style.backgroundColor = 'rgb(95, 95, 95)';
+        scritNode.style.opacity = '0.5';
+        scritNode.style.position = 'fixed';
+        scritNode.style.left = '0px';
+        scritNode.style.top = '0px';
+        scritNode.style.display = 'none';
+
+        addScritNodeListener(scritNode);
+
+        document.body.appendChild(scritNode)
+        return scritNode
+      }
+
+      function addScritNodeListener(scritNode){
+        scritNode.addEventListener('click',function(){
+          tipCard.hide();
+        })
+      }
+
+      return tipCard;
+    }
+
+    // Helper functions
+
+    function addClass(node, className) {
+      node.className = node.className + ' ' + className;
+    }
+
+    function removeClass(node, className) {
+      node.className = node.className.replace(className, '')
+    }
+
+    // Extend String object with capitalize method
+    String.prototype.capitalize = function() {
+      return this.charAt(0).toUpperCase() + this.slice(1);
+    }
+
+    function createTips(){
+      var tipNodes = document.querySelectorAll('[data-tips-single-item]');
+
+      for(i = 0; i < tipNodes.length; ++i) {
+        var tip = new Tip(tipNodes[i])
+        Tips.list.push(tip)
+      }
+    };
+
+    // Sort list to make TipCard showing easier
+    function sortTipsList(list){
+      Tips.list.sort(function(a,b) {return a.priority - b.priority})
+    }
+
+    createTips();
+    sortTipsList();
+    Tips.showNextTip();
+
+    return Tips;
+  }
+
+  if(typeof(Tips) === 'undefined') window.Tips = initTips();
+  else console.log('Tips already defined.');
+
+  window.Tips.reset()
+
+})(window);

data/app/assets/stylesheets/tips.css

@@ -0,0 +1,279 @@
+.tips-throbber {
+  width: 58px;
+  height: 58px;
+  cursor: pointer;
+  z-index: 10;
+  background-image: url('/assets/tip_throbber.png');
+  -webkit-animation: throb .5s steps(12) alternate infinite;
+  -moz-animation: throb .5s steps(12) alternate infinite;
+  animation: throb .5s steps(12) alternate infinite;
+}
+
+@keyframes throb{
+  from{background-position:0 0}
+  to{background-position:-696px 0}
+}
+
+@-webkit-keyframes throb{
+  from{background-position:0 0}
+  to{background-position:100% 0}
+}
+
+@-moz-keyframes throb{
+  from{background-position:0 0}
+  to{background-position:-696px 0}
+}
+
+.tips-card {
+  position: relative;
+  -webkit-font-smoothing: antialiased;
+  -webkit-user-select: none;
+  box-sizing: border-box;
+  color: rgb(85, 84, 89);
+  display: block;
+  font-size: 16px;
+  min-height: 246px;
+  line-height: 20px;
+  width: 436px;
+  border: 2px solid #7F7F7F;
+  background: #FFFFFF;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  padding: 30px;
+}
+
+.tips-card, p, h2, a, li {
+  font-family: Lato, sans-serif !important;
+}
+
+.tips-card:after {
+  content: '';
+  position: absolute;
+  border-style: solid;
+  border-color: transparent #FFFFFF;
+  display: block;
+  width: 0;
+  z-index: 1;
+}
+
+.tips-card-right:after {
+  border-width: 15px 15px 15px 0;
+  left: -15px;
+  top: 118px;
+}
+
+.tips-card-left:after {
+  border-width: 15px 0 15px 15px;
+  right: -15px;
+  top: 118px;
+}
+
+.tips-card-top:after {
+  content: '';
+  position: absolute;
+  border-style: solid;
+  border-width: 15px 15px 0;
+  border-color: #FFFFFF transparent;
+  display: block;
+  width: 0;
+  z-index: 1;
+  bottom: -15px;
+  left: 228px;
+}
+
+.tips-card-bottom:after {
+  content: '';
+  position: absolute;
+  border-style: solid;
+  border-width: 0 15px 15px;
+  border-color: #FFFFFF transparent;
+  display: block;
+  width: 0;
+  z-index: 1;
+  top: -15px;
+  left: 228px;
+}
+
+.tips-card:before {
+  content: '';
+  position: absolute;
+  border-style: solid;
+  border-color: transparent #7F7F7F;
+  display: block;
+  width: 0;
+  z-index: 0;
+}
+
+.tips-card-right:before{
+  border-width: 16px 16px 16px 0;
+  left: -18px;
+  top: 117px;
+}
+
+.tips-card-left:before{
+  border-width: 16px 0 16px 16px;
+  right: -18px;
+  top: 117px;
+}
+
+.tips-card-top:before{
+  content: '';
+  position: absolute;
+  border-style: solid;
+  border-width: 16px 16px 0;
+  border-color: #7F7F7F transparent;
+  display: block;
+  width: 0;
+  z-index: 0;
+  bottom: -18px;
+  left: 227px;
+}
+
+.tips-card-bottom:before{
+  content: '';
+  position: absolute;
+  border-style: solid;
+  border-width: 0 16px 16px;
+  border-color: #7F7F7F transparent;
+  display: block;
+  width: 0;
+  z-index: 0;
+  top: -18px;
+  left: 227px;
+}
+
+.tips-card h2 {
+  margin: 0 0 10px;
+  font-size: 1.3em;
+}
+
+.tips-card p {
+  margin: 0px;
+  line-height: 20px;
+  font-size: 15px;
+  letter-spacing: 0.5px;
+  font-width: 400;
+}
+
+.tips-opt-out {
+  position: absolute;
+  right: 30px;
+  bottom: 6px;
+  font-size: 11px;
+  color: #aaaaaa
+}
+
+.tips-opt-out-link {
+  text-decoration: none;
+  color: #4A90E2
+}
+
+.tips-opt-out-link:hover{
+  background-color: inherit;
+  color: #407ABE;
+}
+
+.tips-navigational-dots-wrapper {
+  position: relative;
+  display: inline-block;
+  margin: 0 auto;
+}
+
+.tips-navigational-dot {
+  padding: 0 5px;
+  height: 8px;
+  width: 8px;
+  margin: 0 auto;
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.tips-navigational-dot circle {
+  fill: #ccc;
+}
+
+.tips-active-dot circle {
+  fill: #777777;
+}
+
+.tips-navigation-wrapper {
+  position: absolute;
+  right: 20px;
+  bottom: 40px;
+  left: 12px;
+  text-align: center;
+}
+
+.tips-btn-wrapper {
+  display: inline-block;
+  position: relative;
+  float: right;
+  bottom: 6px;
+  height: 20px;
+  width: 20px;
+}
+
+/* Ripped these buttons off */
+.tips-btn {
+  border: 0 none;
+  border-radius: 4px;
+  color: #FFFFFF;
+  cursor: pointer;
+  position: absolute;
+  right: 10px;
+  display: inline-block;
+  font-family: Lato,sans-serif;
+  font-size: 13px;
+  font-weight: bold;
+  line-height: 16px;
+  margin-bottom: 0;
+  padding: 6px 17px;
+  text-transform: none;
+  transition: all 0.3s ease 0s;
+  -moz-transition: all 0.3s ease 0s;
+  -webkit-transition: all 0.3s ease 0s;
+  text-align: center; /* DELETE WHEN WIDTH AUTO */
+}
+
+.tips-btn.tips-dark {
+  background: none repeat scroll 0 0 #444444;
+}
+
+.tips-btn.tips-dark:hover {
+  background: none repeat scroll 0 0 #2DB6CF;
+}
+
+.tips-btn.tips-light {
+  background: none repeat scroll 0 0 #999999;
+}
+
+.tips-btn.tips-light:hover {
+  background: none repeat scroll 0 0 #444444;
+}
+
+.tips-btn.tips-green {
+  background: none repeat scroll 0 0 #46b98a;
+}
+
+.tips-btn.tips-green:hover {
+  background: none repeat scroll 0 0 #444444;
+}
+
+.tips-btn.tips-blue {
+  background: none repeat scroll 0 0 #2DB6CF;
+}
+
+.tips-btn.tips-blue:hover {
+  background: none repeat scroll 0 0 #444444;
+}
+
+.tips-btn.tips-red {
+  background: none repeat scroll 0 0 #E0645C;
+}
+
+.tips-btn.tips-red:hover {
+  background: none repeat scroll 0 0 #999999;
+}

data/lib/tips/engine.rb

@@ -0,0 +1,4 @@
+module Tips
+  class Engine < Rails::Engine
+  end
+end

data/lib/tips/version.rb

@@ -0,0 +1,3 @@
+module Tips
+  VERSION = "0.0.2"
+end

data/lib/tips.rb

@@ -0,0 +1,6 @@
+require "tips/version"
+require "tips/engine"
+
+module Tips
+  # Your code goes here...
+end

data/tips.gemspec

@@ -0,0 +1,23 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'tips/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "tips"
+  spec.version       = Tips::VERSION
+  spec.authors       = ["Ryan Guerrettaz"]
+  spec.email         = ["rguerrettaz@yahoo.com"]
+  spec.summary       = "Slack inspired onboarding tips"
+  spec.description   = ""
+  spec.homepage      = ""
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0")
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.5"
+  spec.add_development_dependency "rake"
+end

metadata

@@ -0,0 +1,84 @@
+--- !ruby/object:Gem::Specification
+name: tips
+version: !ruby/object:Gem::Version
+  version: 0.0.2
+platform: ruby
+authors:
+- Ryan Guerrettaz
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-04-24 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.5'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.5'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+description: ''
+email:
+- rguerrettaz@yahoo.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- app/assets/images/tip_throbber.png
+- app/assets/javascripts/tips.js
+- app/assets/stylesheets/tips.css
+- lib/tips.rb
+- lib/tips/engine.rb
+- lib/tips/version.rb
+- tips.gemspec
+homepage: ''
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.4.1
+signing_key: 
+specification_version: 4
+summary: Slack inspired onboarding tips
+test_files: []