mirror of
https://gitlab.com/Oreolek/salet-module.git
synced 2024-06-26 03:50:49 +03:00
New animation code WIP
This commit is contained in:
parent
a1a1469c51
commit
205d9f66db
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "salet",
|
"name": "salet",
|
||||||
"version": "1.4.15",
|
"version": "1.5.0",
|
||||||
"description": "A general client-side framework for cybertext interactive fiction games.",
|
"description": "A general client-side framework for cybertext interactive fiction games.",
|
||||||
"keywords": ["ifiction", "interactive fiction", "games", "coffee-script", "text", "menu"],
|
"keywords": ["ifiction", "interactive fiction", "games", "coffee-script", "text", "menu"],
|
||||||
"homepage": "http://salet.oreolek.ru",
|
"homepage": "http://salet.oreolek.ru",
|
||||||
|
|
|
@ -172,21 +172,11 @@ class SaletView
|
||||||
# interactive - if we're working in interactive mode (or we're loading a save)
|
# interactive - if we're working in interactive mode (or we're loading a save)
|
||||||
removeTransient: (interactive = false) ->
|
removeTransient: (interactive = false) ->
|
||||||
contentToHide = jQuery('#content .transient')
|
contentToHide = jQuery('#content .transient')
|
||||||
contentToHide.add(jQuery('#content .options'))
|
contentToHide = contentToHide.add('#content .options')
|
||||||
contentToHide.add(jQuery("#content a").filter(() ->
|
contentToHide = contentToHide.add(jQuery("#content a").filter(() ->
|
||||||
return jQuery(this).attr("href").match(/[?&]transient[=&]?/)
|
return jQuery(this).attr("href").match(/[?&]transient[=&]?/)
|
||||||
))
|
))
|
||||||
if (interactive)
|
@hideBlock(contentToHide, interactive, true)
|
||||||
contentToHide.animate({
|
|
||||||
opacity: 0,
|
|
||||||
height: 0
|
|
||||||
}, {
|
|
||||||
duration: 500,
|
|
||||||
always: () ->
|
|
||||||
jQuery(this).remove()
|
|
||||||
})
|
|
||||||
else
|
|
||||||
contentToHide.remove()
|
|
||||||
for a in jQuery('#content').find('a')
|
for a in jQuery('#content').find('a')
|
||||||
a = jQuery(a)
|
a = jQuery(a)
|
||||||
if (a.hasClass('sticky') || a.attr("href").match(/[?&]sticky[=&]?/))
|
if (a.hasClass('sticky') || a.attr("href").match(/[?&]sticky[=&]?/))
|
||||||
|
@ -242,14 +232,52 @@ class SaletView
|
||||||
jQuery(link.get(0)).click()
|
jQuery(link.get(0)).click()
|
||||||
)
|
)
|
||||||
|
|
||||||
showBlock: (selector) ->
|
# Animate.css effect to use for hiding things
|
||||||
block = document.querySelector(selector)
|
hideAnimation: "fadeOutUp"
|
||||||
if block
|
# Animate.css effect to use for showing things
|
||||||
block.style.display = "block"
|
showAnimation: "fadeInDown"
|
||||||
hideBlock: (selector) ->
|
|
||||||
block = document.querySelector(selector)
|
showBlock: (block) ->
|
||||||
if block
|
block = jQuery(block)
|
||||||
block.style.display = "none"
|
@animateBlock(block, @showAnimation, () ->
|
||||||
|
jQuery(this).removeClass("animated #{@showAnimation}")
|
||||||
|
)
|
||||||
|
|
||||||
|
# A function to play CSS animation on a block.
|
||||||
|
# Implies the effect is one-time, not infinite.
|
||||||
|
# @param block - jQuery object
|
||||||
|
# @param effect - animate.css effect to call
|
||||||
|
# @param after - a callback function to execute after the animation is done
|
||||||
|
animateBlock: (block, effect, after = false) ->
|
||||||
|
animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'
|
||||||
|
block.addClass("animated #{effect}")
|
||||||
|
block.one(animationEnd, after)
|
||||||
|
|
||||||
|
# A function to hide a block
|
||||||
|
# @param block - jQuery object or selector to hide
|
||||||
|
# @param interactive - corresponds to salet.interactive, should we play an effect or not
|
||||||
|
# @param remove - whether to remove the block from DOM afterwards
|
||||||
|
hideBlock: (block, interactive = true, remove = true) ->
|
||||||
|
block = jQuery(block)
|
||||||
|
if (interactive)
|
||||||
|
callback = false
|
||||||
|
if (remove)
|
||||||
|
callback = () ->
|
||||||
|
console.log this
|
||||||
|
jQuery(this).removeClass("animated #{@hideAnimation}")
|
||||||
|
jQuery(this).remove()
|
||||||
|
else
|
||||||
|
callback = () ->
|
||||||
|
console.log this
|
||||||
|
jQuery(this).removeClass("animated #{@hideAnimation}")
|
||||||
|
jQuery(this).css("display", "none")
|
||||||
|
@animateBlock(block, @hideAnimation, callback)
|
||||||
|
else
|
||||||
|
if (remove)
|
||||||
|
block.remove()
|
||||||
|
else
|
||||||
|
block.css("display", "none")
|
||||||
|
|
||||||
updateWays: (ways, name) ->
|
updateWays: (ways, name) ->
|
||||||
if document.getElementById("ways") == null
|
if document.getElementById("ways") == null
|
||||||
return
|
return
|
||||||
|
@ -265,6 +293,6 @@ class SaletView
|
||||||
})
|
})
|
||||||
@showBlock(".ways #ways_hint")
|
@showBlock(".ways #ways_hint")
|
||||||
else
|
else
|
||||||
@hideBlock(".ways #ways_hint")
|
@hideBlock(".ways #ways_hint", true, false)
|
||||||
cycleLink: (content) ->
|
cycleLink: (content) ->
|
||||||
return "<a href='./_replacer_cyclewriter' class='cycle' id='cyclewriter'>#{content}</a>"
|
return "<a href='./_replacer_cyclewriter' class='cycle' id='cyclewriter'>#{content}</a>"
|
||||||
|
|
Loading…
Reference in a new issue