Last active
April 4, 2021 11:19
-
-
Save sonnm/fcaaf616e62cc46e8756599306f4e1ad to your computer and use it in GitHub Desktop.
jquery.pleasestay.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1. Download | |
2. Online Store -> Themes -> Edit Code | |
3. Assets -> Add a new asset -> Upload: jquery.pleasestay.js | |
4. Sửa Layout -> theme.liquid -> Thêm vào trước </body>: | |
{{ 'jquery.pleasestay.js' | asset_url | script_tag }} | |
<script> | |
$(function () { | |
$.pleaseStay({ | |
messages: ["We miss you...", "Come back to us!"], | |
favicon: "https://cdn.jsdelivr.net/emojione/assets/png/1f622.png", | |
speed: 1, | |
delay: 3 | |
}); | |
}); | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! | |
* jQuery Please Stay Plugin | |
* (c) SonNM | |
*/ | |
;(function ($) { | |
$.pleaseStay = function (options) { | |
var opts = $.extend({}, $.pleaseStay.defaults, options), | |
timer = null, | |
animationTimer = null, | |
messageIndex = 0, | |
originalTitle = document.title, | |
favicon = $('head').find('link[rel$="icon"]'), | |
originalFavicon = favicon.attr("href"); | |
if (opts.messages.length > 0) { | |
_start(); | |
} | |
if (opts.favicon !== undefined) { | |
_preload(); | |
} | |
function _start() { | |
timer = null; | |
$(document).bind("visibilitychange", function () { | |
if ($(document).prop('hidden')) _blur(); | |
else _focus(); | |
}); | |
} | |
function _blinking() { | |
document.title = opts.messages[messageIndex]; | |
if (messageIndex < opts.messages.length - 1) messageIndex++; | |
else messageIndex = 0; | |
animationTimer = setTimeout(function () { | |
_blinking(); | |
}, opts.speed * 1000); | |
} | |
function _blur() { | |
messageIndex = 0; | |
timer = setTimeout(function () { | |
_blinking(); | |
favicon.attr("href", opts.favicon); | |
clearInterval(timer); | |
}, opts.delay * 1000); | |
} | |
function _focus() { | |
document.title = originalTitle; | |
favicon.attr("href", originalFavicon); | |
clearInterval(timer); | |
clearInterval(animationTimer); | |
} | |
function _preload() { | |
$('<img/>')[0].src = opts.favicon; | |
} | |
}; | |
$.pleaseStay.defaults = { | |
messages: [document.title], | |
speed: 1, | |
delay: 3 | |
}; | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is used on Mikkeller's website, very cool :)