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