jim60105/三向語言標籤.html

## 三向語言標籤.html
<!-- This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>. -->

<style type="text/css">
  .animate {
    -moz-transition: 0.4s all;
    -o-transition: 0.4s all;
  	-webkit-transition: 0.4s all;
    transition: 0.4s all;
  }
  div[name="languagePanel"] {
	float: left;
    overflow: hidden;
    width: 100%;
  }
  .row  {
  overflow: hidden;
  }

  .flip{
    text-align:center;
    cursor:pointer;
    border-radius: 5em;
    display: inline-block;
    padding: 0.2em 2.5%;
    z-index: 0;
    position: absolute;
  }
</style>

<!--語言切換FlipButton-->
<div style="height: 2em; width: 100%;">
  <span class="flip animate" lan="zh" name="flip" onclick="toggleLanguage('zh')" style="background: rgb(255, 113, 66) none repeat scroll 0% 0%; width: 55%; z-index: 2;">中文</span>
  <span class="flip animate" lan="jp" name="flip" onclick="toggleLanguage('jp')" style="background: rgb(88, 190, 54) none repeat scroll 0% 0%; left: 55%; width: 20%; z-index: 1;">日本語</span>
  <span class="flip animate" lan="en" name="flip" onclick="toggleLanguage('en')" style="background: rgb(1, 138, 203) none repeat scroll 0% 0%; right: 0px; width: 20%; z-index: 0;">English</span>
</div>

