From d0534953b7816295cdf67fa8d7005dffaae9020b Mon Sep 17 00:00:00 2001 From: carl sednaoui Date: Mon, 20 Jan 2014 20:51:34 -0500 Subject: [PATCH] Refactor as a jQuery plugin --- deprecated/_deprecated_ouibounce.js | 68 -------- example/index.html | 31 ---- example/ouibounce.min.js | 1 - source/modal.html | 13 -- source/ouibounce.js | 256 +--------------------------- source/ouibounce.min.js | 1 - test/index.html | 24 +++ {example => test}/main.css | 6 +- 8 files changed, 35 insertions(+), 365 deletions(-) delete mode 100644 deprecated/_deprecated_ouibounce.js delete mode 100644 example/index.html delete mode 100644 example/ouibounce.min.js delete mode 100644 source/modal.html delete mode 100644 source/ouibounce.min.js create mode 100644 test/index.html rename {example => test}/main.css (54%) diff --git a/deprecated/_deprecated_ouibounce.js b/deprecated/_deprecated_ouibounce.js deleted file mode 100644 index 315264f..0000000 --- a/deprecated/_deprecated_ouibounce.js +++ /dev/null @@ -1,68 +0,0 @@ -(function ouibounce() { - var direction = null, - lastY = null, - triggered = false, - windowHeight = window.innerHeight, - lastTime = new Date().getTime(); - scrolling = false; - - //- display modal or alert message - function showModal(text) { - if (triggered === false) { - console.log(text); - alert(text); - triggered = true; - } - } - - $('html').on('mousemove', function(event) { - //- ensure mouse is going up - if (event.pageY < lastY) { - direction = 'up'; - } else { - direction = null; - } - - //- check if mouse is passing top 10px - //- relative to the current window position - //- ensure that mouse is moving upwards - if (event.pageY < (document.body.scrollTop + 10) && direction == 'up') { - showModal('passed top 10'); - } - - //- make sure user is moving mouse - //- not just scrolling - window.onscroll = function(event) { - scrolling = true; - }; - - //- check if mouse is intending to exit by calculating - //- mouse velocity and comparing it to browser size. - //- the "125" is arbitrary and provided good results locally. - var now = new Date().getTime(), - time = now - lastTime; - distance = lastY - event.pageY; - - var velocity = distance / time; - - if (direction == "up" - && velocity > (windowHeight / 125) - && scrolling === false) { - showModal('mouse is moving fast ' + velocity); - } - - //- update mouse position - //- reset scrolling - //- update lastTime - lastY = event.pageY; - scrolling = false; - lastTime = now; - }); -})(); - -// Old -// if (Math.abs(lastY - event.pageY) > 45 -// && direction == 'up' -// && scrolling === false) { -// showModal('mouse is moving fast'); -// } \ No newline at end of file diff --git a/example/index.html b/example/index.html deleted file mode 100644 index 193c2ce..0000000 --- a/example/index.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - Carl's Sandbox - - - - - - - - -

Try leaving this page

-

This is the sandbox, where we sell boxes of sand.

- - - - - - diff --git a/example/ouibounce.min.js b/example/ouibounce.min.js deleted file mode 100644 index 52eb994..0000000 --- a/example/ouibounce.min.js +++ /dev/null @@ -1 +0,0 @@ -$(document).ready(function(){(function(){$("html").on("mouseout.ouibounce",function(){function e(){$("#ouibounce-modal").modal()}return function(t){if(!(t.clientY<20))return;e();$("html").off("mouseout.ouibounce")}}())})();$("head").prepend('');+function(e){"use strict";var t=function(t,n){this.options=n;this.$element=e(t);this.$backdrop=this.isShown=null;if(this.options.remote)this.$element.load(this.options.remote)};t.DEFAULTS={backdrop:true,keyboard:true,show:true};t.prototype.toggle=function(e){return this[!this.isShown?"show":"hide"](e)};t.prototype.show=function(t){var n=this;var r=e.Event("show.bs.modal",{relatedTarget:t});this.$element.trigger(r);if(this.isShown||r.isDefaultPrevented())return;this.isShown=true;this.escape();this.$element.on("click.dismiss.modal",'[data-dismiss="modal"]',e.proxy(this.hide,this));this.backdrop(function(){var r=e.support.transition&&n.$element.hasClass("fade");if(!n.$element.parent().length){n.$element.appendTo(document.body)}n.$element.show();if(r){n.$element[0].offsetWidth}n.$element.addClass("in").attr("aria-hidden",false);n.enforceFocus();var i=e.Event("shown.bs.modal",{relatedTarget:t});r?n.$element.find(".modal-dialog").one(e.support.transition.end,function(){n.$element.focus().trigger(i)}).emulateTransitionEnd(300):n.$element.focus().trigger(i)})};t.prototype.hide=function(t){if(t)t.preventDefault();t=e.Event("hide.bs.modal");this.$element.trigger(t);if(!this.isShown||t.isDefaultPrevented())return;this.isShown=false;this.escape();e(document).off("focusin.bs.modal");this.$element.removeClass("in").attr("aria-hidden",true).off("click.dismiss.modal");e.support.transition&&this.$element.hasClass("fade")?this.$element.one(e.support.transition.end,e.proxy(this.hideModal,this)).emulateTransitionEnd(300):this.hideModal()};t.prototype.enforceFocus=function(){e(document).off("focusin.bs.modal").on("focusin.bs.modal",e.proxy(function(e){if(this.$element[0]!==e.target&&!this.$element.has(e.target).length){this.$element.focus()}},this))};t.prototype.escape=function(){if(this.isShown&&this.options.keyboard){this.$element.on("keyup.dismiss.bs.modal",e.proxy(function(e){e.which==27&&this.hide()},this))}else if(!this.isShown){this.$element.off("keyup.dismiss.bs.modal")}};t.prototype.hideModal=function(){var e=this;this.$element.hide();this.backdrop(function(){e.removeBackdrop();e.$element.trigger("hidden.bs.modal")})};t.prototype.removeBackdrop=function(){this.$backdrop&&this.$backdrop.remove();this.$backdrop=null};t.prototype.backdrop=function(t){var n=this;var r=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var i=e.support.transition&&r;this.$backdrop=e('
').appendTo(document.body);this.$element.on("click.dismiss.modal",e.proxy(function(e){if(e.target!==e.currentTarget)return;this.options.backdrop=="static"?this.$element[0].focus.call(this.$element[0]):this.hide.call(this)},this));if(i)this.$backdrop[0].offsetWidth;this.$backdrop.addClass("in");if(!t)return;i?this.$backdrop.one(e.support.transition.end,t).emulateTransitionEnd(150):t()}else if(!this.isShown&&this.$backdrop){this.$backdrop.removeClass("in");e.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(e.support.transition.end,t).emulateTransitionEnd(150):t()}else if(t){t()}};var n=e.fn.modal;e.fn.modal=function(n,r){return this.each(function(){var i=e(this);var s=i.data("bs.modal");var o=e.extend({},t.DEFAULTS,i.data(),typeof n=="object"&&n);if(!s)i.data("bs.modal",s=new t(this,o));if(typeof n=="string")s[n](r);else if(o.show)s.show(r)})};e.fn.modal.Constructor=t;e.fn.modal.noConflict=function(){e.fn.modal=n;return this};e(document).on("click.bs.modal.data-api",'[data-toggle="modal"]',function(t){var n=e(this);var r=n.attr("href");var i=e(n.attr("data-target")||r&&r.replace(/.*(?=#[^\s]+$)/,""));var s=i.data("modal")?"toggle":e.extend({remote:!/#/.test(r)&&r},i.data(),n.data());t.preventDefault();i.modal(s,this).one("hide",function(){n.is(":visible")&&n.focus()})});e(document).on("show.bs.modal",".modal",function(){e(document.body).addClass("modal-open")}).on("hidden.bs.modal",".modal",function(){e(document.body).removeClass("modal-open")})}(jQuery)}); \ No newline at end of file diff --git a/source/modal.html b/source/modal.html deleted file mode 100644 index 97840cd..0000000 --- a/source/modal.html +++ /dev/null @@ -1,13 +0,0 @@ - - \ No newline at end of file diff --git a/source/ouibounce.js b/source/ouibounce.js index b10aa16..af41001 100644 --- a/source/ouibounce.js +++ b/source/ouibounce.js @@ -1,248 +1,8 @@ -$( document ).ready(function() { - (function ouibounce() { - - $('html').on('mouseout.ouibounce', (function() { - function showModal() { - $('#ouibounce-modal').modal(); - } - return function(e) { - if (!(e.clientY < 20)) return; - - showModal(); - $('html').off('mouseout.ouibounce'); - }; - })() ); - - })(); - - // inject bootstrap modal css - $('head').prepend(''); - - // bootstrap modal logic - +function ($) { "use strict"; - - // MODAL CLASS DEFINITION - // ====================== - - var Modal = function (element, options) { - this.options = options - this.$element = $(element) - this.$backdrop = - this.isShown = null - - if (this.options.remote) this.$element.load(this.options.remote) - } - - Modal.DEFAULTS = { - backdrop: true - , keyboard: true - , show: true - } - - Modal.prototype.toggle = function (_relatedTarget) { - return this[!this.isShown ? 'show' : 'hide'](_relatedTarget) - } - - Modal.prototype.show = function (_relatedTarget) { - var that = this - var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget }) - - this.$element.trigger(e) - - if (this.isShown || e.isDefaultPrevented()) return - - this.isShown = true - - this.escape() - - this.$element.on('click.dismiss.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) - - this.backdrop(function () { - var transition = $.support.transition && that.$element.hasClass('fade') - - if (!that.$element.parent().length) { - that.$element.appendTo(document.body) // don't move modals dom position - } - - that.$element.show() - - if (transition) { - that.$element[0].offsetWidth // force reflow - } - - that.$element - .addClass('in') - .attr('aria-hidden', false) - - that.enforceFocus() - - var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget }) - - transition ? - that.$element.find('.modal-dialog') // wait for modal to slide in - .one($.support.transition.end, function () { - that.$element.focus().trigger(e) - }) - .emulateTransitionEnd(300) : - that.$element.focus().trigger(e) - }) - } - - Modal.prototype.hide = function (e) { - if (e) e.preventDefault() - - e = $.Event('hide.bs.modal') - - this.$element.trigger(e) - - if (!this.isShown || e.isDefaultPrevented()) return - - this.isShown = false - - this.escape() - - $(document).off('focusin.bs.modal') - - this.$element - .removeClass('in') - .attr('aria-hidden', true) - .off('click.dismiss.modal') - - $.support.transition && this.$element.hasClass('fade') ? - this.$element - .one($.support.transition.end, $.proxy(this.hideModal, this)) - .emulateTransitionEnd(300) : - this.hideModal() - } - - Modal.prototype.enforceFocus = function () { - $(document) - .off('focusin.bs.modal') // guard against infinite focus loop - .on('focusin.bs.modal', $.proxy(function (e) { - if (this.$element[0] !== e.target && !this.$element.has(e.target).length) { - this.$element.focus() - } - }, this)) - } - - Modal.prototype.escape = function () { - if (this.isShown && this.options.keyboard) { - this.$element.on('keyup.dismiss.bs.modal', $.proxy(function (e) { - e.which == 27 && this.hide() - }, this)) - } else if (!this.isShown) { - this.$element.off('keyup.dismiss.bs.modal') - } - } - - Modal.prototype.hideModal = function () { - var that = this - this.$element.hide() - this.backdrop(function () { - that.removeBackdrop() - that.$element.trigger('hidden.bs.modal') - }) - } - - Modal.prototype.removeBackdrop = function () { - this.$backdrop && this.$backdrop.remove() - this.$backdrop = null - } - - Modal.prototype.backdrop = function (callback) { - var that = this - var animate = this.$element.hasClass('fade') ? 'fade' : '' - - if (this.isShown && this.options.backdrop) { - var doAnimate = $.support.transition && animate - - this.$backdrop = $('
') - .appendTo(document.body) - - this.$element.on('click.dismiss.modal', $.proxy(function (e) { - if (e.target !== e.currentTarget) return - this.options.backdrop == 'static' - ? this.$element[0].focus.call(this.$element[0]) - : this.hide.call(this) - }, this)) - - if (doAnimate) this.$backdrop[0].offsetWidth // force reflow - - this.$backdrop.addClass('in') - - if (!callback) return - - doAnimate ? - this.$backdrop - .one($.support.transition.end, callback) - .emulateTransitionEnd(150) : - callback() - - } else if (!this.isShown && this.$backdrop) { - this.$backdrop.removeClass('in') - - $.support.transition && this.$element.hasClass('fade')? - this.$backdrop - .one($.support.transition.end, callback) - .emulateTransitionEnd(150) : - callback() - - } else if (callback) { - callback() - } - } - - - // MODAL PLUGIN DEFINITION - // ======================= - - var old = $.fn.modal - - $.fn.modal = function (option, _relatedTarget) { - return this.each(function () { - var $this = $(this) - var data = $this.data('bs.modal') - var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option) - - if (!data) $this.data('bs.modal', (data = new Modal(this, options))) - if (typeof option == 'string') data[option](_relatedTarget) - else if (options.show) data.show(_relatedTarget) - }) - } - - $.fn.modal.Constructor = Modal - - - // MODAL NO CONFLICT - // ================= - - $.fn.modal.noConflict = function () { - $.fn.modal = old - return this - } - - - // MODAL DATA-API - // ============== - - $(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) { - var $this = $(this) - var href = $this.attr('href') - var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7 - var option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data()) - - e.preventDefault() - - $target - .modal(option, this) - .one('hide', function () { - $this.is(':visible') && $this.focus() - }) - }) - - $(document) - .on('show.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') }) - .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') }) - - }(jQuery); -}); \ No newline at end of file +$.fn.ouibounce = function() { + var _this = this; + $('html').on('mouseout.ouibounce', function(e) { + if (!(e.clientY < 20)) return; + _this.show(); + $('html').off('mouseout.ouibounce'); + }); +}; \ No newline at end of file diff --git a/source/ouibounce.min.js b/source/ouibounce.min.js deleted file mode 100644 index 52eb994..0000000 --- a/source/ouibounce.min.js +++ /dev/null @@ -1 +0,0 @@ -$(document).ready(function(){(function(){$("html").on("mouseout.ouibounce",function(){function e(){$("#ouibounce-modal").modal()}return function(t){if(!(t.clientY<20))return;e();$("html").off("mouseout.ouibounce")}}())})();$("head").prepend('');+function(e){"use strict";var t=function(t,n){this.options=n;this.$element=e(t);this.$backdrop=this.isShown=null;if(this.options.remote)this.$element.load(this.options.remote)};t.DEFAULTS={backdrop:true,keyboard:true,show:true};t.prototype.toggle=function(e){return this[!this.isShown?"show":"hide"](e)};t.prototype.show=function(t){var n=this;var r=e.Event("show.bs.modal",{relatedTarget:t});this.$element.trigger(r);if(this.isShown||r.isDefaultPrevented())return;this.isShown=true;this.escape();this.$element.on("click.dismiss.modal",'[data-dismiss="modal"]',e.proxy(this.hide,this));this.backdrop(function(){var r=e.support.transition&&n.$element.hasClass("fade");if(!n.$element.parent().length){n.$element.appendTo(document.body)}n.$element.show();if(r){n.$element[0].offsetWidth}n.$element.addClass("in").attr("aria-hidden",false);n.enforceFocus();var i=e.Event("shown.bs.modal",{relatedTarget:t});r?n.$element.find(".modal-dialog").one(e.support.transition.end,function(){n.$element.focus().trigger(i)}).emulateTransitionEnd(300):n.$element.focus().trigger(i)})};t.prototype.hide=function(t){if(t)t.preventDefault();t=e.Event("hide.bs.modal");this.$element.trigger(t);if(!this.isShown||t.isDefaultPrevented())return;this.isShown=false;this.escape();e(document).off("focusin.bs.modal");this.$element.removeClass("in").attr("aria-hidden",true).off("click.dismiss.modal");e.support.transition&&this.$element.hasClass("fade")?this.$element.one(e.support.transition.end,e.proxy(this.hideModal,this)).emulateTransitionEnd(300):this.hideModal()};t.prototype.enforceFocus=function(){e(document).off("focusin.bs.modal").on("focusin.bs.modal",e.proxy(function(e){if(this.$element[0]!==e.target&&!this.$element.has(e.target).length){this.$element.focus()}},this))};t.prototype.escape=function(){if(this.isShown&&this.options.keyboard){this.$element.on("keyup.dismiss.bs.modal",e.proxy(function(e){e.which==27&&this.hide()},this))}else if(!this.isShown){this.$element.off("keyup.dismiss.bs.modal")}};t.prototype.hideModal=function(){var e=this;this.$element.hide();this.backdrop(function(){e.removeBackdrop();e.$element.trigger("hidden.bs.modal")})};t.prototype.removeBackdrop=function(){this.$backdrop&&this.$backdrop.remove();this.$backdrop=null};t.prototype.backdrop=function(t){var n=this;var r=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var i=e.support.transition&&r;this.$backdrop=e('
').appendTo(document.body);this.$element.on("click.dismiss.modal",e.proxy(function(e){if(e.target!==e.currentTarget)return;this.options.backdrop=="static"?this.$element[0].focus.call(this.$element[0]):this.hide.call(this)},this));if(i)this.$backdrop[0].offsetWidth;this.$backdrop.addClass("in");if(!t)return;i?this.$backdrop.one(e.support.transition.end,t).emulateTransitionEnd(150):t()}else if(!this.isShown&&this.$backdrop){this.$backdrop.removeClass("in");e.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(e.support.transition.end,t).emulateTransitionEnd(150):t()}else if(t){t()}};var n=e.fn.modal;e.fn.modal=function(n,r){return this.each(function(){var i=e(this);var s=i.data("bs.modal");var o=e.extend({},t.DEFAULTS,i.data(),typeof n=="object"&&n);if(!s)i.data("bs.modal",s=new t(this,o));if(typeof n=="string")s[n](r);else if(o.show)s.show(r)})};e.fn.modal.Constructor=t;e.fn.modal.noConflict=function(){e.fn.modal=n;return this};e(document).on("click.bs.modal.data-api",'[data-toggle="modal"]',function(t){var n=e(this);var r=n.attr("href");var i=e(n.attr("data-target")||r&&r.replace(/.*(?=#[^\s]+$)/,""));var s=i.data("modal")?"toggle":e.extend({remote:!/#/.test(r)&&r},i.data(),n.data());t.preventDefault();i.modal(s,this).one("hide",function(){n.is(":visible")&&n.focus()})});e(document).on("show.bs.modal",".modal",function(){e(document.body).addClass("modal-open")}).on("hidden.bs.modal",".modal",function(){e(document.body).removeClass("modal-open")})}(jQuery)}); \ No newline at end of file diff --git a/test/index.html b/test/index.html new file mode 100644 index 0000000..f7950df --- /dev/null +++ b/test/index.html @@ -0,0 +1,24 @@ + + + + OuiBounce Testing Page + + + + + + + +

Try leaving this page

+

This is the sandbox, where we sell boxes of sand.

+ + +
+

Place your marketing message here!

+
+ + + + diff --git a/example/main.css b/test/main.css similarity index 54% rename from example/main.css rename to test/main.css index 435ed0d..16fa2b6 100644 --- a/example/main.css +++ b/test/main.css @@ -1,10 +1,10 @@ body { background-color: lavender; color: salmon; - min-height: 4000px; + min-height: 500px; padding: 0; } -p { - height: 10vh; +#ouibounce-modal { + display: none; } \ No newline at end of file