From 5f4e30ed1d33f83b0fad3afc9174e193e6c3fdf4 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Fri, 9 Sep 2011 22:47:49 -0700 Subject: move js plugins to root dir, begin writing tests, and change modal plugin to be more boss like --- docs/assets/js/application.js | 2 +- docs/assets/js/bootstrap-alerts.js | 72 --------- docs/assets/js/bootstrap-dropdown.js | 26 --- docs/assets/js/bootstrap-modal.js | 157 ------------------ docs/assets/js/bootstrap-popover.js | 67 -------- docs/assets/js/bootstrap-scrollspy.js | 0 docs/assets/js/bootstrap-tabs.js | 38 ----- docs/assets/js/bootstrap-twipsy.js | 288 ---------------------------------- docs/index.html | 2 +- docs/javascript.html | 128 +++++++-------- 10 files changed, 68 insertions(+), 712 deletions(-) delete mode 100644 docs/assets/js/bootstrap-alerts.js delete mode 100644 docs/assets/js/bootstrap-dropdown.js delete mode 100644 docs/assets/js/bootstrap-modal.js delete mode 100644 docs/assets/js/bootstrap-popover.js delete mode 100644 docs/assets/js/bootstrap-scrollspy.js delete mode 100644 docs/assets/js/bootstrap-tabs.js delete mode 100644 docs/assets/js/bootstrap-twipsy.js (limited to 'docs') diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 475329398..db59c79f9 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -3,7 +3,7 @@ $(document).ready(function(){ // Dropdown example for topbar nav // =============================== - $(".topbar").dropdown() // catch any dropdowns on the page + $('body').dropdown() // catch any dropdowns on the page // table sort example diff --git a/docs/assets/js/bootstrap-alerts.js b/docs/assets/js/bootstrap-alerts.js deleted file mode 100644 index e27ac6482..000000000 --- a/docs/assets/js/bootstrap-alerts.js +++ /dev/null @@ -1,72 +0,0 @@ -(function( $ ){ - - /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) - * ======================================================= */ - - var transitionEnd - - $(function () { - - $.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 - })() - - // 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 - - this.$element.removeClass('in') - - function removeElement () { - that.$element.remove() - that.$element = null - } - - $.support.transition && this.$element.hasClass('fade') ? - this.$element.bind(transitionEnd, removeElement) : - removeElement() - } - - } - - - /* 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/docs/assets/js/bootstrap-dropdown.js b/docs/assets/js/bootstrap-dropdown.js deleted file mode 100644 index fe73e7994..000000000 --- a/docs/assets/js/bootstrap-dropdown.js +++ /dev/null @@ -1,26 +0,0 @@ -(function( $ ){ - - /* DROPDOWN PLUGIN DEFINITION - * ========================== */ - - var selector = 'a.menu, .dropdown-toggle' - - function clearMenus() { - $(selector).parent('li').removeClass('open') - } - - $(function () { - $('body').bind("click", clearMenus) - }) - - $.fn.dropdown = function ( options ) { - return this.each(function () { - $(this).delegate(selector, 'click', function (e) { - clearMenus() - $(this).parent('li').toggleClass('open') - return false - }) - }) - } - -})( jQuery || ender ) \ No newline at end of file diff --git a/docs/assets/js/bootstrap-modal.js b/docs/assets/js/bootstrap-modal.js deleted file mode 100644 index 4bc395e1c..000000000 --- a/docs/assets/js/bootstrap-modal.js +++ /dev/null @@ -1,157 +0,0 @@ -(function( $ ){ - - /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) - * ======================================================= */ - - var transitionEnd - - $(function () { - - $.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 - })() - - // 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 - - this.$element = $(this.settings.content) - - _.escape.call(this) - _.backdrop.call(this) - - this.$element - .delegate('.close', 'click', function (e) { e.preventDefault(); that.close() }) - .appendTo(document.body) - .show() - - setTimeout(function () { - that.$element.addClass('in') - that.$backdrop && that.$backdrop.addClass('in') - }, 1) - - return this - } - - , close: function () { - var that = this - - this.isOpen = false - - _.escape.call(this) - _.backdrop.call(this) - - this.$element.removeClass('in') - - function removeElement () { - that.$element.remove() - that.$element = null - } - - $.support.transition && this.$element.hasClass('fade') ? - this.$element.bind(transitionEnd, removeElement) : - removeElement() - - return this - } - - } - - - /* MODAL PRIVATE METHODS - * ===================== */ - - var _ = { - - backdrop: function () { - var that = this - , animate = this.$element.hasClass('fade') ? 'fade' : '' - if ( this.isOpen && this.settings.backdrop ) { - this.$backdrop = $('
') - .click(function () { that.close() }) - .appendTo(document.body) - } else if ( !this.isOpen && this.$backdrop ) { - this.$backdrop.removeClass('in') - - function removeElement() { - that.$backdrop.remove() - that.$backdrop = null - } - - $.support.transition && this.$element.hasClass('fade')? - this.$backdrop.bind(transitionEnd, removeElement) : - removeElement() - } - } - - , escape: function () { - var that = this - if ( this.isOpen && this.settings.closeOnEscape ) { - $('body').bind('keyup.modal.escape', function ( e ) { - if ( e.which == 27 ) { - that.close() - } - }) - } else if ( !this.isOpen ) { - $('body').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/docs/assets/js/bootstrap-popover.js b/docs/assets/js/bootstrap-popover.js deleted file mode 100644 index 53284806f..000000000 --- a/docs/assets/js/bootstrap-popover.js +++ /dev/null @@ -1,67 +0,0 @@ - /* EXTENDS BOOTSTRAP-TWIPSY.js - =========================== */ - -(function( $ ) { - - /* POPOVER PUBLIC CLASS DEFINITION - * ============================== */ - - var Popover = function ( element, options ) { - this.$element = $(element) - this.options = options - this.enabled = true - } - - Popover.prototype = $.extend({}, $.fn.twipsy.Twipsy.prototype, { - - setContent: function () { - var $tip = this.tip() - $tip.find('.title')[this.options.html ? 'html' : 'text'](this.getTitle()) - $tip.find('.content p')[this.options.html ? 'html' : 'text'](this.getContent()) - $tip[0].className = 'popover' - } - - , fixTitle: function () {} - - , getTitle: function () { - var title - if (typeof this.options.title == 'string') { - title = this.$element.attr('data-title') || this.options.title - } else if (typeof this.options.title == 'function') { - title = this.options.title.call(this.$element[0]) - } - return title - } - - , getContent: function () {content - var content - if (typeof this.options.content == 'string') { - content = this.$element.attr('data-content') || this.options.content - } else if (typeof this.options.content == 'function') { - content = this.options.content.call(this.$element[0]) - } - return content - } - - , tip: function() { - if (!this.$tip) { - this.$tip = $('
') - .html('

') - } - return this.$tip - } - - }) - - - /* POPOVER PLUGIN DEFINITION - * ======================= */ - - $.fn.popover = function (options) { - if (typeof options == 'object') options = $.extend({}, $.fn.popover.defaults, options) - $.fn.twipsy.initWith.call(this, options, Popover) - } - - $.fn.popover.defaults = $.extend({}, $.fn.twipsy.defaults, { content: '', placement: 'right'}) - -})( jQuery || ender ) \ No newline at end of file diff --git a/docs/assets/js/bootstrap-scrollspy.js b/docs/assets/js/bootstrap-scrollspy.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/docs/assets/js/bootstrap-tabs.js b/docs/assets/js/bootstrap-tabs.js deleted file mode 100644 index 029ccc65c..000000000 --- a/docs/assets/js/bootstrap-tabs.js +++ /dev/null @@ -1,38 +0,0 @@ -(function( $ ){ - - function activate ( element, container ) { - container.find('.active').removeClass('active') - element.addClass('active') - } - - function tab( e ) { - var $this = $(this) - , href = $this.attr('href') - , $ul = $(e.liveFired) - , $controlled - - if (/^#\w+/.test(href)) { - e.preventDefault() - - if ($this.hasClass('active')) { - return - } - - $href = $(href) - - activate($this.parent('li'), $ul) - activate($href, $href.parent()) - } - } - - - /* TABS/PILLS PLUGIN DEFINITION - * ============================ */ - - $.fn.tabs = $.fn.pills = function () { - return this.each(function () { - $(this).delegate('.tabs > li > a, .pills > li > a, .dropdown-menu > li > a', 'click', tab) - }) - } - -})( jQuery || ender ) \ No newline at end of file diff --git a/docs/assets/js/bootstrap-twipsy.js b/docs/assets/js/bootstrap-twipsy.js deleted file mode 100644 index 3d117a445..000000000 --- a/docs/assets/js/bootstrap-twipsy.js +++ /dev/null @@ -1,288 +0,0 @@ -/* Adapted from the original jQuery.tipsy by Jason Frame */ - -(function( $ ) { - - /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) - * ======================================================= */ - - var transitionEnd - - $(function () { - - $.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 - })() - - // 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 pos - , actualWidth - , actualHeight - , placement - , $tip - , tp - - if (this.getTitle() && this.enabled) { - $tip = this.tip() - this.setContent() - - if (this.options.animate) { - $tip.addClass('fade') - } - - $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('in') - } - } - - , setContent: function () { - var $tip = this.tip() - $tip.find('.twipsy-inner')[this.options.html ? 'html' : 'text'](this.getTitle()) - $tip[0].className = 'twipsy' - } - - , hide: function() { - var that = this - , $tip = this.tip() - - $tip.removeClass('in') - - function removeElement () { - $tip.remove() - } - - $.support.transition && this.$tip.hasClass('fade') ? - $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 - } - - } - - - /* TWIPSY PLUGIN DEFINITION - * ======================== */ - - $.fn.twipsy = function (options) { - $.fn.twipsy.initWith.call(this, options, Twipsy) - } - - $.fn.twipsy.initWith = function (options, Constructor) { - - 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 Constructor(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.Twipsy = Twipsy - - $.fn.twipsy.defaults = { - animate: true - , 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/docs/index.html b/docs/index.html index 558f3fcf2..4a3f1a8c4 100644 --- a/docs/index.html +++ b/docs/index.html @@ -82,7 +82,7 @@
Hotlink the CSS

For the quickest and easiest start, just copy this snippet into your webpage.

- +
diff --git a/docs/javascript.html b/docs/javascript.html index 932bfc27e..7d1c6d6ca 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -16,12 +16,12 @@ - - - - - - + + + + + + @@ -45,11 +45,11 @@

Bootstrap JS

@@ -67,7 +67,7 @@

Our Modal plugin is a super slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter.

- Download + Download

Using bootstrap-modal

@@ -76,24 +76,25 @@
  • backdrop (boolean) - if true, it will include a modal-backdrop element.
  • closeOnEscape (boolean) - if true, it will close the modal when escape key is pressed.
    • -
  • content (string) - alternative way of supplying modal class with HTML content.

Methods

$().modal

-

Returns an instance of the modal class. Accepts an optional options object. If you want your modal to fade in and out, just add a .fade class to your .modal element (refer to the demo to see this in action).

+

Activates your content as a modal. Accepts an optional options object. If you want your modal to fade in and out, just add a .fade class to your .modal element (refer to the demo to see this in action).

 $('#modal-content').modal({
   closeOnEscape: true
 })
-

.toggle

-

Returns an instance of the modal class. Toggle the modal open state.

- 
$('#modal-content').modal().toggle()
-

.open

-

Returns an instance of the modal class. Opens the modal.

- 
$('#modal-content').modal().open()
-

.close

-

Returns an instance of the modal class. Closes the modal.

- 
$('#modal-content').modal().close()
+

Events

+

Trigger events to make things happen!

+

modal:toggle

+

Toggle the modal open state.

+ 
$('#modal-content').trigger('modal:toggle')
+

modal:open

+

Opens the modal.

+ 
$('#modal-content').trigger('modal:open')
+

modal:close

+

Closes the modal.

+ 
$('#modal-content').trigger('modal:close')

Demo

@@ -115,13 +116,14 @@ $('#modal-content').modal({ -
-
- @@ -180,7 +144,7 @@ $('#modal-content').modal({

This plugin is for adding dropdowns to the bootstrap nav.

- Download + Download

Using boostrap-dropdown.js

@@ -246,7 +210,7 @@ $('#modal-content').modal({

This plugin adds quick, dynamic tab and pill functionality.

- Download + Download

Using boostrap-tabs.js

@@ -311,7 +275,7 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita

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 + Download

Using bootstrap-twipsy.js

@@ -358,7 +322,7 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita

The popover plugin provides a simple interface for adding popovers to your application. It extends the boostrap-twipsy.js plugin, so be sure to grab that file as well when including popovers in your project!

- Download + Download

Using boostrap-popover.js

@@ -393,6 +357,46 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita
+ + + +
+
+

Alerts bootstrap-alerts.js

+
+
+
+

The alert plugin is a super tiny class for adding close functionality to alerts.

+ Download +
+
+

Using bootstrap-alert

+ 
$(".alert-message").alert()
+

Methods

+

$().alert

+

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

+

Demo

+
+ × +

Holy guacamole! Best check yo self, you’re not looking too good.

+
+
+ × +

Oh snap! You got an error! Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

+
+ Take this action Or do this +
+
+ +
+
+
+
\ No newline at end of file -- cgit v1.2.3