<script type="text/javascript">
  function toggleLanguage(lan){
    var toggled = false;
    var es = document.getElementsByName("languagePanel");

    es.forEach(function(element){
      if(element.getAttribute("lan") == lan){
      	element.style.width = "100%";
        setTimeout(function(){
          element.parentNode.style.height = element.clientHeight+"px";
          /*console.log(element.parentNode.style.height+", "+element.clientHeight);*/
        }, 500);
        toggled = true;
      }else{
        element.style.width = "0%";
      }
  	});
    var flips = Array.prototype.slice.call(document.getElementsByName("flip"));
    for(var j=0;j<2;j++){
      var flip = flips.slice((flips.length/2)*j,(flips.length/2)*(j+1));
      var index = Array.prototype.findIndex.call(flip,element=>element.getAttribute("lan") == lan);
      for(var i=0;i<flip.length;i++){
        var element = flip[i];
        if(element.getAttribute("lan") == lan){
          element.style.width = "55%";
          element.style.zIndex = 10;
        }else{
          element.style.width = "20%";
          element.style.zIndex = 10 - Math.abs(i-index);
        }

        if(element.getAttribute("lan") == 'jp'){
          if(lan=='zh'){
            element.style.left = "55%";
          }else{
            element.style.left = "20%";
          }
        }
      }
    }

    window.location.hash = "#"+lan;
    //內容更新後，就要重新init TOC
    tocbot.init({

      // Where to render the table of contents.
      tocSelector: '#toc',

      // Where to grab the headings to build the table of contents.
      contentSelector: '.'+lan,

      // Which headings to grab inside of the contentSelector element.
      headingSelector: 'h1, h2, h3, h4',

      // Headings that match the ignoreSelector will be skipped.
      ignoreSelector: '.toc-ignore',

      // For headings inside relative or absolute positioned containers within content
      hasInnerContainers: true,

      // Main class to add to links.
      linkClass: 'toc-link',

      // Extra classes to add to links.
      extraLinkClasses: '',

      // Class to add to active links,
      // the link corresponding to the top most heading on the page.
      activeLinkClass: 'is-active-link',

      // Main class to add to lists.
      listClass: 'toc-list',

      // Extra classes to add to lists.
      extraListClasses: '',

      // Class that gets added when a list should be collapsed.
      isCollapsedClass: 'is-collapsed',

      // Class that gets added when a list should be able
      // to be collapsed but isn't necessarily collpased.
      collapsibleClass: 'is-collapsible',

      // Class to add to list items.
      listItemClass: 'toc-list-item',

      // How many heading levels should not be collpased.
      // For example, number 6 will show everything since
      // there are only 6 heading levels and number 0 will collpase them all.
      // The sections that are hidden will open
      // and close as you scroll to headings within them.
      collapseDepth: 0,

      // Smooth scrolling enabled.
      scrollSmooth: true,

      // Smooth scroll duration.
      scrollSmoothDuration: 420,

      // Callback for scroll end.
      scrollEndCallback: null,

      // Headings offset between the headings and the top of the document (this is meant for minor adjustments).
      headingsOffset: 1,

      // Timeout between events firing to make sure it's
      // not too rapid (for performance reasons).
      throttleTimeout: 50,

      // Element to add the positionFixedClass to.
      positionFixedSelector: null,

      // Fixed position class to add to make sidebar fixed after scrolling
      // down past the fixedSidebarOffset.
      positionFixedClass: 'is-position-fixed',

      // fixedSidebarOffset can be any number but by default is set
      // to auto which sets the fixedSidebarOffset to the sidebar
      // element's offsetTop from the top of the document on init.
      fixedSidebarOffset: 'auto',

      // includeHtml can be set to true to include the HTML markup from the
      // heading node instead of just including the textContent.
      includeHtml: false,

      // orderedList can be set to false to generate unordered lists (ul)
      // instead of ordered lists (ol)
      orderedList: false,

      // If there is a fixed article scroll container, set to calculate titles' offset
      scrollContainer: null,

      // prevent ToC DOM rendering if it's already rendered by an external system
      skipRendering: true,

      // Optional callback to change heading labels.
      // For example it can be used to cut down and put ellipses on multiline headings you deem too long.
      // Called each time a heading is parsed. Expects a string in return, the modified label to display.
      // function (string) => string
      headingLabelCallback: false,

      // ignore headings that are hidden in DOM
      ignoreHiddenElements: false,

      // Optional callback to modify properties of parsed headings.
      // The heading element is passed in node parameter and information parsed by default parser is provided in obj parameter.
      // Function has to return the same or modified obj.
      // The heading will be excluded from TOC if nothing is returned.
      // function (object, HTMLElement) => object | void
      headingObjectCallback: null,

      // onclick function to apply to all links in toc. will be called with
      // the event as the first parameter, and this can be used to stop,
      // propagation, prevent default or perform action
      onClick: null

    });
    return toggled;
  }
  addEventListener("DOMContentLoaded", function(){
    var toggled = false;
    if(window.location.hash !="" && window.location.hash !="#") {
      toggled = toggleLanguage(window.location.hash.substring(1));
    }
    if(!toggled){
      toggleLanguage("zh");
    }
  });
</script>

<div class="row">
  <!--中文--><div class="animate zh" lan="zh" name="languagePanel"><!--中文內文--></div>
  <!--日文--><div class="animate jp" lan="jp" name="languagePanel"><!--日文內文--></div>
  <!--English--><div class="animate en" lan="en" name="languagePanel"><!--英文內文--></div>
</div>

<!--語言切換FlipButton-->
<div style="height: 2em; width: 100%;">
  <span class="flip animate" lan="zh" name="flip" onclick="toggleLanguage('zh')" style="background: rgb(255, 113, 66) none repeat scroll 0% 0%; width: 55%; z-index: 2;">中文</span>
  <span class="flip animate" lan="jp" name="flip" onclick="toggleLanguage('jp')" style="background: rgb(88, 190, 54) none repeat scroll 0% 0%; left: 55%; width: 20%; z-index: 1;">日本語</span>
  <span class="flip animate" lan="en" name="flip" onclick="toggleLanguage('en')" style="background: rgb(1, 138, 203) none repeat scroll 0% 0%; right: 0px; width: 20%; z-index: 0;">English</span>
