提交 | 用户 | 时间
|
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 |
|