diff options
| -rw-r--r-- | css/bootswatch.css | 18 | ||||
| -rw-r--r-- | index.html | 3 | ||||
| -rw-r--r-- | js/bootstrap-tooltip.js | 270 | ||||
| -rw-r--r-- | js/bootswatch.js | 28 |
4 files changed, 309 insertions, 10 deletions
diff --git a/css/bootswatch.css b/css/bootswatch.css index e018add6..3c36b743 100644 --- a/css/bootswatch.css +++ b/css/bootswatch.css @@ -2,6 +2,22 @@ body { padding-top: 60px; padding-bottom: 30px; } + +.navbar .nav > li > a { + color: #ccc; +} + +.nav i { + opacity: 0.4; +} + +.nav a:hover i { + opacity: 1; +} + +.tooltip-inner { + max-width: 500px; +} .alert a { font-weight: bold; @@ -43,7 +59,7 @@ body { } #swatches { - margin: 60px 0 45px 0; + margin: 45px 0 30px 0; padding-right: 20px; text-align: center; } @@ -375,8 +375,9 @@ ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="js/jquery.js"></script> - <script src="js/bootswatch.js"></script> <script src="js/bootstrap-dropdown.js"></script> + <script src="js/bootstrap-tooltip.js"></script> + <script src="js/bootswatch.js"></script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> diff --git a/js/bootstrap-tooltip.js b/js/bootstrap-tooltip.js new file mode 100644 index 00000000..d76e51e8 --- /dev/null +++ b/js/bootstrap-tooltip.js @@ -0,0 +1,270 @@ +/* =========================================================== + * bootstrap-tooltip.js v2.0.1 + * http://twitter.github.com/bootstrap/javascript.html#tooltips + * Inspired by the original jQuery.tipsy by Jason Frame + * =========================================================== + * Copyright 2012 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ========================================================== */ + +!function( $ ) { + + "use strict" + + /* TOOLTIP PUBLIC CLASS DEFINITION + * =============================== */ + + var Tooltip = function ( element, options ) { + this.init('tooltip', element, options) + } + + Tooltip.prototype = { + + constructor: Tooltip + + , init: function ( type, element, options ) { + var eventIn + , eventOut + + this.type = type + this.$element = $(element) + this.options = this.getOptions(options) + this.enabled = true + + if (this.options.trigger != 'manual') { + eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus' + eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur' + this.$element.on(eventIn, this.options.selector, $.proxy(this.enter, this)) + this.$element.on(eventOut, this.options.selector, $.proxy(this.leave, this)) + } + + this.options.selector ? + (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) : + this.fixTitle() + } + + , getOptions: function ( options ) { + options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data()) + + if (options.delay && typeof options.delay == 'number') { + options.delay = { + show: options.delay + , hide: options.delay + } + } + + return options + } + + , enter: function ( e ) { + var self = $(e.currentTarget)[this.type](this._options).data(this.type) + + if (!self.options.delay || !self.options.delay.show) { + self.show() + } else { + self.hoverState = 'in' + setTimeout(function() { + if (self.hoverState == 'in') { + self.show() + } + }, self.options.delay.show) + } + } + + , leave: function ( e ) { + var self = $(e.currentTarget)[this.type](this._options).data(this.type) + + if (!self.options.delay || !self.options.delay.hide) { + self.hide() + } else { + self.hoverState = 'out' + setTimeout(function() { + if (self.hoverState == 'out') { + self.hide() + } + }, self.options.delay.hide) + } + } + + , show: function () { + var $tip + , inside + , pos + , actualWidth + , actualHeight + , placement + , tp + + if (this.hasContent() && this.enabled) { + $tip = this.tip() + this.setContent() + + if (this.options.animation) { + $tip.addClass('fade') + } + + placement = typeof this.options.placement == 'function' ? + this.options.placement.call(this, $tip[0], this.$element[0]) : + this.options.placement + + inside = /in/.test(placement) + + $tip + .remove() + .css({ top: 0, left: 0, display: 'block' }) + .appendTo(inside ? this.$element : document.body) + + pos = this.getPosition(inside) + + actualWidth = $tip[0].offsetWidth + actualHeight = $tip[0].offsetHeight + + switch (inside ? placement.split(' ')[1] : placement) { + case 'bottom': + tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2} + break + case 'top': + tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2} + break + case 'left': + tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth} + break + case 'right': + tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width} + break + } + + $tip + .css(tp) + .addClass(placement) + .addClass('in') + } + } + + , setContent: function () { + var $tip = this.tip() + $tip.find('.tooltip-inner').html(this.getTitle()) + $tip.removeClass('fade in top bottom left right') + } + + , hide: function () { + var that = this + , $tip = this.tip() + + $tip.removeClass('in') + + function removeWithAnimation() { + var timeout = setTimeout(function () { + $tip.off($.support.transition.end).remove() + }, 500) + + $tip.one($.support.transition.end, function () { + clearTimeout(timeout) + $tip.remove() + }) + } + + $.support.transition && this.$tip.hasClass('fade') ? + removeWithAnimation() : + $tip.remove() + } + + , 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') + } + } + + , hasContent: function () { + return this.getTitle() + } + + , getPosition: function (inside) { + return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), { + width: this.$element[0].offsetWidth + , height: this.$element[0].offsetHeight + }) + } + + , getTitle: function () { + var title + , $e = this.$element + , o = this.options + + title = $e.attr('data-original-title') + || (typeof o.title == 'function' ? o.title.call($e[0]) : o.title) + + title = title.toString().replace(/(^\s*|\s*$)/, "") + + return title + } + + , tip: function () { + return this.$tip = this.$tip || $(this.options.template) + } + + , 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 + } + + , toggle: function () { + this[this.tip().hasClass('in') ? 'hide' : 'show']() + } + + } + + + /* TOOLTIP PLUGIN DEFINITION + * ========================= */ + + $.fn.tooltip = function ( option ) { + return this.each(function () { + var $this = $(this) + , data = $this.data('tooltip') + , options = typeof option == 'object' && option + if (!data) $this.data('tooltip', (data = new Tooltip(this, options))) + if (typeof option == 'string') data[option]() + }) + } + + $.fn.tooltip.Constructor = Tooltip + + $.fn.tooltip.defaults = { + animation: true + , delay: 0 + , selector: false + , placement: 'top' + , trigger: 'hover' + , title: '' + , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' + } + +}( window.jQuery );
\ No newline at end of file diff --git a/js/bootswatch.js b/js/bootswatch.js index c549326a..8789d337 100644 --- a/js/bootswatch.js +++ b/js/bootswatch.js @@ -1,4 +1,6 @@ -$('.navbar .nav').first().append('<li class="dropdown"> \ +var menu = '<ul class="nav"> \ + <li><a id="swatch-link" href="#swatches">The Swatches</a></li> \ + <li class="dropdown"> \ <a class="dropdown-toggle" data-toggle="dropdown" href="#">Preview <b class="caret"></b></a> \ <ul class="dropdown-menu"> \ <li><a href="/default">Default</a></li> \ @@ -11,12 +13,10 @@ $('.navbar .nav').first().append('<li class="dropdown"> \ <li><a href="/spacelab">Spacelab</a></li> \ <li><a href="/united">United</a></li> \ </ul> \ - </li>'); - + </li>'; - if(document.title !== 'Bootswatch: Free themes for Twitter Bootstrap') { - console.log('true'); - $('.navbar .nav').first().append('<li class="divider-vertical"></li> \ +if(document.title !== 'Bootswatch: Free themes for Twitter Bootstrap') { + menu = menu + '<li class="divider-vertical"></li> \ <li class="dropdown"> \ <a class="dropdown-toggle" data-toggle="dropdown" href="#">Download <b class="caret"></b></a> \ <ul class="dropdown-menu"> \ @@ -26,5 +26,17 @@ $('.navbar .nav').first().append('<li class="dropdown"> \ <li><a target="_blank" href="variables.less">variables.less</a></li> \ <li><a target="_blank" href="bootswatch.less">bootswatch.less</a></li> \ </ul> \ - </li>'); - }
\ No newline at end of file + </li>'; +} + +menu = menu + ' </ul> \ + <ul class="nav pull-right"> \ + <li><a rel="tooltip" target="_blank" href="http://wrapbootstrap.com" title="Marketplace for premium templates and themes">WrapBootstrap <i class="icon-share-alt icon-white"></i></a></li> \ + </ul>'; + + $('.navbar .nav-collapse').first().append(menu); + + console.log($('a[rel=tooltip]')); + $('a[rel=tooltip]').tooltip({ + 'placement': 'bottom' + });
\ No newline at end of file |