tao_popover 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 513cd22e4dfdd600d2d7b1a4cdee2bd4ce03c48e
-  data.tar.gz: 5a8347aa71aa4482739a96a2fead7c16327c1831
+  metadata.gz: 487bec5ea186f4dca5a1fb96983a4fbe1e443f72
+  data.tar.gz: 8583a156bf5b8e093b97b65a1209a564f8f72b74
 SHA512:
-  metadata.gz: 3487b4c73d392d506c30b334bb46cc8570013c574838aec8c3df0234fe9d44f6974ddc2c8972d254da45b6dca7babbe55e80835602c7cce2af56c733cfb11070
-  data.tar.gz: 4810ef0067dca4fcf8e61088e88160d187b805a4638aab0349274cb84e3729afdba01a6fc854ced28ca18e33f9583ec949e21a0027daeddcf593e5f5428d30f8
+  metadata.gz: be6afa3951ada513f9e70bcc09507f14782cbf696f42c5020f4e0b96b5a93748171a629b65888acb8390489d176f69f54c60924314f961db681cb3523928211b
+  data.tar.gz: b972d4fd14cca6181230a4a7803e82591cf57e5f72d10bd01f9f45ed56cf8cd1be8d3c0d2f761f02288d68a9b7426a06e66f23338bf6bddd104b84b620b286ec

data/.blade.yml

@@ -5,9 +5,6 @@ load_paths:
   - turbolinks-source: lib/assets/javascripts
   - jquery-rails: vendor/assets/javascripts
   - lodash-rails: vendor/assets/javascripts
-  - normalize-rails:
-    - vendor/assets/javascripts
-    - vendor/assets/stylesheets
   - tao_on_rails:
     - lib/assets/javascripts
     - lib/assets/stylesheets
@@ -28,3 +25,23 @@ build:
     - tao_popover.css
     - tao_popover.js
   path: dist
+
+plugins:
+  sauce_labs:
+    tunnel_timeout: 120
+    browsers:
+      Google Chrome:
+        os: Mac, Windows
+        version: -2
+      Firefox:
+        os: Mac, Windows
+        version: -2
+      Safari:
+        platform: Mac
+        version: -3
+      Microsoft Edge:
+        version: -2
+      iPhone:
+        version: [9.3]
+      Motorola Droid 4 Emulator:
+        version: [5.1, 4.4]

data/.gitignore

@@ -7,3 +7,4 @@
 /pkg/
 /spec/reports/
 /tmp/
+*.gem

data/.travis.yml

@@ -0,0 +1,10 @@
+sudo: false
+language: ruby
+cache: bundler
+rvm:
+  - 2.3.1
+
+before_install: gem install bundler -v 1.13.1
+
+script:
+  - bundle exec blade ci

data/README.md

