[ADD] doc: language switcher

doc/_themes/odoodoc/static/app.js

@@ -25,6 +25,76 @@ $(function () {
         });
     }, 100);
 
+    // lang switcher
+    function findSheet(pattern, fromSheet) {
+        if (fromSheet) {
+            for(var i=0; i<fromSheet.cssRules.length; ++i) {
+                var rule = fromSheet.cssRules[i];
+                if (rule.type !== CSSRule.IMPORT_RULE) { continue; }
+                if (pattern.test(rule.href)) {
+                    return rule.styleSheet;
+                }
+            }
+            return null;
+        }
+        var sheets = document.styleSheets;
+        for(var j=0; j<sheets.length; ++j) {
+            var sheet = sheets[j];
+            if (pattern.test(sheet.href)) {
+                return sheet;
+            }
+            var subSheet;
+            if (subSheet = findSheet(pattern, sheet)) {
+                return subSheet;
+            }
+        }
+        return null;
+    }
+    function buildSwitcher(languages) {
+        var root = document.createElement('ul');
+        root.className = "switcher";
+        for(var i=0; i<languages.length; ++i) {
+            var item = document.createElement('li');
+            item.textContent = languages[i];
+            if (i === 0) {
+                item.className = "active";
+            }
+            root.appendChild(item);
+        }
+        return root;
+    }
+    if ($('div.document-super').hasClass('stripe')) { (function () {
+        var sheet = findSheet(/style\.css$/);
+        if (!sheet) { return; }
+
+        // collect languages
+        var languages = {};
+        $('div.switchable').each(function () {
+            var classes = this.className.split(/\s+/);
+            for (var i = 0; i < classes.length; ++i) {
+                var cls = classes[i];
+                if (!/^highlight-/.test(cls)) { continue; }
+                languages[cls.slice(10)] = true;
+            }
+        });
+
+        $(buildSwitcher(Object.keys(languages)))
+            .prependTo('div.documentwrapper')
+            .on('click', 'li', function (e) {
+                $(e.target).addClass('active')
+                    .siblings().removeClass('active');
+                var id = e.target.textContent;
+                var lastIndex = sheet.cssRules.length - 1;
+                var content = sheet.cssRules[lastIndex].style.cssText;
+                var sel = [
+                    '.stripe .only-', id, ', ',
+                    '.stripe .highlight-', id, ' > .highlight'
+                ].join('');
+                sheet.deleteRule(lastIndex);
+                sheet.insertRule(sel + '{' + content + '}', lastIndex);
+        });
+    })(); }
+
     // Config ZeroClipboard
     ZeroClipboard.config({
         moviePath: '_static/ZeroClipboard.swf',

doc/_themes/odoodoc/static/style.css

@@ -6757,8 +6757,43 @@ td.field-body > ul {
     border-left: 1px solid #777777;
   }
 }
-.stripe .switchable > .highlight,
-.stripe [class*=only-] {
+.stripe .switcher {
+  color: white;
+  width: auto !important;
+  float: none !important;
+  position: fixed;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-justify-content: flex-end;
+  justify-content: flex-end;
+  right: 0.5em;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  z-index: 5;
+}
+.stripe .switcher li {
+  background-color: #0f131a;
+  padding: 0.4em 1em;
+  border: 1px solid #333;
+  border-left-width: 0;
+  cursor: pointer;
+}
+.stripe .switcher li:first-child {
+  border-left-width: 1px;
+  border-radius: 5px 0 0 5px;
+}
+.stripe .switcher li:last-child {
+  border-radius: 0 5px 5px 0;
+}
+.stripe .switcher li:hover {
+  background-color: #222;
+}
+.stripe .switcher li.active {
+  background-color: #333;
+}
+.stripe [class*=only-],
+.stripe .switchable > .highlight {
   display: none;
 }
 .stripe .only-python,

doc/_themes/odoodoc/static/style.less

@@ -593,9 +593,49 @@ td.field-body {
       }
     }
   }
+
+  .switcher {
+    color: white;
+    width: auto !important;
+    float: none !important;
+
+    position: fixed;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-justify-content: flex-end;
+    justify-content: flex-end;
+
+    right: 0.5em;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    z-index: 5;
+
+    li {
+      background-color: #0f131a;
+      padding: 0.4em 1em;
+      border: 1px solid #333;
+      border-left-width: 0;
+      cursor: pointer;
+      &:first-child {
+        border-left-width: 1px;
+        border-radius: 5px 0 0 5px;
+      }
+      &:last-child {
+        border-radius: 0 5px 5px 0;
+      }
+      &:hover {
+        background-color: #222;
+      }
+      &.active {
+        background-color: #333;
+      }
+    }
+  }
+
   // === show/hide code snippets ===
-  .switchable > .highlight,
-  [class*=only-] {
+  [class*=only-],
+  .switchable > .highlight {
     display: none;
   }
   // must be final rule of page