Skip to content

Instantly share code, notes, and snippets.

@make-sum
Last active March 3, 2020 17:07
Show Gist options
  • Save make-sum/e2720fa31cb6e58f4588adac00e94345 to your computer and use it in GitHub Desktop.
Save make-sum/e2720fa31cb6e58f4588adac00e94345 to your computer and use it in GitHub Desktop.
RTL and LTR direction change for Bootstrap using JavaScript i18N
// Eldar: https://stackoverflow.com/questions/19730598/right-to-left-support-for-twitter-bootstrap-3
// Edited for custom implementation
var layout = {};
layout.setDirection = function (direction) {
layout.rtl = (direction === 'rtl');
document.getElementsByTagName("html")[0].style.direction = direction;
var styleSheets = document.styleSheets;
var modifyRule = function (rule) {
if (rule.style.getPropertyValue(layout.rtl ? 'right' : 'left') && rule.selectorText.match(/\.fab-container/)) {
rule.style.setProperty((layout.rtl ? 'left' : 'right'), rule.style.getPropertyValue((layout.rtl ? 'right' : 'left')));
rule.style.removeProperty((layout.rtl ? 'right' : 'left'));
}
if (rule.style.getPropertyValue(layout.rtl ? 'right' : 'left') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-pull-\d\d*/)) {
rule.style.setProperty((layout.rtl ? 'left' : 'right'), rule.style.getPropertyValue((layout.rtl ? 'right' : 'left')));
rule.style.removeProperty((layout.rtl ? 'right' : 'left'));
}
if (rule.style.getPropertyValue(layout.rtl ? 'margin-left' : 'margin-right') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-offset-\d\d*/)) {
rule.style.setProperty((layout.rtl ? 'margin-right' : 'margin-left'), rule.style.getPropertyValue((layout.rtl ? 'margin-left' : 'margin-right')));
rule.style.removeProperty((layout.rtl ? 'margin-left' : 'margin-right'));
}
if (rule.style.getPropertyValue('float') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-\d\d*/)) {
rule.style.setProperty('float', (layout.rtl ? 'right' : 'left'));
}
if (rule.style.getPropertyValue(layout.rtl ? 'right' : 'left') && rule.selectorText.match(/\.rtl-do-not-apply/)) {
//TODO *do not flip
// .image-edge .col-(xs|sm|md|lg)
// .slides
// .col-logo
// first two benfits next to slider on xs
}
if (rule.style.getPropertyValue(layout.rtl ? 'right' : 'left') && rule.selectorText.match(/\.subscribe-btn/)) {
//TODO *flip with input
}
if (rule.style.getPropertyValue(layout.rtl ? 'right' : 'left') && rule.selectorText.match(/\.signup-btn/)) {
//TODO *float right rtl, ul reorder
}
//TODO *mobile menu alignment ? pricing and sign up
};
try {
for (var i = 0; i < styleSheets.length; i++) {
var rules = styleSheets[i].cssRules || styleSheets[i].rules;
if (rules) {
for (var j = 0; j < rules.length; j++) {
if (rules[j].type === 4) {
var mediaRules = rules[j].cssRules || rules[j].rules
for (var y = 0; y < mediaRules.length; y++) {
modifyRule(mediaRules[y]);
}
}
if (rules[j].type === 1) {
modifyRule(rules[j]);
}
}
}
}
} catch (e) {
// Firefox might throw a SecurityError exception but it will work
if (e.name !== 'SecurityError') {
throw e;
}
}
}
layout.setDirection('rtl');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment