From 2ee7c206924ac616eeb9ae3d6eb6811a818af015 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sat, 27 Aug 2011 17:22:49 -0700 Subject: [PATCH] adds popover js --- bootstrap-1.1.1.css | 4 +- bootstrap-1.1.1.min.css | 2 +- examples/assets/js/bootstrap-popover.js | 67 +++++++++++++++++++++++++ examples/assets/js/bootstrap-twipsy.js | 28 +++++++---- examples/bootstrap-js.html | 57 +++++++++++++++++++-- lib/patterns.less | 1 + 6 files changed, 143 insertions(+), 16 deletions(-) create mode 100644 examples/assets/js/bootstrap-popover.js diff --git a/bootstrap-1.1.1.css b/bootstrap-1.1.1.css index 7126b5475a..8b95d5b1c1 100644 --- a/bootstrap-1.1.1.css +++ b/bootstrap-1.1.1.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Sat Aug 27 13:05:58 PDT 2011 + * Date: Sat Aug 27 16:19:56 PDT 2011 */ /* Reset.less * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). @@ -1896,6 +1896,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .modal-backdrop, .modal, .twipsy, +.popover, .alert-message { -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; @@ -1907,6 +1908,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .modal-backdrop.show, .modal.show, .twipsy.show, +.popover.show, .alert-message.show { opacity: 1; } diff --git a/bootstrap-1.1.1.min.css b/bootstrap-1.1.1.min.css index 7e9959d0c2..4c4673a173 100644 --- a/bootstrap-1.1.1.min.css +++ b/bootstrap-1.1.1.min.css @@ -246,4 +246,4 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .popover .inner{background-color:#333;background-color:rgba(0, 0, 0, 0.8);*background-color:#333;padding:3px;overflow:hidden;width:280px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);} .popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;} .popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} -.modal-backdrop,.modal,.twipsy,.alert-message{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.modal-backdrop.show,.modal.show,.twipsy.show,.alert-message.show{opacity:1;} +.modal-backdrop,.modal,.twipsy,.popover,.alert-message{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.modal-backdrop.show,.modal.show,.twipsy.show,.popover.show,.alert-message.show{opacity:1;} diff --git a/examples/assets/js/bootstrap-popover.js b/examples/assets/js/bootstrap-popover.js new file mode 100644 index 0000000000..ca1b8d8f28 --- /dev/null +++ b/examples/assets/js/bootstrap-popover.js @@ -0,0 +1,67 @@ + /* 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.options.title || this.$element.attr('data-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.options.content || this.$element.attr('data-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/examples/assets/js/bootstrap-twipsy.js b/examples/assets/js/bootstrap-twipsy.js index cff27115e4..4047f910d6 100644 --- a/examples/assets/js/bootstrap-twipsy.js +++ b/examples/assets/js/bootstrap-twipsy.js @@ -44,18 +44,16 @@ Twipsy.prototype = { show: function() { - var title = this.getTitle() - , pos + var pos , actualWidth , actualHeight , placement , $tip , tp - if (title && this.enabled) { + if (this.getTitle() && this.enabled) { $tip = this.tip() - $tip.find('.twipsy-inner')[this.options.html ? 'html' : 'text'](title) - $tip[0].className = 'twipsy' + this.setContent() $tip .remove() .css({ top: 0, left: 0, display: 'block' }) @@ -92,6 +90,12 @@ } } + , 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() @@ -174,10 +178,14 @@ } - /* MODAL PLUGIN DEFINITION - * ======================= */ + /* TWIPSY PLUGIN DEFINITION + * ======================== */ - $.fn.twipsy = function(options) { + $.fn.twipsy = function (options) { + $.fn.twipsy.initWith.call(this, options, Twipsy) + } + + $.fn.twipsy.initWith = function (options, Constructor) { var twipsy , binder @@ -200,7 +208,7 @@ var twipsy = $.data(ele, 'twipsy') if (!twipsy) { - twipsy = new Twipsy(ele, $.fn.twipsy.elementOptions(ele, options)) + twipsy = new Constructor(ele, $.fn.twipsy.elementOptions(ele, options)) $.data(ele, 'twipsy', twipsy) } @@ -253,6 +261,8 @@ return this } + $.fn.twipsy.Twipsy = Twipsy + $.fn.twipsy.defaults = { delayIn: 0 , delayOut: 0 diff --git a/examples/bootstrap-js.html b/examples/bootstrap-js.html index 13eb44a52f..c8d5db647e 100644 --- a/examples/bootstrap-js.html +++ b/examples/bootstrap-js.html @@ -16,7 +16,8 @@ - + + @@ -41,6 +42,7 @@
  • Modals
  • Alerts
  • Twipsy
    • +
  • Popover
    • @@ -53,14 +55,14 @@
    -

    Using Javascript with Less A love story.

    +

    Using Javascript with Bootstrap A love story.

    This page illustrates how to integrate javascript with the Bootstrap library. Below we go over the basics and provide you with some awesome plugins to get you started!

    -

    What is all this?

    +

    What is this all about?

    With this example page, we've set out to make your interactive work with Bootstrap even more simple, offering several lightweight plugins for things like modals, tooltips, and other dynamic components. These plugins have been coded up to work with jQuery and Ender, but we encourage you to extend and modify them to fit your development needs!

    Do I need these?

    The short answer is NO! These plugins were provided to help you understand how to integrate bootstrap with javascript and to give you a quick lightweight option for dropping something in and getting the basic functionality. @@ -214,8 +216,10 @@ $('#modal-content').modal({

    $().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. -

    +
    +

    Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral. +

    +
    +
    +
    +
    diff --git a/lib/patterns.less b/lib/patterns.less index d722f6c982..398fc37a13 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -755,6 +755,7 @@ input[type=submit].btn { .modal-backdrop, .modal, .twipsy, +.popover, .alert-message { .transition(opacity .15s linear); opacity: 0;