From 56661f7f1b96df478ce8315bfbce4afbf60ceb23 Mon Sep 17 00:00:00 2001 From: Nick Doiron Date: Sat, 9 May 2015 15:31:11 -0400 Subject: [PATCH] flip left and right on tooltips and popovers [#67] --- Gruntfile.js | 18 ++++++-- bower.json | 3 +- dist/css/bootstrap-flipped.css | 42 +++++++++++++++++ dist/css/bootstrap-rtl.css | 83 +++++++++++++++++++++++++++++++++- dist/js/bootstrap-rtl.min.js | 2 + js/bootstrap-rtl-addons.js | 8 ++++ less/bootstrap-rtl.less | 2 +- less/popovers-rtl.less | 45 +++++++++++++++++- less/tooltip-rtl.less | 45 ++++++++++++++++++ package.json | 3 +- 10 files changed, 242 insertions(+), 9 deletions(-) create mode 100644 dist/js/bootstrap-rtl.min.js create mode 100644 js/bootstrap-rtl-addons.js create mode 100644 less/tooltip-rtl.less diff --git a/Gruntfile.js b/Gruntfile.js index 4e4f7c1..bd5a29a 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -62,7 +62,18 @@ module.exports = function(grunt) { 'dist/css/bootstrap-flipped.css', 'dist/css/<%= pkg.name %>.min.css', 'dist/css/bootstrap-flipped.min.css'] - } + } + }, + + uglify: { + options: { + mangle: false + }, + my_target: { + files: { + 'dist/js/bootstrap-rtl.min.js': ['examples/originals/dist/js/bootstrap.js', 'js/bootstrap-rtl-addons.js'] + } + } } }); @@ -70,7 +81,8 @@ module.exports = function(grunt) { // Load uglify plugin grunt.loadNpmTasks('grunt-contrib-less'); grunt.loadNpmTasks('grunt-banner'); +grunt.loadNpmTasks('grunt-contrib-uglify'); // Default Task -grunt.registerTask('default', ['less', 'usebanner']); -}; \ No newline at end of file +grunt.registerTask('default', ['less', 'usebanner', 'uglify']); +}; diff --git a/bower.json b/bower.json index 01c2e36..285d240 100644 --- a/bower.json +++ b/bower.json @@ -7,7 +7,8 @@ "Morteza Ansarinia (http://github.com/morteza)" ], "main": [ - "dist/css/bootstrap-rtl.css" + "dist/css/bootstrap-rtl.css", + "dist/js/bootstrap-rtl.min.js" ], "ignore": [ "**/.*", diff --git a/dist/css/bootstrap-flipped.css b/dist/css/bootstrap-flipped.css index 3ef91c8..b371965 100644 --- a/dist/css/bootstrap-flipped.css +++ b/dist/css/bootstrap-flipped.css @@ -1408,6 +1408,48 @@ th { margin-right: -10px; margin-left: auto; } +.popover.right { + margin-left: -10px; +} +.popover.left { + margin-left: 10px; +} +.popover.right > .arrow { + right: -11px; + left: auto; + border-right-width: 0; + border-left-width: 10px; + border-left-color: #999999; + border-left-color: rgba(0, 0, 0, 0.25); + border-right-color: transparent; +} +.popover.right > .arrow:after { + content: " "; + left: auto; + right: 1px; + border-right-width: 0; + border-left-width: 10px; + border-left-color: #ffffff; + border-right-color: transparent; +} +.popover.left > .arrow { + left: -11px; + right: auto; + border-left-width: 0; + border-right-width: 10px; + border-right-color: #999999; + border-right-color: rgba(0, 0, 0, 0.25); + border-left-color: transparent; +} +.popover.left > .arrow:after { + content: " "; + left: 1px; + right: auto; + border-left-width: 0; + border-right-width: 10px; + border-right-color: #ffffff; + border-left-color: transparent; +} .carousel-control { right: 0; bottom: 0; diff --git a/dist/css/bootstrap-rtl.css b/dist/css/bootstrap-rtl.css index 43175fe..34cbcc4 100644 --- a/dist/css/bootstrap-rtl.css +++ b/dist/css/bootstrap-rtl.css @@ -1,7 +1,7 @@ /******************************************************************************* * bootstrap-rtl (version 3.3.2-rc1) * Author: Morteza Ansarinia (http://github.com/morteza) - * Created on: March 05,2015 + * Created on: May 09,2015 * Project: bootstrap-rtl * Copyright: Unlicensed Public Domain *******************************************************************************/ @@ -1382,6 +1382,45 @@ th { margin-right: 0; margin-left: auto; } +.tooltip.right { + margin-left: -3px; + padding: 0 5px; +} +.tooltip.left { + margin-left: 3px; + padding: 0 5px; +} +.tooltip.top-left .tooltip-arrow { + left: 5px; + right: auto; +} +.tooltip.top-right .tooltip-arrow { + right: 5px; + left: auto; +} +.tooltip.right .tooltip-arrow { + right: 0; + left: auto; + border-width: 5px 0 5px 5px; + border-left-color: #000000; + border-right-color: transparent; +} +.tooltip.left .tooltip-arrow { + left: 0; + right: auto; + border-width: 5px 0 5px 5px; + border-width: 5px 5px 5px 0; + border-right-color: #000000; + border-left-color: transparent; +} +.tooltip.bottom-left .tooltip-arrow { + left: 5px; + right: auto; +} +.tooltip.bottom-right .tooltip-arrow { + right: 5px; + left: auto; +} .popover { left: auto; text-align: right; @@ -1406,6 +1445,48 @@ th { margin-right: -10px; margin-left: auto; } +.popover.right { + margin-left: -10px; +} +.popover.left { + margin-left: 10px; +} +.popover.right > .arrow { + right: -11px; + left: auto; + border-right-width: 0; + border-left-width: 10px; + border-left-color: #999999; + border-left-color: rgba(0, 0, 0, 0.25); + border-right-color: transparent; +} +.popover.right > .arrow:after { + content: " "; + left: auto; + right: 1px; + border-right-width: 0; + border-left-width: 10px; + border-left-color: #ffffff; + border-right-color: transparent; +} +.popover.left > .arrow { + left: -11px; + right: auto; + border-left-width: 0; + border-right-width: 10px; + border-right-color: #999999; + border-right-color: rgba(0, 0, 0, 0.25); + border-left-color: transparent; +} +.popover.left > .arrow:after { + content: " "; + left: 1px; + right: auto; + border-left-width: 0; + border-right-width: 10px; + border-right-color: #ffffff; + border-left-color: transparent; +} .carousel-control { right: 0; bottom: 0; diff --git a/dist/js/bootstrap-rtl.min.js b/dist/js/bootstrap-rtl.min.js new file mode 100644 index 0000000..1a8109d --- /dev/null +++ b/dist/js/bootstrap-rtl.min.js @@ -0,0 +1,2 @@ +if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function($){"use strict";var version=$.fn.jquery.split(" ")[0].split(".");if(version[0]<2&&version[1]<9||1==version[0]&&9==version[1]&&version[2]<1)throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher")}(jQuery),+function($){"use strict";function transitionEnd(){var el=document.createElement("bootstrap"),transEndEventNames={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var name in transEndEventNames)if(void 0!==el.style[name])return{end:transEndEventNames[name]};return!1}$.fn.emulateTransitionEnd=function(duration){var called=!1,$el=this;$(this).one("bsTransitionEnd",function(){called=!0});var callback=function(){called||$($el).trigger($.support.transition.end)};return setTimeout(callback,duration),this},$(function(){$.support.transition=transitionEnd(),$.support.transition&&($.event.special.bsTransitionEnd={bindType:$.support.transition.end,delegateType:$.support.transition.end,handle:function(e){return $(e.target).is(this)?e.handleObj.handler.apply(this,arguments):void 0}})})}(jQuery),+function($){"use strict";function Plugin(option){return this.each(function(){var $this=$(this),data=$this.data("bs.alert");data||$this.data("bs.alert",data=new Alert(this)),"string"==typeof option&&data[option].call($this)})}var dismiss='[data-dismiss="alert"]',Alert=function(el){$(el).on("click",dismiss,this.close)};Alert.VERSION="3.3.4",Alert.TRANSITION_DURATION=150,Alert.prototype.close=function(e){function removeElement(){$parent.detach().trigger("closed.bs.alert").remove()}var $this=$(this),selector=$this.attr("data-target");selector||(selector=$this.attr("href"),selector=selector&&selector.replace(/.*(?=#[^\s]*$)/,""));var $parent=$(selector);e&&e.preventDefault(),$parent.length||($parent=$this.closest(".alert")),$parent.trigger(e=$.Event("close.bs.alert")),e.isDefaultPrevented()||($parent.removeClass("in"),$.support.transition&&$parent.hasClass("fade")?$parent.one("bsTransitionEnd",removeElement).emulateTransitionEnd(Alert.TRANSITION_DURATION):removeElement())};var old=$.fn.alert;$.fn.alert=Plugin,$.fn.alert.Constructor=Alert,$.fn.alert.noConflict=function(){return $.fn.alert=old,this},$(document).on("click.bs.alert.data-api",dismiss,Alert.prototype.close)}(jQuery),+function($){"use strict";function Plugin(option){return this.each(function(){var $this=$(this),data=$this.data("bs.button"),options="object"==typeof option&&option;data||$this.data("bs.button",data=new Button(this,options)),"toggle"==option?data.toggle():option&&data.setState(option)})}var Button=function(element,options){this.$element=$(element),this.options=$.extend({},Button.DEFAULTS,options),this.isLoading=!1};Button.VERSION="3.3.4",Button.DEFAULTS={loadingText:"loading..."},Button.prototype.setState=function(state){var d="disabled",$el=this.$element,val=$el.is("input")?"val":"html",data=$el.data();state+="Text",null==data.resetText&&$el.data("resetText",$el[val]()),setTimeout($.proxy(function(){$el[val](null==data[state]?this.options[state]:data[state]),"loadingText"==state?(this.isLoading=!0,$el.addClass(d).attr(d,d)):this.isLoading&&(this.isLoading=!1,$el.removeClass(d).removeAttr(d))},this),0)},Button.prototype.toggle=function(){var changed=!0,$parent=this.$element.closest('[data-toggle="buttons"]');if($parent.length){var $input=this.$element.find("input");"radio"==$input.prop("type")&&($input.prop("checked")&&this.$element.hasClass("active")?changed=!1:$parent.find(".active").removeClass("active")),changed&&$input.prop("checked",!this.$element.hasClass("active")).trigger("change")}else this.$element.attr("aria-pressed",!this.$element.hasClass("active"));changed&&this.$element.toggleClass("active")};var old=$.fn.button;$.fn.button=Plugin,$.fn.button.Constructor=Button,$.fn.button.noConflict=function(){return $.fn.button=old,this},$(document).on("click.bs.button.data-api",'[data-toggle^="button"]',function(e){var $btn=$(e.target);$btn.hasClass("btn")||($btn=$btn.closest(".btn")),Plugin.call($btn,"toggle"),e.preventDefault()}).on("focus.bs.button.data-api blur.bs.button.data-api",'[data-toggle^="button"]',function(e){$(e.target).closest(".btn").toggleClass("focus",/^focus(in)?$/.test(e.type))})}(jQuery),+function($){"use strict";function Plugin(option){return this.each(function(){var $this=$(this),data=$this.data("bs.carousel"),options=$.extend({},Carousel.DEFAULTS,$this.data(),"object"==typeof option&&option),action="string"==typeof option?option:options.slide;data||$this.data("bs.carousel",data=new Carousel(this,options)),"number"==typeof option?data.to(option):action?data[action]():options.interval&&data.pause().cycle()})}var Carousel=function(element,options){this.$element=$(element),this.$indicators=this.$element.find(".carousel-indicators"),this.options=options,this.paused=null,this.sliding=null,this.interval=null,this.$active=null,this.$items=null,this.options.keyboard&&this.$element.on("keydown.bs.carousel",$.proxy(this.keydown,this)),"hover"==this.options.pause&&!("ontouchstart"in document.documentElement)&&this.$element.on("mouseenter.bs.carousel",$.proxy(this.pause,this)).on("mouseleave.bs.carousel",$.proxy(this.cycle,this))};Carousel.VERSION="3.3.4",Carousel.TRANSITION_DURATION=600,Carousel.DEFAULTS={interval:5e3,pause:"hover",wrap:!0,keyboard:!0},Carousel.prototype.keydown=function(e){if(!/input|textarea/i.test(e.target.tagName)){switch(e.which){case 37:this.prev();break;case 39:this.next();break;default:return}e.preventDefault()}},Carousel.prototype.cycle=function(e){return e||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval($.proxy(this.next,this),this.options.interval)),this},Carousel.prototype.getItemIndex=function(item){return this.$items=item.parent().children(".item"),this.$items.index(item||this.$active)},Carousel.prototype.getItemForDirection=function(direction,active){var activeIndex=this.getItemIndex(active),willWrap="prev"==direction&&0===activeIndex||"next"==direction&&activeIndex==this.$items.length-1;if(willWrap&&!this.options.wrap)return active;var delta="prev"==direction?-1:1,itemIndex=(activeIndex+delta)%this.$items.length;return this.$items.eq(itemIndex)},Carousel.prototype.to=function(pos){var that=this,activeIndex=this.getItemIndex(this.$active=this.$element.find(".item.active"));return pos>this.$items.length-1||0>pos?void 0:this.sliding?this.$element.one("slid.bs.carousel",function(){that.to(pos)}):activeIndex==pos?this.pause().cycle():this.slide(pos>activeIndex?"next":"prev",this.$items.eq(pos))},Carousel.prototype.pause=function(e){return e||(this.paused=!0),this.$element.find(".next, .prev").length&&$.support.transition&&(this.$element.trigger($.support.transition.end),this.cycle(!0)),this.interval=clearInterval(this.interval),this},Carousel.prototype.next=function(){return this.sliding?void 0:this.slide("next")},Carousel.prototype.prev=function(){return this.sliding?void 0:this.slide("prev")},Carousel.prototype.slide=function(type,next){var $active=this.$element.find(".item.active"),$next=next||this.getItemForDirection(type,$active),isCycling=this.interval,direction="next"==type?"left":"right",that=this;if($next.hasClass("active"))return this.sliding=!1;var relatedTarget=$next[0],slideEvent=$.Event("slide.bs.carousel",{relatedTarget:relatedTarget,direction:direction});if(this.$element.trigger(slideEvent),!slideEvent.isDefaultPrevented()){if(this.sliding=!0,isCycling&&this.pause(),this.$indicators.length){this.$indicators.find(".active").removeClass("active");var $nextIndicator=$(this.$indicators.children()[this.getItemIndex($next)]);$nextIndicator&&$nextIndicator.addClass("active")}var slidEvent=$.Event("slid.bs.carousel",{relatedTarget:relatedTarget,direction:direction});return $.support.transition&&this.$element.hasClass("slide")?($next.addClass(type),$next[0].offsetWidth,$active.addClass(direction),$next.addClass(direction),$active.one("bsTransitionEnd",function(){$next.removeClass([type,direction].join(" ")).addClass("active"),$active.removeClass(["active",direction].join(" ")),that.sliding=!1,setTimeout(function(){that.$element.trigger(slidEvent)},0)}).emulateTransitionEnd(Carousel.TRANSITION_DURATION)):($active.removeClass("active"),$next.addClass("active"),this.sliding=!1,this.$element.trigger(slidEvent)),isCycling&&this.cycle(),this}};var old=$.fn.carousel;$.fn.carousel=Plugin,$.fn.carousel.Constructor=Carousel,$.fn.carousel.noConflict=function(){return $.fn.carousel=old,this};var clickHandler=function(e){var href,$this=$(this),$target=$($this.attr("data-target")||(href=$this.attr("href"))&&href.replace(/.*(?=#[^\s]+$)/,""));if($target.hasClass("carousel")){var options=$.extend({},$target.data(),$this.data()),slideIndex=$this.attr("data-slide-to");slideIndex&&(options.interval=!1),Plugin.call($target,options),slideIndex&&$target.data("bs.carousel").to(slideIndex),e.preventDefault()}};$(document).on("click.bs.carousel.data-api","[data-slide]",clickHandler).on("click.bs.carousel.data-api","[data-slide-to]",clickHandler),$(window).on("load",function(){$('[data-ride="carousel"]').each(function(){var $carousel=$(this);Plugin.call($carousel,$carousel.data())})})}(jQuery),+function($){"use strict";function getTargetFromTrigger($trigger){var href,target=$trigger.attr("data-target")||(href=$trigger.attr("href"))&&href.replace(/.*(?=#[^\s]+$)/,"");return $(target)}function Plugin(option){return this.each(function(){var $this=$(this),data=$this.data("bs.collapse"),options=$.extend({},Collapse.DEFAULTS,$this.data(),"object"==typeof option&&option);!data&&options.toggle&&/show|hide/.test(option)&&(options.toggle=!1),data||$this.data("bs.collapse",data=new Collapse(this,options)),"string"==typeof option&&data[option]()})}var Collapse=function(element,options){this.$element=$(element),this.options=$.extend({},Collapse.DEFAULTS,options),this.$trigger=$('[data-toggle="collapse"][href="#'+element.id+'"],[data-toggle="collapse"][data-target="#'+element.id+'"]'),this.transitioning=null,this.options.parent?this.$parent=this.getParent():this.addAriaAndCollapsedClass(this.$element,this.$trigger),this.options.toggle&&this.toggle()};Collapse.VERSION="3.3.4",Collapse.TRANSITION_DURATION=350,Collapse.DEFAULTS={toggle:!0},Collapse.prototype.dimension=function(){var hasWidth=this.$element.hasClass("width");return hasWidth?"width":"height"},Collapse.prototype.show=function(){if(!this.transitioning&&!this.$element.hasClass("in")){var activesData,actives=this.$parent&&this.$parent.children(".panel").children(".in, .collapsing");if(!(actives&&actives.length&&(activesData=actives.data("bs.collapse"),activesData&&activesData.transitioning))){var startEvent=$.Event("show.bs.collapse");if(this.$element.trigger(startEvent),!startEvent.isDefaultPrevented()){actives&&actives.length&&(Plugin.call(actives,"hide"),activesData||actives.data("bs.collapse",null));var dimension=this.dimension();this.$element.removeClass("collapse").addClass("collapsing")[dimension](0).attr("aria-expanded",!0),this.$trigger.removeClass("collapsed").attr("aria-expanded",!0),this.transitioning=1;var complete=function(){this.$element.removeClass("collapsing").addClass("collapse in")[dimension](""),this.transitioning=0,this.$element.trigger("shown.bs.collapse")};if(!$.support.transition)return complete.call(this);var scrollSize=$.camelCase(["scroll",dimension].join("-"));this.$element.one("bsTransitionEnd",$.proxy(complete,this)).emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])}}}},Collapse.prototype.hide=function(){if(!this.transitioning&&this.$element.hasClass("in")){var startEvent=$.Event("hide.bs.collapse");if(this.$element.trigger(startEvent),!startEvent.isDefaultPrevented()){var dimension=this.dimension();this.$element[dimension](this.$element[dimension]())[0].offsetHeight,this.$element.addClass("collapsing").removeClass("collapse in").attr("aria-expanded",!1),this.$trigger.addClass("collapsed").attr("aria-expanded",!1),this.transitioning=1;var complete=function(){this.transitioning=0,this.$element.removeClass("collapsing").addClass("collapse").trigger("hidden.bs.collapse")};return $.support.transition?void this.$element[dimension](0).one("bsTransitionEnd",$.proxy(complete,this)).emulateTransitionEnd(Collapse.TRANSITION_DURATION):complete.call(this)}}},Collapse.prototype.toggle=function(){this[this.$element.hasClass("in")?"hide":"show"]()},Collapse.prototype.getParent=function(){return $(this.options.parent).find('[data-toggle="collapse"][data-parent="'+this.options.parent+'"]').each($.proxy(function(i,element){var $element=$(element);this.addAriaAndCollapsedClass(getTargetFromTrigger($element),$element)},this)).end()},Collapse.prototype.addAriaAndCollapsedClass=function($element,$trigger){var isOpen=$element.hasClass("in");$element.attr("aria-expanded",isOpen),$trigger.toggleClass("collapsed",!isOpen).attr("aria-expanded",isOpen)};var old=$.fn.collapse;$.fn.collapse=Plugin,$.fn.collapse.Constructor=Collapse,$.fn.collapse.noConflict=function(){return $.fn.collapse=old,this},$(document).on("click.bs.collapse.data-api",'[data-toggle="collapse"]',function(e){var $this=$(this);$this.attr("data-target")||e.preventDefault();var $target=getTargetFromTrigger($this),data=$target.data("bs.collapse"),option=data?"toggle":$this.data();Plugin.call($target,option)})}(jQuery),+function($){"use strict";function clearMenus(e){e&&3===e.which||($(backdrop).remove(),$(toggle).each(function(){var $this=$(this),$parent=getParent($this),relatedTarget={relatedTarget:this};$parent.hasClass("open")&&($parent.trigger(e=$.Event("hide.bs.dropdown",relatedTarget)),e.isDefaultPrevented()||($this.attr("aria-expanded","false"),$parent.removeClass("open").trigger("hidden.bs.dropdown",relatedTarget)))}))}function getParent($this){var selector=$this.attr("data-target");selector||(selector=$this.attr("href"),selector=selector&&/#[A-Za-z]/.test(selector)&&selector.replace(/.*(?=#[^\s]*$)/,""));var $parent=selector&&$(selector);return $parent&&$parent.length?$parent:$this.parent()}function Plugin(option){return this.each(function(){var $this=$(this),data=$this.data("bs.dropdown");data||$this.data("bs.dropdown",data=new Dropdown(this)),"string"==typeof option&&data[option].call($this)})}var backdrop=".dropdown-backdrop",toggle='[data-toggle="dropdown"]',Dropdown=function(element){$(element).on("click.bs.dropdown",this.toggle)};Dropdown.VERSION="3.3.4",Dropdown.prototype.toggle=function(e){var $this=$(this);if(!$this.is(".disabled, :disabled")){var $parent=getParent($this),isActive=$parent.hasClass("open");if(clearMenus(),!isActive){"ontouchstart"in document.documentElement&&!$parent.closest(".navbar-nav").length&&$('