</div>
	<!-- This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

	This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

	You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>. -->

	<style type="text/css">
	.animate {
	-moz-transition: 0.4s all;
	-o-transition: 0.4s all;
	-webkit-transition: 0.4s all;
	transition: 0.4s all;
	}
	div[name="languagePanel"] {
	float: left;
	overflow: hidden;
	width: 100%;
	}
	.row {
	overflow: hidden;
	}

	.flip{
	text-align:center;
	cursor:pointer;
	border-radius: 5em;
	display: inline-block;
	padding: 0.2em 2.5%;
	z-index: 0;
	position: absolute;
	}
	</style>

	<!--語言切換FlipButton-->
	<div style="height: 2em; width: 100%;">
	<span class="flip animate" lan="zh" name="flip" onclick="toggleLanguage('zh')" style="background: rgb(255, 113, 66) none repeat scroll 0% 0%; width: 55%; z-index: 2;">中文</span>
	<span class="flip animate" lan="jp" name="flip" onclick="toggleLanguage('jp')" style="background: rgb(88, 190, 54) none repeat scroll 0% 0%; left: 55%; width: 20%; z-index: 1;">日本語</span>
	<span class="flip animate" lan="en" name="flip" onclick="toggleLanguage('en')" style="background: rgb(1, 138, 203) none repeat scroll 0% 0%; right: 0px; width: 20%; z-index: 0;">English</span>
	</div>

	<script type="text/javascript">
	function toggleLanguage(lan){
	var toggled = false;
	var es = document.getElementsByName("languagePanel");

	es.forEach(function(element){
	if(element.getAttribute("lan") == lan){
	element.style.width = "100%";
	setTimeout(function(){
	element.parentNode.style.height = element.clientHeight+"px";
	/console.log(element.parentNode.style.height+", "+element.clientHeight);/
	}, 500);
	toggled = true;
	}else{
	element.style.width = "0%";
	}
	});
	var flips = Array.prototype.slice.call(document.getElementsByName("flip"));
	for(var j=0;j<2;j++){
	var flip = flips.slice((flips.length/2)j,(flips.length/2)(j+1));
	var index = Array.prototype.findIndex.call(flip,element=>element.getAttribute("lan") == lan);
	for(var i=0;i<flip.length;i++){
	var element = flip[i];
	if(element.getAttribute("lan") == lan){
	element.style.width = "55%";
	element.style.zIndex = 10;
	}else{
	element.style.width = "20%";
	element.style.zIndex = 10 - Math.abs(i-index);
	}

	if(element.getAttribute("lan") == 'jp'){
	if(lan=='zh'){
	element.style.left = "55%";
	}else{
	element.style.left = "20%";
	}
	}
	}
	}

	window.location.hash = "#"+lan;
	//內容更新後，就要重新init TOC
	tocbot.init({

	// Where to render the table of contents.
	tocSelector: '#toc',

	// Where to grab the headings to build the table of contents.
	contentSelector: '.'+lan,

	// Which headings to grab inside of the contentSelector element.
	headingSelector: 'h1, h2, h3, h4',

	// Headings that match the ignoreSelector will be skipped.
	ignoreSelector: '.toc-ignore',

	// For headings inside relative or absolute positioned containers within content
	hasInnerContainers: true,

	// Main class to add to links.
	linkClass: 'toc-link',

	// Extra classes to add to links.
	extraLinkClasses: '',

	// Class to add to active links,
	// the link corresponding to the top most heading on the page.
	activeLinkClass: 'is-active-link',

	// Main class to add to lists.
	listClass: 'toc-list',

	// Extra classes to add to lists.
	extraListClasses: '',

	// Class that gets added when a list should be collapsed.
	isCollapsedClass: 'is-collapsed',

	// Class that gets added when a list should be able
	// to be collapsed but isn't necessarily collpased.
	collapsibleClass: 'is-collapsible',

	// Class to add to list items.
	listItemClass: 'toc-list-item',

	// How many heading levels should not be collpased.
	// For example, number 6 will show everything since
	// there are only 6 heading levels and number 0 will collpase them all.
	// The sections that are hidden will open
	// and close as you scroll to headings within them.
	collapseDepth: 0,

	// Smooth scrolling enabled.
	scrollSmooth: true,

	// Smooth scroll duration.
	scrollSmoothDuration: 420,

	// Callback for scroll end.
	scrollEndCallback: null,

	// Headings offset between the headings and the top of the document (this is meant for minor adjustments).
	headingsOffset: 1,

	// Timeout between events firing to make sure it's
	// not too rapid (for performance reasons).
	throttleTimeout: 50,

	// Element to add the positionFixedClass to.
	positionFixedSelector: null,

	// Fixed position class to add to make sidebar fixed after scrolling
	// down past the fixedSidebarOffset.
	positionFixedClass: 'is-position-fixed',

	// fixedSidebarOffset can be any number but by default is set
	// to auto which sets the fixedSidebarOffset to the sidebar
	// element's offsetTop from the top of the document on init.
	fixedSidebarOffset: 'auto',

	// includeHtml can be set to true to include the HTML markup from the
	// heading node instead of just including the textContent.
	includeHtml: false,

	// orderedList can be set to false to generate unordered lists (ul)
	// instead of ordered lists (ol)
	orderedList: false,

	// If there is a fixed article scroll container, set to calculate titles' offset
	scrollContainer: null,

	// prevent ToC DOM rendering if it's already rendered by an external system
	skipRendering: true,

	// Optional callback to change heading labels.
	// For example it can be used to cut down and put ellipses on multiline headings you deem too long.
	// Called each time a heading is parsed. Expects a string in return, the modified label to display.
	// function (string) => string
	headingLabelCallback: false,

	// ignore headings that are hidden in DOM
	ignoreHiddenElements: false,

	// Optional callback to modify properties of parsed headings.
	// The heading element is passed in node parameter and information parsed by default parser is provided in obj parameter.
	// Function has to return the same or modified obj.
	// The heading will be excluded from TOC if nothing is returned.
	// function (object, HTMLElement) => object \| void
	headingObjectCallback: null,

	// onclick function to apply to all links in toc. will be called with
	// the event as the first parameter, and this can be used to stop,
	// propagation, prevent default or perform action
	onClick: null

	});
	return toggled;
	}
	addEventListener("DOMContentLoaded", function(){
	var toggled = false;
	if(window.location.hash !="" && window.location.hash !="#") {
	toggled = toggleLanguage(window.location.hash.substring(1));
	}
	if(!toggled){
	toggleLanguage("zh");
	}
	});
	</script>

	<div class="row">
	<!--中文--><div class="animate zh" lan="zh" name="languagePanel"><!--中文內文--></div>
	<!--日文--><div class="animate jp" lan="jp" name="languagePanel"><!--日文內文--></div>
	<!--English--><div class="animate en" lan="en" name="languagePanel"><!--英文內文--></div>
	</div>

	<!--語言切換FlipButton-->
	<div style="height: 2em; width: 100%;">
	<span class="flip animate" lan="zh" name="flip" onclick="toggleLanguage('zh')" style="background: rgb(255, 113, 66) none repeat scroll 0% 0%; width: 55%; z-index: 2;">中文</span>
	<span class="flip animate" lan="jp" name="flip" onclick="toggleLanguage('jp')" style="background: rgb(88, 190, 54) none repeat scroll 0% 0%; left: 55%; width: 20%; z-index: 1;">日本語</span>
	<span class="flip animate" lan="en" name="flip" onclick="toggleLanguage('en')" style="background: rgb(1, 138, 203) none repeat scroll 0% 0%; right: 0px; width: 20%; z-index: 0;">English</span>
	</div>