diff --git a/app/assets/css/styles.css b/app/assets/css/styles.css index 0c8b11de..8f65216a 100644 --- a/app/assets/css/styles.css +++ b/app/assets/css/styles.css @@ -873,22 +873,25 @@ button.Zebra_DatePicker_Icon { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - -webkit-transition: margin 0.15s 1s cubic-bezier(0.825, 1.61, 0.89, 1.005) !important; - -moz-transition: margin 0.15s 1s cubic-bezier(0.825, 1.61, 0.89, 1.005) !important; - -o-transition: margin 0.15s 1s cubic-bezier(0.825, 1.61, 0.89, 1.005) !important; - -ms-transition: margin 0.15s 1s cubic-bezier(0.825, 1.61, 0.89, 1.005) !important; - transition: margin 0.15s 1s cubic-bezier(0.825, 1.61, 0.89, 1.005) !important; - -webkit-transition-property: -webkit-transition-property, margin !important; - -moz-transition-property: -webkit-transition-property, margin !important; - -o-transition-property: -webkit-transition-property, margin !important; - -ms-transition-property: -webkit-transition-property, margin !important; - transition-property: -webkit-transition-property, margin !important; + /* + -webkit-transition: margin @time @delay cubic-bezier(0.825, 1.610, 0.890, 1.005) !important; + -moz-transition: margin @time @delay cubic-bezier(0.825, 1.610, 0.890, 1.005), !important; + -o-transition: margin @time @delay cubic-bezier(0.825, 1.610, 0.890, 1.005) !important; + -ms-transition: margin @time @delay cubic-bezier(0.825, 1.610, 0.890, 1.005) !important; + transition: margin @time @delay cubic-bezier(0.825, 1.610, 0.890, 1.005) !important; + + -webkit-transition-property: -webkit-transition-property, margin !important; + -moz-transition-property: -webkit-transition-property, margin !important; + -o-transition-property: -webkit-transition-property, margin !important; + -ms-transition-property: -webkit-transition-property, margin !important; + transition-property: -webkit-transition-property, margin !important; + */ + } .packery-item > a { - background: red; + background: #e6e6e6; display: block; border: none; - background: rgba(255, 0, 0, 0.5); } .packery-item > a:hover { border: none; @@ -1429,16 +1432,20 @@ x:-o-prefocus, -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - -webkit-transition: margin 0.15s 1s cubic-bezier(0.825, 1.61, 0.89, 1.005) !important; - -moz-transition: margin 0.15s 1s cubic-bezier(0.825, 1.61, 0.89, 1.005) !important; - -o-transition: margin 0.15s 1s cubic-bezier(0.825, 1.61, 0.89, 1.005) !important; - -ms-transition: margin 0.15s 1s cubic-bezier(0.825, 1.61, 0.89, 1.005) !important; - transition: margin 0.15s 1s cubic-bezier(0.825, 1.61, 0.89, 1.005) !important; - -webkit-transition-property: -webkit-transition-property, margin !important; - -moz-transition-property: -webkit-transition-property, margin !important; - -o-transition-property: -webkit-transition-property, margin !important; - -ms-transition-property: -webkit-transition-property, margin !important; - transition-property: -webkit-transition-property, margin !important; + /* + -webkit-transition: margin @time @delay cubic-bezier(0.825, 1.610, 0.890, 1.005) !important; + -moz-transition: margin @time @delay cubic-bezier(0.825, 1.610, 0.890, 1.005), !important; + -o-transition: margin @time @delay cubic-bezier(0.825, 1.610, 0.890, 1.005) !important; + -ms-transition: margin @time @delay cubic-bezier(0.825, 1.610, 0.890, 1.005) !important; + transition: margin @time @delay cubic-bezier(0.825, 1.610, 0.890, 1.005) !important; + + -webkit-transition-property: -webkit-transition-property, margin !important; + -moz-transition-property: -webkit-transition-property, margin !important; + -o-transition-property: -webkit-transition-property, margin !important; + -ms-transition-property: -webkit-transition-property, margin !important; + transition-property: -webkit-transition-property, margin !important; + */ + position: relative; display: inline-block; -webkit-transition: opacity .2s ease-in-out; @@ -1450,10 +1457,9 @@ x:-o-prefocus, } .packery-wrapper > img > a, .packery-wrapper .packery-item > a { - background: red; + background: #e6e6e6; display: block; border: none; - background: rgba(255, 0, 0, 0.5); } .packery-wrapper > img > a:hover, .packery-wrapper .packery-item > a:hover { @@ -1790,16 +1796,20 @@ x:-o-prefocus, -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - -webkit-transition: margin 0.15s 1s cubic-bezier(0.825, 1.61, 0.89, 1.005) !important; - -moz-transition: margin 0.15s 1s cubic-bezier(0.825, 1.61, 0.89, 1.005) !important; - -o-transition: margin 0.15s 1s cubic-bezier(0.825, 1.61, 0.89, 1.005) !important; - -ms-transition: margin 0.15s 1s cubic-bezier(0.825, 1.61, 0.89, 1.005) !important; - transition: margin 0.15s 1s cubic-bezier(0.825, 1.61, 0.89, 1.005) !important; - -webkit-transition-property: -webkit-transition-property, margin !important; - -moz-transition-property: -webkit-transition-property, margin !important; - -o-transition-property: -webkit-transition-property, margin !important; - -ms-transition-property: -webkit-transition-property, margin !important; - transition-property: -webkit-transition-property, margin !important; + /* + -webkit-transition: margin @time @delay cubic-bezier(0.825, 1.610, 0.890, 1.005) !important; + -moz-transition: margin @time @delay cubic-bezier(0.825, 1.610, 0.890, 1.005), !important; + -o-transition: margin @time @delay cubic-bezier(0.825, 1.610, 0.890, 1.005) !important; + -ms-transition: margin @time @delay cubic-bezier(0.825, 1.610, 0.890, 1.005) !important; + transition: margin @time @delay cubic-bezier(0.825, 1.610, 0.890, 1.005) !important; + + -webkit-transition-property: -webkit-transition-property, margin !important; + -moz-transition-property: -webkit-transition-property, margin !important; + -o-transition-property: -webkit-transition-property, margin !important; + -ms-transition-property: -webkit-transition-property, margin !important; + transition-property: -webkit-transition-property, margin !important; + */ + position: relative; display: inline-block; -webkit-transition: opacity .2s ease-in-out; @@ -1828,10 +1838,9 @@ x:-o-prefocus, width: 100%; } .editor .overview article > a { - background: red; + background: #e6e6e6; display: block; border: none; - background: rgba(255, 0, 0, 0.5); } .editor .overview article > a:hover { border: none; diff --git a/app/assets/js/plugins/packery/packerytest.coffee b/app/assets/js/plugins/packery/packerytest.coffee index e1efd3a4..dc63541e 100644 --- a/app/assets/js/plugins/packery/packerytest.coffee +++ b/app/assets/js/plugins/packery/packerytest.coffee @@ -44,7 +44,7 @@ do ($ = jQuery) -> @factor = .3 # tooltip api - @api = {} + #@api = {} constructor: -> @@ -196,10 +196,41 @@ do ($ = jQuery) -> false - getApi: -> - @api or {} + #getApi: -> + # @api or {} _initTooltip: (el) -> + mouseOutEl = true + mouseOutTip = true + + api = {} + + showTimeout = null + hideTimeout = null + + hideTip = => + if hideTimeout + clearTimeout hideTimeout + + hideTimeout = setTimeout => + console.log mouseOutEl + console.log mouseOutTip + if mouseOutEl and mouseOutTip + $el.add(api.tooltip).off 'mouseleave.tooltip' + api.hide() + , 200 + + ### + showTip = => + if showTimeout + clearTimeout showTimeout + + showTimeout = setTimeout => + console.log 'show tip' + api.show() + , 500 + ### + $el = $ el $metaSection = $ 'section[role=tooltip-content]', $el @@ -217,14 +248,16 @@ do ($ = jQuery) -> if $metaSection.length + foo = @ $el .qtip + #prerender: true content: text: $metaSection.html() show: + delay: 500 event: 'mouseenter' - - effect: (api) -> + effect: (api) -> $el.addClass 'has-tooltip' $(@) .stop(true, true) @@ -235,12 +268,28 @@ do ($ = jQuery) -> 'margin-left': 0 'opacity': 1 , 200 + + console.log api.tooltip + if api.tooltip + $(api.tooltip).one 'mouseenter.tooltip', => + mouseOutTip = false + + $el.add(api.tooltip).one 'mouseleave.tooltip', (e) => + if $(e.target).closest('.qtip').length + mouseOutTip = true + else + mouseOutEl = true + + hideTip() + console.log 'close tooltip' + + - #effect: false + #event: false #ready: true hide: - event: 'mouseleave' + event: false effect: (api) -> $(@) .stop(true, true) @@ -250,7 +299,6 @@ do ($ = jQuery) -> , 200, () -> $el.removeClass 'has-tooltip' $(@).hide() - ### events: show: (e, api) -> @@ -273,7 +321,24 @@ do ($ = jQuery) -> x: 0 y: 10 - @api = $el.qtip 'api' + api = $el.qtip 'api' + + console.log api + ### + @api.tooltip.on('mouseenter', => + mouseOutTip = false + ) + .on('mouseleave', => + mouseOutTip = true + hideTip() + ) + ### + + $('> a', $el).on('mouseleave', => + console.log 'leave' + mouseOutEl = true + hideTip() + ) # --------------- diff --git a/app/assets/js/plugins/packery/packerytest.js b/app/assets/js/plugins/packery/packerytest.js index 3fb0a103..273fc2c3 100644 --- a/app/assets/js/plugins/packery/packerytest.js +++ b/app/assets/js/plugins/packery/packerytest.js @@ -35,8 +35,7 @@ var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments) this.started = false; this.itemDimensions = []; this.transitionDuration = '.4s'; - this.factor = .3; - return this.api = {}; + return this.factor = .3; }; function JJPackery() { @@ -214,12 +213,38 @@ var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments) return false; }; - JJPackery.prototype.getApi = function() { - return this.api || {}; - }; - JJPackery.prototype._initTooltip = function(el) { - var $el, $metaSection, getMargin, marginOffset; + var $el, $metaSection, api, foo, getMargin, hideTimeout, hideTip, marginOffset, mouseOutEl, mouseOutTip, showTimeout, + _this = this; + + mouseOutEl = true; + mouseOutTip = true; + api = {}; + showTimeout = null; + hideTimeout = null; + hideTip = function() { + if (hideTimeout) { + clearTimeout(hideTimeout); + } + return hideTimeout = setTimeout(function() { + console.log(mouseOutEl); + console.log(mouseOutTip); + if (mouseOutEl && mouseOutTip) { + $el.add(api.tooltip).off('mouseleave.tooltip'); + return api.hide(); + } + }, 200); + }; + /* + showTip = => + if showTimeout + clearTimeout showTimeout + + showTimeout = setTimeout => + console.log 'show tip' + api.show() + , 500 + */ $el = $(el); $metaSection = $('section[role=tooltip-content]', $el); @@ -236,24 +261,43 @@ var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments) return margin; }; if ($metaSection.length) { + foo = this; $el.qtip({ content: { text: $metaSection.html() }, show: { + delay: 500, event: 'mouseenter', effect: function(api) { + var _this = this; + $el.addClass('has-tooltip'); - return $(this).stop(true, true).css({ + $(this).stop(true, true).css({ 'margin-left': getMargin(api) }).show().animate({ 'margin-left': 0, 'opacity': 1 }, 200); + console.log(api.tooltip); + if (api.tooltip) { + $(api.tooltip).one('mouseenter.tooltip', function() { + return mouseOutTip = false; + }); + } + return $el.add(api.tooltip).one('mouseleave.tooltip', function(e) { + if ($(e.target).closest('.qtip').length) { + mouseOutTip = true; + } else { + mouseOutEl = true; + } + hideTip(); + return console.log('close tooltip'); + }); } }, hide: { - event: 'mouseleave', + event: false, effect: function(api) { return $(this).stop(true, true).animate({ 'margin-left': getMargin(api), @@ -288,7 +332,23 @@ var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments) } } }); - return this.api = $el.qtip('api'); + api = $el.qtip('api'); + console.log(api); + /* + @api.tooltip.on('mouseenter', => + mouseOutTip = false + ) + .on('mouseleave', => + mouseOutTip = true + hideTip() + ) + */ + + return $('> a', $el).on('mouseleave', function() { + console.log('leave'); + mouseOutEl = true; + return hideTip(); + }); } }; diff --git a/dummies/less/packery.less b/dummies/less/packery.less index cf25f5e8..39e20350 100644 --- a/dummies/less/packery.less +++ b/dummies/less/packery.less @@ -138,6 +138,7 @@ //.transition-property(-webkit-transition-property, margin) !important; @time: 0.15s; @delay: 1s; + /* -webkit-transition: margin @time @delay cubic-bezier(0.825, 1.610, 0.890, 1.005) !important; -moz-transition: margin @time @delay cubic-bezier(0.825, 1.610, 0.890, 1.005), !important; -o-transition: margin @time @delay cubic-bezier(0.825, 1.610, 0.890, 1.005) !important; @@ -149,12 +150,13 @@ -o-transition-property: -webkit-transition-property, margin !important; -ms-transition-property: -webkit-transition-property, margin !important; transition-property: -webkit-transition-property, margin !important; + */ &> a { - background: red; + background: @bgColor; display: block; border: none; - background: rgba(255,0,0,.5); + //background: rgba(255,0,0,.5); &:hover { border: none;