Last active
March 3, 2020 17:07
-
-
Save make-sum/e2720fa31cb6e58f4588adac00e94345 to your computer and use it in GitHub Desktop.
RTL and LTR direction change for Bootstrap using JavaScript i18N
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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