From 11721f376d9bdb019f31d3bbb273160d45ff1266 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sat, 27 Aug 2011 13:03:06 -0700 Subject: add boostrap-twipsy and bootstrap-alerts --- examples/assets/js/bootstrap-alerts.js | 73 +++++++++ examples/assets/js/bootstrap-modal.js | 155 +++++++++++++++++++ examples/assets/js/bootstrap-modals.js | 157 ------------------- examples/assets/js/bootstrap-twipsy.js | 272 +++++++++++++++++++++++++++++++++ examples/bootstrap-js.html | 183 ++++++++++++++-------- 5 files changed, 623 insertions(+), 217 deletions(-) create mode 100644 examples/assets/js/bootstrap-alerts.js create mode 100644 examples/assets/js/bootstrap-modal.js delete mode 100644 examples/assets/js/bootstrap-modals.js create mode 100644 examples/assets/js/bootstrap-twipsy.js (limited to 'examples') diff --git a/examples/assets/js/bootstrap-alerts.js b/examples/assets/js/bootstrap-alerts.js new file mode 100644 index 000000000..d1983d9f7 --- /dev/null +++ b/examples/assets/js/bootstrap-alerts.js @@ -0,0 +1,73 @@ +(function( $ ){ + + /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) + * ======================================================= */ + + $.support.transition = (function () { + var thisBody = document.body || document.documentElement + , thisStyle = thisBody.style + , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined + return support + })() + + + /* SHARED VARS + * =========== */ + + var transitionEnd + + // set CSS transition event type + if ( $.support.transition ) { + transitionEnd = "TransitionEnd" + if ( $.browser.webkit ) { + transitionEnd = "webkitTransitionEnd" + } else if ( $.browser.mozilla ) { + transitionEnd = "transitionend" + } else if ( $.browser.opera ) { + transitionEnd = "oTransitionEnd" + } + } + + + /* ALERT CLASS DEFINITION + * ====================== */ + + var Alert = function ( content ) { + var that = this + this.$element = $(content) + this.$element.delegate('.close', 'click', function (e) { + e.preventDefault() + that.close() + }) + } + + Alert.prototype = { + + close: function () { + var that = this + + function removeElement () { + that.$element.remove() + that.$element = null + } + + $.support.transition ? + this.$element.bind(transitionEnd, removeElement) : + removeElement() + + this.$element.removeClass('show') + } + + } + + + /* ALERT PLUGIN DEFINITION + * ======================= */ + + $.fn.alert = function ( options ) { + return this.each(function () { + new Alert(this) + }) + } + +})( jQuery || ender ) \ No newline at end of file diff --git a/examples/assets/js/bootstrap-modal.js b/examples/assets/js/bootstrap-modal.js new file mode 100644 index 000000000..0b13fdf58 --- /dev/null +++ b/examples/assets/js/bootstrap-modal.js @@ -0,0 +1,155 @@ +(function( $ ){ + + /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) + * ======================================================= */ + + $.support.transition = (function () { + var thisBody = document.body || document.documentElement + , thisStyle = thisBody.style + , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined + return support + })() + + + /* SHARED VARS + * =========== */ + + var $window = $(window) + , transitionEnd + + // set CSS transition event type + if ( $.support.transition ) { + transitionEnd = "TransitionEnd" + if ( $.browser.webkit ) { + transitionEnd = "webkitTransitionEnd" + } else if ( $.browser.mozilla ) { + transitionEnd = "transitionend" + } else if ( $.browser.opera ) { + transitionEnd = "oTransitionEnd" + } + } + + + /* MODAL PUBLIC CLASS DEFINITION + * ============================= */ + + var Modal = function ( options ) { + this.settings = $.extend({}, $.fn.modal.defaults) + + if ( typeof options == 'string' ) { + this.settings.content = options + } else if ( options ) { + $.extend( this.settings, options ) + } + + return this + } + + Modal.prototype = { + + toggle: function () { + return this[!this.isOpen ? 'open' : 'close']() + } + + , open: function () { + var that = this + this.isOpen = true + + _.escape.call(this) + _.backdrop.call(this) + + this.$element = $(this.settings.content) + .delegate('.close', 'click', function (e) { e.preventDefault(); that.close() }) + .appendTo(document.body) + .show() + + setTimeout(function () { + that.$element.addClass('show') + that.$backdrop && that.$backdrop.addClass('show') + }, 1) + + return this + } + + , close: function () { + var that = this + + this.isOpen = false + + _.escape.call(this) + _.backdrop.call(this) + + this.$element.removeClass('show') + + function removeElement () { + that.$element.remove() + that.$element = null + } + + $.support.transition ? + this.$element.bind(transitionEnd, removeElement) : + removeElement() + + return this + } + + } + + + /* MODAL PRIVATE METHODS + * ===================== */ + + var _ = { + + backdrop: function () { + var that = this + if ( this.isOpen && this.settings.backdrop ) { + this.$backdrop = $('
') + .click(function () { that.close() }) + .appendTo(document.body) + } else if ( !this.isOpen && this.$backdrop ) { + this.$backdrop.removeClass('show') + + function removeElement() { + that.$backdrop.remove() + that.$backdrop = null + } + + $.support.transition ? + this.$backdrop.bind(transitionEnd, removeElement) : + removeElement() + } + } + + , escape: function () { + var that = this + if ( this.isOpen && this.settings.closeOnEscape ) { + $window.bind('keyup.modal.escape', function ( e ) { + if ( e.which == 27 ) { + that.close() + } + }) + } else if ( !this.isOpen ) { + $window.unbind('keyup.modal.escape') + } + } + + } + + + /* MODAL PLUGIN DEFINITION + * ======================= */ + + $.fn.modal = function ( options ) { + options = options || {} + options.content = this + return new Modal(options) + } + + $.fn.modal.defaults = { + backdrop: false + , closeOnEscape: false + , content: false + } + +})( jQuery || ender ) \ No newline at end of file diff --git a/examples/assets/js/bootstrap-modals.js b/examples/assets/js/bootstrap-modals.js deleted file mode 100644 index e927bc4b3..000000000 --- a/examples/assets/js/bootstrap-modals.js +++ /dev/null @@ -1,157 +0,0 @@ -(function( $ ){ - - /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) - * ======================================================= */ - - $.support.transition = (function () { - var thisBody = document.body || document.documentElement - , thisStyle = thisBody.style - , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined - return support - })() - - - /* SHARED VARS - * =========== */ - - var $window = $(window) - , transitionEnd - - // set CSS transition event type - if ( $.support.transition ) { - transitionEnd = "TransitionEnd" - if ( $.browser.webkit ) { - transitionEnd = "webkitTransitionEnd" - } else if ( $.browser.mozilla ) { - transitionEnd = "transitionend" - } else if ( $.browser.opera ) { - transitionEnd = "oTransitionEnd" - } - } - - - /* MODAL PUBLIC CLASS DEFINITION - * ============================= */ - - var Modal = function ( options ) { - this.settings = { - backdrop: false - , closeOnEscape: false - , content: false - } - - if ( typeof options == 'string' ) { - this.settings.content = options - } else if ( options ) { - $.extend( this.settings, options ) - } - - return this - } - - Modal.prototype = { - - toggle: function () { - return this[!this.isOpen ? 'open' : 'close']() - } - - , open: function () { - var that = this - this.isOpen = true - - _private.escape.call(this) - _private.backdrop.call(this) - - this.$element = $(this.settings.content) - .delegate('.close', 'click', function (e) { e.preventDefault(); that.close() }) - .appendTo(document.body) - .show() - - setTimeout(function () { - that.$element.addClass('open') - that.$backdrop && that.$backdrop.addClass('open') - }, 1) - - return this - } - - , close: function () { - var that = this - - this.isOpen = false - - _private.escape.call(this) - _private.backdrop.call(this) - - this.$element.removeClass('open') - - function removeElement () { - that.$element.remove() - that.$element = null - } - - $.support.transition ? - this.$element.bind(transitionEnd, removeElement) : - removeElement() - - return this - } - - } - - - /* MODAL PRIVATE METHODS - * ===================== */ - - var _private = { - - backdrop: function () { - var that = this - if ( this.isOpen && this.settings.backdrop ) { - this.$backdrop = $('
') - .click(function () { that.close() }) - .appendTo(document.body) - } else if ( !this.isOpen && this.$backdrop ) { - this.$backdrop.removeClass('open') - - function removeElement() { - that.$backdrop.remove() - that.$backdrop = null - } - - $.support.transition ? - this.$backdrop.bind(transitionEnd, removeElement) : - removeElement() - } - } - - , escape: function () { - var that = this - if ( this.isOpen && this.settings.closeOnEscape ) { - $window.bind('keyup.modal.escape', function ( e ) { - if ( e.which == 27 ) { - that.close() - } - }) - } else if ( !this.isOpen ) { - $window.unbind('keyup.modal.escape') - } - } - - } - - - /* MODAL PLUGIN DEFINITION - * ======================= */ - - $.modal = function ( options ) { - return new Modal(options) - } - - $.fn.modal = function ( options ) { - options = options || {} - options.content = this - return new Modal(options) - } - -})( jQuery || ender ) \ No newline at end of file diff --git a/examples/assets/js/bootstrap-twipsy.js b/examples/assets/js/bootstrap-twipsy.js new file mode 100644 index 000000000..7e33bf95c --- /dev/null +++ b/examples/assets/js/bootstrap-twipsy.js @@ -0,0 +1,272 @@ +/* Based on the original tipsy by Jason Frame */ + +(function( $ ) { + + /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) + * ======================================================= */ + + $.support.transition = (function () { + var thisBody = document.body || document.documentElement + , thisStyle = thisBody.style + , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined + return support + })() + + + /* SHARED VARS + * =========== */ + + var transitionEnd + + // set CSS transition event type + if ( $.support.transition ) { + transitionEnd = "TransitionEnd" + if ( $.browser.webkit ) { + transitionEnd = "webkitTransitionEnd" + } else if ( $.browser.mozilla ) { + transitionEnd = "transitionend" + } else if ( $.browser.opera ) { + transitionEnd = "oTransitionEnd" + } + } + + + /* TWIPSY PUBLIC CLASS DEFINITION + * ============================== */ + + var Twipsy = function ( element, options ) { + this.$element = $(element) + this.options = options + this.enabled = true + this.fixTitle() + } + + Twipsy.prototype = { + + show: function() { + var title = this.getTitle() + , pos + , actualWidth + , actualHeight + , placement + , $tip + , tp + + if (title && this.enabled) { + $tip = this.tip() + $tip.find('.twipsy-inner')[this.options.html ? 'html' : 'text'](title) + $tip[0].className = 'twipsy' + $tip + .remove() + .css({ top: 0, left: 0, display: 'block' }) + .prependTo(document.body) + + pos = $.extend({}, this.$element.offset(), { + width: this.$element[0].offsetWidth + , height: this.$element[0].offsetHeight + }) + + actualWidth = $tip[0].offsetWidth + actualHeight = $tip[0].offsetHeight + placement = _.maybeCall(this.options.placement, this.$element[0]) + + switch (placement) { + case 'below': + tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2} + break + case 'above': + tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2} + break + case 'left': + tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset} + break + case 'right': + tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset} + break + } + + $tip + .css(tp) + .addClass(placement) + .addClass('show') + } + } + + , hide: function() { + var that = this + , $tip = this.tip() + + $tip.removeClass('show') + + function removeElement () { + $tip.remove() + } + + $.support.transition ? + $tip.bind(transitionEnd, removeElement) : + removeElement() + } + + , fixTitle: function() { + var $e = this.$element + if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') { + $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title') + } + } + + , getTitle: function() { + var title + , $e = this.$element + , o = this.options + + this.fixTitle() + + if (typeof o.title == 'string') { + title = $e.attr(o.title == 'title' ? 'data-original-title' : o.title) + } else if (typeof o.title == 'function') { + title = o.title.call($e[0]) + } + + title = ('' + title).replace(/(^\s*|\s*$)/, "") + + return title || o.fallback + } + + , tip: function() { + if (!this.$tip) { + this.$tip = $('
').html('
') + } + return this.$tip + } + + , validate: function() { + if (!this.$element[0].parentNode) { + this.hide() + this.$element = null + this.options = null + } + } + + , enable: function() { + this.enabled = true + } + + , disable: function() { + this.enabled = false + } + + , toggleEnabled: function() { + this.enabled = !this.enabled + } + + } + + + /* TWIPSY PRIVATE METHODS + * ====================== */ + + var _ = { + + maybeCall: function ( thing, ctx ) { + return (typeof thing == 'function') ? (thing.call(ctx)) : thing + } + + } + + + /* MODAL PLUGIN DEFINITION + * ======================= */ + + $.fn.twipsy = function(options) { + + var twipsy + , binder + , eventIn + , eventOut + + if (options === true) { + return this.data('twipsy') + } else if (typeof options == 'string') { + twipsy = this.data('twipsy') + if (twipsy) { + twipsy[options]() + } + return this + } + + options = $.extend({}, $.fn.twipsy.defaults, options) + + function get(ele) { + var twipsy = $.data(ele, 'twipsy') + + if (!twipsy) { + twipsy = new Twipsy(ele, $.fn.twipsy.elementOptions(ele, options)) + $.data(ele, 'twipsy', twipsy) + } + + return twipsy + } + + function enter() { + var twipsy = get(this) + twipsy.hoverState = 'in' + + if (options.delayIn == 0) { + twipsy.show() + } else { + twipsy.fixTitle() + setTimeout(function() { + if (twipsy.hoverState == 'in') { + twipsy.show() + } + }, options.delayIn) + } + } + + function leave() { + var twipsy = get(this) + twipsy.hoverState = 'out' + if (options.delayOut == 0) { + twipsy.hide() + } else { + setTimeout(function() { + if (twipsy.hoverState == 'out') { + twipsy.hide() + } + }, options.delayOut) + } + } + + if (!options.live) { + this.each(function() { + get(this) + }) + } + + if (options.trigger != 'manual') { + binder = options.live ? 'live' : 'bind' + eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus' + eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur' + this[binder](eventIn, enter)[binder](eventOut, leave) + } + + return this + } + + $.fn.twipsy.defaults = { + delayIn: 0 + , delayOut: 0 + , fallback: '' + , placement: 'above' + , html: false + , live: false + , offset: 0 + , title: 'title' + , trigger: 'hover' + } + + $.fn.twipsy.elementOptions = function(ele, options) { + return $.metadata ? $.extend({}, options, $(ele).metadata()) : options + } + +})( jQuery || ender ) \ No newline at end of file diff --git a/examples/bootstrap-js.html b/examples/bootstrap-js.html index 37aea3464..13eb44a52 100644 --- a/examples/bootstrap-js.html +++ b/examples/bootstrap-js.html @@ -13,9 +13,9 @@ - - - + + + @@ -28,7 +28,7 @@ - + @@ -37,8 +37,10 @@

Bootstrap JS

@@ -71,17 +73,18 @@ -
+ + + + +
+
+

Twipsy bootstrap-twipsy.js

+
+
+
+

Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for title storage!

+ Download +
+
+

Using bootstrap-twipsy.js

+ 
$('#example').twipsy(options)
+

Options

+
    +
  • delayIn (number) - delay before showing tooltip (ms).
    • +
  • delayOut (number) - delay before hiding tooltip (ms).
    • +
  • fallback (string) - fallback text to use when no tooltip text.
    • +
  • placement (string) - position of tooltip - above | below | left | right.
    • +
  • html (boolean) - is tooltip content HTML?
    • +
  • live (boolean) - use live event support?
    • +
  • offset (number) - pixel offset of tooltip from element.
    • +
  • title (string|function) - attribute/callback containing tooltip text.
    • +
  • trigger (string) - how tooltip is triggered - hover | focus | manual.
    • +
+

Methods

+

$().twipsy

+

Attaches a twipsy handler to an element collection.

+

Demo

+

Mustache next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown you probably haven't heard of them before they sold out. Farm-to-table cardigans seitan tofu, mcsweeney's fixie sustainable quinoa 8-bit american apparel terry richardson vinyl chambray. Fap beard stumptown, williamsburg banh mi lomo thundercats. DIY tofu biodiesel marfa, four loko mcsweeney's master cleanse vegan chambray. Etsy fap ethical, wes anderson farm-to-table +1 whatever bicycle rights mixtape portland readymade letterpress artisan. Four loko artisan whatever keytar, scenester farm-to-table PBR banksy Austin freegan cred raw denim single-origin coffee viral. +

+ +
+
+
+ + + + +
\ No newline at end of file -- cgit v1.2.3