Skip to content

Commit

Permalink
packery tooltips!
Browse files Browse the repository at this point in the history
  • Loading branch information
@joernroeder
joernroeder committed Jun 30, 2013
1 parent 250e4ec commit e8d7b98
Show file tree
Hide file tree
Showing 4 changed files with 193 additions and 57 deletions.
81 changes: 45 additions & 36 deletions app/assets/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
83 changes: 74 additions & 9 deletions app/assets/js/plugins/packery/packerytest.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ do ($ = jQuery) ->
@factor = .3

# tooltip api
@api = {}
#@api = {}


constructor: ->
Expand Down Expand Up @@ -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

Expand All @@ -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)
Expand All @@ -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)
Expand All @@ -250,7 +299,6 @@ do ($ = jQuery) ->
, 200, () ->
$el.removeClass 'has-tooltip'
$(@).hide()

###
events:
show: (e, api) ->
Expand All @@ -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()
)


# ---------------
Expand Down
80 changes: 70 additions & 10 deletions app/assets/js/plugins/packery/packerytest.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit e8d7b98

Please sign in to comment.