[Bf-docboard-svn] bf-manual: [7962] trunk/blender_docs/resources: version switch: to fade effect
Tobias Heinke
noreply at blender.org
Sun Apr 18 04:35:23 CEST 2021
Revision: 7962
https://developer.blender.org/rBM7962
Author: TobiasH
Date: 2021-04-18 04:35:22 +0200 (Sun, 18 Apr 2021)
Log Message:
-----------
version switch: to fade effect
language list is too long, add arrow,
replace focus event to get rid of manual bubbling and add them to widget instead of both button and list
remove deprecated key numbers
clean up camelCase
Modified Paths:
--------------
trunk/blender_docs/resources/templates/versions.html
trunk/blender_docs/resources/theme/css/version_switch.css
trunk/blender_docs/resources/theme/js/version_switch.js
Modified: trunk/blender_docs/resources/templates/versions.html
===================================================================
--- trunk/blender_docs/resources/templates/versions.html 2021-04-15 22:57:43 UTC (rev 7961)
+++ trunk/blender_docs/resources/templates/versions.html 2021-04-18 02:35:22 UTC (rev 7962)
@@ -4,17 +4,23 @@
<span id="version-dropdown" class="version-btn" tabindex="0" role="button" aria-label="versions selector" aria-haspopup="true" aria-controls="version-vsnlist" aria-disabled="true">
{{ release }}
</span>
- <ul id="version-vsnlist" class="version-list" role="menu" aria-labelledby="version-dropdown" aria-hidden="true">
- <li role="presentation">Loading...</li>
- </ul>
+ <div class="version-dialog" aria-hidden="true">
+ <div class="version-arrow" aria-hidden="true"></div>
+ <ul id="version-vsnlist" class="version-list" role="menu" aria-labelledby="version-dropdown" aria-hidden="true">
+ <li role="presentation">Loading...</li>
+ </ul>
+ </div>
</li>
<li style="float:right" role="presentation">
<span id="lang-dropdown" class="version-btn" tabindex="0" role="button" aria-label="language selector" aria-haspopup="true" aria-controls="version-langlist">
{% if language is not none %} {{ language }} {% else %} en {% endif %}
</span>
- <ul id="version-langlist" class="version-list" role="menu" aria-labelledby="lang-dropdown" aria-hidden="true">
- <li role="presentation">Loading...</li>
- </ul>
+ <div class="version-dialog" aria-hidden="true">
+ <div class="version-arrow" aria-hidden="true"></div>
+ <ul id="version-langlist" class="version-list" role="menu" aria-labelledby="lang-dropdown" aria-hidden="true">
+ <li role="presentation">Loading...</li>
+ </ul>
+ </div>
</li>
</ul>
</div>
Modified: trunk/blender_docs/resources/theme/css/version_switch.css
===================================================================
--- trunk/blender_docs/resources/theme/css/version_switch.css 2021-04-15 22:57:43 UTC (rev 7961)
+++ trunk/blender_docs/resources/theme/css/version_switch.css 2021-04-18 02:35:22 UTC (rev 7962)
@@ -47,11 +47,9 @@
border-color: #525252;
}
.version-btn-open {
- border-style: solid;
color: gray;
- border-width: 1px;
- border-color: transparent gray gray gray;
- border-radius: 0px 0px 3px 3px;
+ border: solid 1px gray;
+ border-radius: 3px;
cursor: pointer;
}
.version-btn.wait {
@@ -61,7 +59,7 @@
cursor: not-allowed;
color: dimgray;
}
-.version-list {
+.version-dialog {
display: none;
position: absolute;
bottom: 28px;
@@ -68,17 +66,20 @@
width: 140px;
margin: 0 5px;
padding-bottom: 4px;
- text-align: center;
- background-color: #000C;
- border-style: solid;
- border-width: 1px 1px 0px 1px;
- border-color: gray;
+ background-color: #0003;
border-radius: 3px 3px 0px 0px;
- box-shadow: 0 0 6px #000C;
z-index: 399;
max-height: calc(100vh - 30px);
overflow-y: auto;
}
+.version-list {
+ margin-bottom: 4px;
+ text-align: center;
+ background-color: #000C;
+ border: solid 1px gray;
+ border-radius: 3px;
+ box-shadow: 0 0 6px #000C;
+}
.version-list a, .version-list span, .version-list li {
position: relative;
display: block;
@@ -104,4 +105,16 @@
cursor: default;
outline-color: red;
}
+.version-arrow {
+ position: absolute;
+ width: 8px;
+ height: 8px;
+ left: 50%;
+ bottom: 4px;
+ margin-left: -4px;
+ transform: rotate(225deg);
+ background: #ede9e9;
+ border: 1px solid gray;
+ border-width: 1px 0 0 1px;
+}
/* End version. */
Modified: trunk/blender_docs/resources/theme/js/version_switch.js
===================================================================
--- trunk/blender_docs/resources/theme/js/version_switch.js 2021-04-15 22:57:43 UTC (rev 7961)
+++ trunk/blender_docs/resources/theme/js/version_switch.js 2021-04-18 02:35:22 UTC (rev 7962)
@@ -34,7 +34,8 @@
this.listlabel = this.type ? "Versions" : "Language";
this.label = this.listlabel;
this.$btn = $('#' + id);
- this.$list = this.$btn.next();
+ this.$dialog = this.$btn.next();
+ this.$list = this.$dialog.children("ul");
this.sel = null;
this.beforeInit();
}
@@ -43,7 +44,7 @@
beforeInit: function() {
var that=this;
this.$btn.on("click", function(e){that.init();e.preventDefault();e.stopPropagation();});
- this.$btn.on("keydown", function(e) { if(that.keybtnfilter(e)){that.init();e.preventDefault();e.stopPropagation();} });
+ this.$btn.on("keydown", function(e) { if(that.btnKeyFilter(e)){that.init();e.preventDefault();e.stopPropagation();} });
},
init: function() {
this.$btn.off("click");
@@ -75,23 +76,23 @@
var lang = DOCUMENTATION_OPTIONS.LANGUAGE;
if(!lang || lang === "None" || lang === "") {lang = "en";}
- this.warn_old(release, all_versions);
+ this.warnOld(release, all_versions);
- var version = this.get_named(release);
+ var version = this.getNamed(release);
this.label = this.type ? all_versions[version] : all_langs[lang];
- var list = this.build_list(version, lang);
+ var list = this.buildList(version, lang);
this.$list.children(":first-child").remove();
this.$list.append(list);
var that = this;
- this.$list.on("keydown", function(e) {that.keymove(e);});
+ this.$list.on("keydown", function(e) {that.keyMove(e);});
this.$btn.removeClass("wait");
- this.btnhandler();
- this.$btn.on("mousedown", function(e){that.btnhandler(); e.preventDefault()});
- this.$btn.on("keydown", function(e){ if(that.keybtnfilter(e)){that.btnhandler();} });
+ this.btnOpenHandler();
+ this.$btn.on("mousedown", function(e){that.btnOpenHandler(); e.preventDefault()});
+ this.$btn.on("keydown", function(e){ if(that.btnKeyFilter(e)){that.btnOpenHandler();} });
},
-warn_old: function(release, all_versions) {
+warnOld: function(release, all_versions) {
// Note this is effectively disabled now, two issues must fixed:
// * versions.js does not contain a current entry, because that leads to
// duplicate version numbers in the menu. These need to be deduplicated.
@@ -125,8 +126,8 @@
body.prepend(warning);
}
},
-build_list: function(v, l) {
- var neutral_url = this.get_neutral();
+buildList: function(v, l) {
+ var neutral_url = this.getNeutral();
if(this.type) {
var dyn = all_versions;
var cur = v;
@@ -152,12 +153,12 @@
});
return buf.join('');
},
-get_neutral: function() {
+getNeutral: function() {
var url = window.location.href;
var url_re = /\/manual\/([\w|\-|\.]*\/(?:dev|latest|\d\.\d[\w\d\.]*))\//;
return url.replace(url_re, "/manual/");
},
-get_named: function(v) {
+getNamed: function(v) {
$.each(all_versions, function(ix, title) {
if (ix === "dev" || ix === "latest") {
var m = title.match(/\d\.\d[\w\d\.]*/)[0];
@@ -169,7 +170,7 @@
});
return v;
},
-listtoggle: function(speed) {
+dialogToggle: function(speed) {
var wasClose = !this.isOpen;
var that=this;
if(!this.isOpen) {
@@ -176,12 +177,11 @@
this.$btn.addClass("version-btn-open");
this.$btn.removeClass("version-btn");
this.$btn.attr("aria-pressed", true);
- this.$list.attr("aria-hidden", false);
+ this.$dialog.attr("aria-hidden", false);
this.$btn.html(this.listlabel);
- this.$list.slideDown(speed, function() {
- that.$list.on("focusout", function(e) {that.lvefohandler(e); e.stopImmediatePropagation();})
- that.$btn.on("mouseleave", function(e){that.lvefohandler(e); e.stopImmediatePropagation();});
- that.$list.on("mouseleave", function(e){that.lvehandler(e); e.stopImmediatePropagation();});
+ this.$dialog.fadeIn(speed, function() {
+ that.$btn.parent().on("blur", function(e) {that.outHandler(); e.stopImmediatePropagation();})
+ that.$btn.parent().on("mouseleave", function(e){that.outHandler(); e.stopImmediatePropagation();});
});
this.isOpen = true;
} else {
@@ -188,12 +188,12 @@
this.$btn.addClass("version-btn");
this.$btn.removeClass("version-btn-open");
this.$btn.attr("aria-pressed", false);
- this.$list.attr("aria-hidden", true);
+ this.$dialog.attr("aria-hidden", true);
this.$btn.html(this.label);
- this.$btn.off("mouseleave");
- this.$list.off("mouseleave");
- this.$list.off("focusout");
- this.$list.slideUp(speed, function() {
+ this.$btn.parent().off("blur");
+ this.$btn.parent().off("mouseleave");
+ // this.$dialog.off("focusout");
+ this.$dialog.fadeOut(speed, function() {
if(document.activeElement !== null && document.activeElement !== document && document.activeElement !== document.body) {
if(that.$sel) {that.$sel.attr("tabindex", -1);}
that.$btn.focus();
@@ -204,7 +204,7 @@
if(wasClose) {
if(document.activeElement !== null && document.activeElement !== document && document.activeElement !== document.body) {
- var $nw = this.listEnter(this.$btn);
+ var $nw = this.listEnter();
$nw.attr("tabindex", 0);
$nw.focus();
this.$sel = $nw;
@@ -211,62 +211,32 @@
}
}
},
-btnhandler: function() {
- this.listtoggle(300);
+btnOpenHandler: function() {
+ this.dialogToggle(300);
},
-lvefohandler: function(e) {
- var element = e.toElement || e.relatedTarget;
- var i = 0;
- while(i < 4 && element !== null && element.tagName !== "DIV" && element.tagName !== "UL") {
- element = element.parentNode;
- i++;
- }
- if(!this.$list.is(element)) {
- this.listtoggle(200);
- }
- $(e.target).attr("tabindex", -1);
- if($(e.target).attr("id") === "version-dropdown" || $(e.target).attr("id") === "lang-dropdown") {$(e.target).attr("tabindex", 0);}
+outHandler: function() {
+ this.dialogToggle(200);
},
-lvehandler: function(e) {
- var element = e.toElement || e.relatedTarget;
- if(element !== null && element.tagName !== "SPAN") {
- if(!this.$btn.is(element)) {
- this.listtoggle(300);
- }
- }
-},
-keybtnfilter: function(e) {
+btnKeyFilter: function(e) {
if (e.ctrlKey || e.shiftKey) {return false;}
- var k = e.which || e.keyCode;
- if(e.key === " " || e.key === "Enter" || (e.key === "ArrowDown" && e.altKey) || e.key === "ArrowDown" || e.key === "ArrowUp" ||
- k === 32 || k === 13 || (k === 40 && e.altKey) || k === 40 || k === 38) {
+ if(e.key === " " || e.key === "Enter" || (e.key === "ArrowDown" && e.altKey) || e.key === "ArrowDown" || e.key === "ArrowUp") {
return true;
}
return false;
},
-keymove: function(e) {
+keyMove: function(e) {
if (e.ctrlKey || e.shiftKey) {return true;}
- var p = false;
- var k = e.which || e.keyCode;
+ var p = true;
var $nw = $(e.target);
- if(e.key === "ArrowUp" || k === 38) {
- p = true;
- $nw = this.listPrev($nw);
- } else if (e.key === "ArrowDown" || k === 40) {
- p = true;
@@ Diff output truncated at 10240 characters. @@
More information about the Bf-docboard-svn
mailing list