@@ -1,4 +1,4 @@
-# TaoPopover
+# TaoPopover [![Build Status](https://travis-ci.org/mycolorway/tao_popover.svg?branch=master)](https://travis-ci.org/mycolorway/tao_popover)
 
 A popover component based on [Tao on Rails](https://github.com/mycolorway/tao_on_rails).
 
@@ -30,7 +30,7 @@ To install this gem onto your local machine, run `bundle exec rake install`. To
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/tao_popover. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+Bug reports and pull requests are welcome on GitHub at https://github.com/mycolorway/tao_popover. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
 
 
 ## License

data/dist/tao.js

@@ -31002,6 +31002,10 @@ var Deferred = void 0;
 
       _Class.observedAttributes = [];
 
+      _Class.get('jq', function() {
+        return $(this);
+      });
+
       _Class.prototype.connectedCallback = function() {
         if (!this.initialized) {
           this.classList.add('tao-component');

data/dist/tao_popover.css

@@ -84,3 +84,6 @@ tao-popover {
   tao-popover[direction='top-center'] .tao-popover-arrow, tao-popover[direction='bottom-center'] .tao-popover-arrow {
     left: 50%;
     margin-left: -8px; }
+
+tao-popover-trigger {
+  display: inline-block; }

data/dist/tao_popover.js

@@ -88,7 +88,7 @@
       return Position.__super__.constructor.apply(this, arguments);
     }
 
-    Position.property('direction');
+    Position.property('direction', 'popover', 'target');
 
     Position.property('arrowAlign', {
       "default": 'center'
@@ -107,9 +107,6 @@
     Position.prototype._init = function() {
       this.top = 0;
       this.left = 0;
-      this.target = this.direction.target;
-      this.popover = this.direction.popover;
-      this.directions = this.direction.directions;
       this._setPosition();
       this._setArrowAlign();
       return this._setOffset();
@@ -126,7 +123,7 @@
       $arrow = this.popover.find('.tao-popover-arrow');
       arrowWidth = $arrow.outerWidth();
       arrowHeight = $arrow.outerHeight();
-      switch (this.directions[0]) {
+      switch (this.direction[0]) {
         case 'left':
           this.left = targetOffset.left - popoverWidth - arrowWidth - parentOffset.left;
           break;
@@ -139,7 +136,7 @@
         case 'bottom':
           this.top = targetOffset.top + targetHeight + arrowHeight - parentOffset.top;
       }
-      switch (this.directions[1]) {
+      switch (this.direction[1]) {
         case 'top':
           return this.top = targetOffset.top - popoverHeight + targetHeight / 2 + arrowHeight / 2 + this.ARROW_OFFSET - parentOffset.top;
         case 'bottom':
@@ -156,7 +153,7 @@
     };
 
     Position.prototype._setArrowAlign = function() {
-      if (/top|bottom/.test(this.directions[0])) {
+      if (/top|bottom/.test(this.direction[0])) {
         switch (this.arrowAlign) {
           case 'left':
             this.left -= this.target.width() / 2;
@@ -165,7 +162,7 @@
             this.left += this.target.width() / 2;
         }
       }
-      if (/left|right/.test(this.directions[0])) {
+      if (/left|right/.test(this.direction[0])) {
         switch (this.arrowVerticalAlign) {
           case 'top':
             return this.top -= this.target.height() / 2;
@@ -179,7 +176,7 @@
       if (!this.offset) {
         return;
       }
-      switch (this.directions[0]) {
+      switch (this.direction[0]) {
         case 'top':
           return this.top -= this.offset;
         case 'bottom':
@@ -203,71 +200,67 @@
 
   Direction = TaoPopover.Direction, Position = TaoPopover.Position;
 
-  TaoPopover.Component = (function(superClass) {
-    extend(Component, superClass);
+  TaoPopover.Element = (function(superClass) {
+    extend(Element, superClass);
 
-    function Component() {
-      return Component.__super__.constructor.apply(this, arguments);
+    function Element() {
+      return Element.__super__.constructor.apply(this, arguments);
     }
 
-    Component.tag = 'tao-popover';
+    Element.tag = 'tao-popover';
 
-    Component.count = 0;
+    Element.count = 0;
 
-    Component.property('active', 'targetSelector', 'targetTraversal', 'boundarySelector', 'direction', 'arrowAlign', 'arrowVerticalAlign', {
+    Element.property('active', 'targetSelector', 'targetTraversal', 'boundarySelector', 'direction', 'arrowAlign', 'arrowVerticalAlign', {
       observe: true
     });
 
-    Component.property('offset', {
+    Element.property('offset', {
       observe: true,
       "default": 5
     });
 
-    Component.property('autoHide', {
+    Element.property('autoHide', {
       "default": true
     });
 
-    Component.prototype._init = function() {
+    Element.prototype._init = function() {
       this.id || (this.id = "tao-popover-" + (++this.constructor.count));
-      return this._render;
+      return this._render();
     };
 
-    Component.prototype._render = function() {
-      return $(this).wrapInner('<div class="tao-popover-content">').append('<div class="tao-popover-arrow">\n  <i class="arrow arrow-shadow"></i>\n  <i class="arrow arrow-border"></i>\n  <i class="arrow arrow-basic"></i>\n</div>');
+    Element.prototype._render = function() {
+      return this.jq.wrapInner('<div class="tao-popover-content">').append('<div class="tao-popover-arrow">\n  <i class="arrow arrow-shadow"></i>\n  <i class="arrow arrow-border"></i>\n  <i class="arrow arrow-basic"></i>\n</div>');
     };
 
-    Component.prototype._connect = function() {
-      this._render();
+    Element.prototype._connect = function() {
       this._autoHideChanged();
-      return this.refresh();
-    };
-
-    Component.prototype.attributeChangedCallback = function() {
-      if (this._refreshing) {
-        return;
+      if (this.active) {
+        return this.refresh();
       }
-      Component.__super__.attributeChangedCallback.apply(this, arguments);
-      return this.refresh();
     };
 
-    Component.prototype._activeChanged = function() {
-      if (this.autoHide) {
-        if (this.active) {
+    Element.prototype._activeChanged = function() {
+      if (this.active) {
+        this.refresh();
+        if (this.autoHide) {
           return this._enableAutoHide();
-        } else {
+        }
+      } else {
+        if (this.autoHide) {
           return this._disableAutoHide();
         }
       }
     };
 
-    Component.prototype._autoHideChanged = function() {
+    Element.prototype._autoHideChanged = function() {
       this._disableAutoHide();
       if (this.autoHide && this.active) {
         return this._enableAutoHide();
       }
     };
 
-    Component.prototype._enableAutoHide = function() {
+    Element.prototype._enableAutoHide = function() {
       return $(document).on("mousedown." + this.id, (function(_this) {
         return function(e) {
           var target;
@@ -275,7 +268,7 @@
             return;
           }
           target = $(e.target);
-          if (target.is(_this.target) || $(_this).has(target).length || target.is(_this)) {
+          if (target.is(_this.target) || _this.jq.has(target).length || target.is(_this)) {
             return;
           }
           return _this.active = false;
@@ -283,49 +276,49 @@
       })(this));
     };
 
-    Component.prototype._disableAutoHide = function() {
+    Element.prototype._disableAutoHide = function() {
       return $(document).off("mousedown." + this.id);
     };
 
-    Component.prototype.refresh = function() {
+    Element.prototype.refresh = function() {
       var base, direction, name;
-      this.target = this.targetTraversal ? typeof (base = $(this))[name = this.targetTraversal] === "function" ? base[name](this.targetSelector) : void 0 : $(this.targetSelector);
-      if (!(this.target.length > 0)) {
+      this.target = this.targetTraversal && this.targetSelector ? typeof (base = this.jq)[name = this.targetTraversal] === "function" ? base[name](this.targetSelector) : void 0 : this.targetSelector ? $(this.targetSelector) : void 0;
+      if (!(this.target && this.target.length > 0)) {
         return;
       }
-      this._refreshing = true;
       direction = new Direction({
-        popover: $(this),
+        popover: this.jq,
         target: this.target,
         boundarySelector: this.boundarySelector
       });
       this.direction = direction.toString();
       this.position = new Position({
-        direction: direction,
+        popover: this.jq,
+        target: this.target,
+        direction: this.direction.split('-'),
         arrowAlign: this.arrowAlign,
         arrowVerticalAlign: this.arrowVerticalAlign,
         offset: this.offset
       });
-      $(this).css({
+      return this.jq.css({
         top: this.position.top,
         left: this.position.left
       });
-      return this._refreshing = false;
     };
 
-    Component.prototype.toggleActive = function() {
+    Element.prototype.toggleActive = function() {
       return this.active = !this.active;
     };
 
-    Component.prototype._disconnect = function() {
+    Element.prototype._disconnect = function() {
       return this._disableAutoHide();
     };
 
-    return Component;
+    return Element;
 
   })(TaoComponent);
 
-  TaoComponent.register(TaoPopover.Component);
+  TaoComponent.register(TaoPopover.Element);
 
 }).call(this);
 (function() {
@@ -355,11 +348,13 @@
       if (this._popover != null) {
         return this._popover;
       }
-      this._popover = $(this).children('tao-popover').get(0);
+      this._popover = this.jq.children('tao-popover').get(0);
       this._popover.active = false;
       this._popover.autoHide = this.triggerAction === 'click';
       if (!this._popover.targetSelector) {
         this._popover.targetSelector = '*';
+      }
+      if (!this._popover.targetTraversal) {
         this._popover.targetTraversal = 'prev';
       }
       return this._popover;

data/index.html

@@ -39,6 +39,12 @@
       bottom: 20px;
 			right: 20px;
 		}
+
+		.wrapper tao-popover-trigger:nth-child(5) {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+		}
 	</style>
 
 	<script type="text/javascript" src="dist/tao.js"></script>
@@ -46,7 +52,7 @@
 
 </head>
 <body>
-	<div class="wrapper">
+  <div class="wrapper">
     <tao-popover-trigger>
       <a href="javascript:;">click me</a>
       <tao-popover boundary-selector=".wrapper">
@@ -69,14 +75,21 @@
     </tao-popover-trigger>
 
     <tao-popover-trigger trigger-action="hover">
+      <a href="javascript:;">hover me</a>
+      <tao-popover boundary-selector=".wrapper">
+        lalala
+      </tao-popover>
+    </tao-popover-trigger>
+
+    <tao-popover-trigger trigger-action="click">
       <tao-popover boundary-selector=".wrapper" target-traversal="next" target-selector="button">
         <ul>
           <li>hahaha</li>
           <li>lalala</li>
         </ul>
       </tao-popover>
-      <button>hover me</button>
+      <button>click me</button>
     </tao-popover-trigger>
-	</div>
+  </div>
 </body>
 </html>

data/lib/assets/javascripts/tao_popover/{component.coffee → element.coffee}

@@ -3,7 +3,7 @@
 
 {Direction, Position} = TaoPopover
 
-class TaoPopover.Component extends TaoComponent
+class TaoPopover.Element extends TaoComponent
 
   @tag: 'tao-popover'
 
@@ -17,10 +17,10 @@ class TaoPopover.Component extends TaoComponent
 
   _init: ->
     @id ||= "tao-popover-#{++@constructor.count}"
-    @_render
+    @_render()
 
   _render: ->
-    $(@).wrapInner '<div class="tao-popover-content">'
+    @jq.wrapInner '<div class="tao-popover-content">'
       .append '''
         <div class="tao-popover-arrow">
           <i class="arrow arrow-shadow"></i>
@@ -30,21 +30,15 @@ class TaoPopover.Component extends TaoComponent
       '''
 
   _connect: ->
-    @_render()
     @_autoHideChanged()
-    @refresh()
-
-  attributeChangedCallback: ->
-    return if @_refreshing
-    super
-    @refresh()
+    @refresh() if @active
 
   _activeChanged: ->
-    if @autoHide
-      if @active
-        @_enableAutoHide()
-      else
-        @_disableAutoHide()
+    if @active
+      @refresh()
+      @_enableAutoHide() if @autoHide
+    else
+      @_disableAutoHide() if @autoHide
 
   _autoHideChanged: ->
     @_disableAutoHide()
@@ -54,44 +48,42 @@ class TaoPopover.Component extends TaoComponent
     $(document).on "mousedown.#{@id}", (e) =>
       return unless @active
       target = $ e.target
-      return if target.is(@target) or $(@).has(target).length or target.is(@)
+      return if target.is(@target) or @jq.has(target).length or target.is(@)
       @active = false
 
   _disableAutoHide: ->
     $(document).off "mousedown.#{@id}"
 
   refresh: ->
-    @target = if @targetTraversal
-      $(@)[@targetTraversal]?(@targetSelector)
-    else
+    @target = if @targetTraversal && @targetSelector
+      @jq[@targetTraversal]?(@targetSelector)
+    else if @targetSelector
       $ @targetSelector
 
-    return unless @target.length > 0
-    @_refreshing = true
+    return unless @target && @target.length > 0
 
     direction = new Direction
-      popover: $ @
+      popover: @jq
       target: @target
       boundarySelector: @boundarySelector
-
     @direction = direction.toString()
 
     @position = new Position
-      direction: direction
+      popover: @jq
+      target: @target
+      direction: @direction.split('-')
       arrowAlign: @arrowAlign
       arrowVerticalAlign: @arrowVerticalAlign
       offset: @offset
 
-    $(@).css
+    @jq.css
       top: @position.top
       left: @position.left
 
-    @_refreshing = false
-
   toggleActive: ->
     @active = !@active
 
   _disconnect: ->
     @_disableAutoHide()
 
-TaoComponent.register TaoPopover.Component
+TaoComponent.register TaoPopover.Element

data/lib/assets/javascripts/tao_popover/position.coffee

@@ -1,7 +1,7 @@
 
 class TaoPopover.Position extends TaoModule
 
-  @property 'direction'
+  @property 'direction', 'popover', 'target'
 
   @property 'arrowAlign', default: 'center'
 
@@ -14,9 +14,6 @@ class TaoPopover.Position extends TaoModule
   _init: ->
     @top = 0
     @left = 0
-    @target = @direction.target
-    @popover = @direction.popover
-    @directions = @direction.directions
 
     @_setPosition()
     @_setArrowAlign()
@@ -33,7 +30,7 @@ class TaoPopover.Position extends TaoModule
     arrowWidth = $arrow.outerWidth()
     arrowHeight = $arrow.outerHeight()
 
-    switch @directions[0]
+    switch @direction[0]
       when 'left'
         @left = targetOffset.left - popoverWidth - arrowWidth - parentOffset.left
       when 'right'
@@ -43,7 +40,7 @@ class TaoPopover.Position extends TaoModule
       when 'bottom'
         @top = targetOffset.top + targetHeight + arrowHeight - parentOffset.top
 
-    switch @directions[1]
+    switch @direction[1]
       when 'top'
         @top = targetOffset.top - popoverHeight + targetHeight / 2 + arrowHeight / 2 + @ARROW_OFFSET - parentOffset.top
       when 'bottom'
@@ -58,14 +55,14 @@ class TaoPopover.Position extends TaoModule
         @top = targetOffset.top + targetHeight / 2  - popoverHeight / 2 - parentOffset.top
 
   _setArrowAlign: ->
-    if /top|bottom/.test @directions[0]
+    if /top|bottom/.test @direction[0]
       switch @arrowAlign
         when 'left'
           @left -= @target.width() / 2
         when 'right'
           @left += @target.width() / 2
 
-    if /left|right/.test @directions[0]
+    if /left|right/.test @direction[0]
       switch @arrowVerticalAlign
         when 'top'
           @top -= @target.height() / 2
@@ -75,7 +72,7 @@ class TaoPopover.Position extends TaoModule
   _setOffset: ->
     return unless @offset
 
-    switch @directions[0]
+    switch @direction[0]
       when 'top'
         @top -= @offset
       when 'bottom'

data/lib/assets/javascripts/tao_popover/trigger.coffee

@@ -1,4 +1,4 @@
-#= require ./component
+#= require ./element
 
 class TaoPopover.Trigger extends TaoComponent
 
@@ -11,13 +11,12 @@ class TaoPopover.Trigger extends TaoComponent
   @get 'popover', ->
     return @_popover if @_popover?
 
-    @_popover = $(@).children('tao-popover').get(0)
+    @_popover = @jq.children('tao-popover').get(0)
     @_popover.active = false
     @_popover.autoHide = @triggerAction == 'click'
 
-    unless @_popover.targetSelector
-      @_popover.targetSelector = '*'
-      @_popover.targetTraversal = 'prev'
+    @_popover.targetSelector = '*' unless @_popover.targetSelector
+    @_popover.targetTraversal = 'prev' unless @_popover.targetTraversal
     @_popover
 
   _connect: ->

data/lib/assets/stylesheets/tao_popover.scss

@@ -174,3 +174,7 @@ tao-popover {
     }
   }
 }
+
+tao-popover-trigger {
+  display: inline-block;
+}

data/lib/tao_popover/rails/engine.rb

@@ -1,7 +1,4 @@
-require 'turbolinks'
-require 'jquery-rails'
-require 'lodash-rails'
-require 'normalize-rails'
+require 'tao_on_rails'
 
 module TaoPopover
   module Rails

data/lib/tao_popover/rails/version.rb

@@ -1,3 +1,3 @@
 module TaoPopover
-  VERSION = "0.1.0"
+  VERSION = "0.1.1"
 end

data/tao_popover.gemspec

@@ -21,10 +21,11 @@ Gem::Specification.new do |spec|
   spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
   spec.require_paths = ["lib"]
 
-  spec.add_runtime_dependency "tao_on_rails", '~> 0.4.3'
+  spec.add_runtime_dependency "tao_on_rails", '~> 0.4.4'
 
   spec.add_development_dependency "bundler", "~> 1.13"
   spec.add_development_dependency "rake", "~> 10.0"
   spec.add_development_dependency "minitest", "~> 5.0"
   spec.add_development_dependency "blade", "~> 0.7.0"
+  spec.add_development_dependency "blade-sauce_labs_plugin", "~> 0.6.2"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: tao_popover
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - farthinker
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-12-25 00:00:00.000000000 Z
+date: 2016-12-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: tao_on_rails
@@ -16,14 +16,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.4.3
+        version: 0.4.4
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.4.3
+        version: 0.4.4
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -80,6 +80,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.7.0
+- !ruby/object:Gem::Dependency
+  name: blade-sauce_labs_plugin
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.6.2
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.6.2
 description: A popover component based on Tao Framework.
 email:
 - farthinker@gmail.com
@@ -89,6 +103,7 @@ extra_rdoc_files: []
 files:
 - ".blade.yml"
 - ".gitignore"
+- ".travis.yml"
 - CODE_OF_CONDUCT.md
 - Gemfile
 - LICENSE
@@ -103,8 +118,8 @@ files:
 - dist/tao_popover.js
 - index.html
 - lib/assets/javascripts/tao_popover.coffee
-- lib/assets/javascripts/tao_popover/component.coffee
 - lib/assets/javascripts/tao_popover/direction.coffee
+- lib/assets/javascripts/tao_popover/element.coffee
 - lib/assets/javascripts/tao_popover/position.coffee
 - lib/assets/javascripts/tao_popover/trigger.coffee
 - lib/assets/stylesheets/tao_popover.scss