| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | /** |
| A | 2 | <b>RTL</b> (right-to-left direction for Arabic, Hebrew, Persian languages). |
| 3 | It's good for demo only. | |
| 4 | You should hard code RTL-specific changes inside your HTML/server-side code. | |
| 5 | Dynamically switching to RTL using Javascript is not a good idea. | |
| 6 | Please refer to documentation for more info. | |
| 7 | */ | |
| 8 | ||
| 9 | ||
| 10 | (function($ , undefined) { | |
| 11 | //Switching to RTL (right to left) Mode | |
| 12 | $('#ace-settings-rtl').removeAttr('checked').on('click', function(){ | |
| 13 | switch_direction(); | |
| 14 | }); | |
| 15 | ||
| 16 | ||
| 17 | //>>> you should hard code changes inside HTML for RTL direction | |
| 18 | //you shouldn't use this function to switch direction | |
| 19 | //this is only for dynamically switching for Ace's demo | |
| 20 | //take a look at this function to see what changes should be made | |
| 21 | //also take a look at docs for some tips | |
| 22 | var switch_direction = function() { | |
| 23 | if($('#ace-rtl-stylesheet').length == 0) { | |
| 24 | //let's load RTL stylesheet only when needed! | |
| 25 | var ace_style = $('head').find('link.ace-main-stylesheet'); | |
| 26 | if(ace_style.length == 0) { | |
| 27 | ace_style = $('head').find('link[href*="/ace.min.css"],link[href*="/ace-part2.min.css"]'); | |
| 28 | if(ace_style.length == 0) { | |
| 29 | ace_style = $('head').find('link[href*="/ace.css"],link[href*="/ace-part2.css"]'); | |
| 30 | } | |
| 31 | } | |
| 32 | ||
| 33 | var ace_skins = $('head').find('link#ace-skins-stylesheet'); | |
| 34 | var stylesheet_url = ace_style.first().attr('href').replace(/(\.min)?\.css$/i , '-rtl$1.css'); | |
| 35 | $.ajax({ | |
| 36 | 'url': stylesheet_url | |
| 37 | }).done(function() { | |
| 38 | var new_link = jQuery('<link />', {type : 'text/css', rel: 'stylesheet', 'id': 'ace-rtl-stylesheet'}) | |
| 39 | if(ace_skins.length > 0) { | |
| 40 | new_link.insertAfter(ace_skins); | |
| 41 | } | |
| 42 | else if(ace_style.length > 0){ | |
| 43 | new_link.insertAfter(ace_style.last()); | |
| 44 | } | |
| 45 | else new_link.appendTo('head'); | |
| 46 | ||
| 47 | new_link.attr('href', stylesheet_url); | |
| 48 | //we set "href" after insertion, for IE to work | |
| 49 | ||
| 50 | applyChanges(); | |
| 51 | if(window.Pace && Pace.running) Pace.stop(); | |
| 52 | }) | |
| 53 | } | |
| 54 | else { | |
| 55 | applyChanges(); | |
| 56 | } | |
| 57 | ||
| 58 | //in ajax when new content is loaded, we dynamically apply RTL changes again | |
| 59 | //please note that this is only for Ace demo | |
| 60 | //for info about RTL see Ace's docs | |
| 61 | $('.page-content-area[data-ajax-content=true]').on('ajaxscriptsloaded.rtl', function() { | |
| 62 | if( $('body').hasClass('rtl') ) { | |
| 63 | applyChanges(this); | |
| 64 | } | |
| 65 | }); | |
| 66 | ||
| 67 | ///////////////////////// | |
| 68 | function applyChanges(el) { | |
| 69 | var $body = $(document.body); | |
| 70 | if(!el) $body.toggleClass('rtl');//el is 'body' | |
| 71 | ||
| 72 | el = el || document.body; | |
| 73 | var $container = $(el); | |
| 74 | $container | |
| 75 | //toggle pull-right class on dropdown-menu | |
| 76 | .find('.dropdown-menu:not(.datepicker-dropdown,.colorpicker)').toggleClass('dropdown-menu-right') | |
| 77 | .end() | |
| 78 | //swap pull-left & pull-right | |
| 79 | .find('.pull-right:not(.dropdown-menu,blockquote,.profile-skills .pull-right)').removeClass('pull-right').addClass('tmp-rtl-pull-right') | |
| 80 | .end() | |
| 81 | .find('.pull-left:not(.dropdown-submenu,.profile-skills .pull-left)').removeClass('pull-left').addClass('pull-right') | |
| 82 | .end() | |
| 83 | .find('.tmp-rtl-pull-right').removeClass('tmp-rtl-pull-right').addClass('pull-left') | |
| 84 | .end() | |
| 85 | ||
| 86 | .find('.chosen-select').toggleClass('chosen-rtl').next().toggleClass('chosen-rtl'); | |
| 87 | ||
| 88 | ||
| 89 | function swap_classes(class1, class2) { | |
| 90 | $container | |
| 91 | .find('.'+class1).removeClass(class1).addClass('tmp-rtl-'+class1) | |
| 92 | .end() | |
| 93 | .find('.'+class2).removeClass(class2).addClass(class1) | |
| 94 | .end() | |
| 95 | .find('.tmp-rtl-'+class1).removeClass('tmp-rtl-'+class1).addClass(class2) | |
| 96 | } | |
| 97 | ||
| 98 | swap_classes('align-left', 'align-right'); | |
| 99 | swap_classes('no-padding-left', 'no-padding-right'); | |
| 100 | swap_classes('arrowed', 'arrowed-right'); | |
| 101 | swap_classes('arrowed-in', 'arrowed-in-right'); | |
| 102 | swap_classes('tabs-left', 'tabs-right'); | |
| 103 | swap_classes('messagebar-item-left', 'messagebar-item-right');//for inbox page | |
| 104 | ||
| 105 | $('.modal.aside-vc').ace_aside('flip').ace_aside('insideContainer'); | |
| 106 | ||
| 107 | ||
| 108 | //mirror all icons and attributes that have a "fa-*-right|left" attrobute | |
| 109 | $container.find('.fa').each(function() { | |
| 110 | if(this.className.match(/ui-icon/) || $(this).closest('.fc-button').length > 0) return; | |
| 111 | //skip mirroring icons of plugins that have built in RTL support | |
| 112 | ||
| 113 | var l = this.attributes.length; | |
| 114 | for(var i = 0 ; i < l ; i++) { | |
| 115 | var val = this.attributes[i].value; | |
| 116 | if(val.match(/fa\-(?:[\w\-]+)\-left/)) | |
| 117 | this.attributes[i].value = val.replace(/fa\-([\w\-]+)\-(left)/i , 'fa-$1-right') | |
| 118 | else if(val.match(/fa\-(?:[\w\-]+)\-right/)) | |
| 119 | this.attributes[i].value = val.replace(/fa\-([\w\-]+)\-(right)/i , 'fa-$1-left') | |
| 120 | } | |
| 121 | }); | |
| 122 | ||
| 123 | //browsers are incosistent with horizontal scroll and RTL | |
| 124 | //so let's make our scrollbars LTR and wrap the content inside RTL | |
| 125 | var rtl = $body.hasClass('rtl'); | |
| 126 | if(rtl) { | |
| 127 | $container.find('.scroll-hz').addClass('make-ltr') | |
| 128 | .find('.scroll-content') | |
| 129 | .wrapInner('<div class="make-rtl" />'); | |
| 130 | $('.sidebar[data-sidebar-hover=true]').ace_sidebar_hover('changeDir', 'right'); | |
| 131 | } | |
| 132 | else { | |
| 133 | //remove the wrap | |
| 134 | $container.find('.scroll-hz').removeClass('make-ltr') | |
| 135 | .find('.make-rtl').children().unwrap(); | |
| 136 | $('.sidebar[data-sidebar-hover=true]').ace_sidebar_hover('changeDir', 'left'); | |
| 137 | } | |
| 138 | if($.fn.ace_scroll) $container.find('.scroll-hz').ace_scroll('reset') //to reset scrollLeft | |
| 139 | ||
| 140 | //redraw the traffic pie chart on homepage with a different parameter | |
| 141 | try { | |
| 142 | var placeholder = $('#piechart-placeholder'); | |
| 143 | if(placeholder.length > 0) { | |
| 144 | var pos = $body.hasClass('rtl') ? 'nw' : 'ne';//draw on north-west or north-east? | |
| 145 | placeholder.data('draw').call(placeholder.get(0) , placeholder, placeholder.data('chart'), pos); | |
| 146 | } | |
| 147 | }catch(e) {} | |
| 148 | ||
| 149 | ||
| 150 | ace.helper.redraw(el, true); | |
| 151 | } | |
| 152 | } | |
| 153 | })(jQuery); | |
| 154 | ||
| 155 | ||
