Merge pull request #1026 from xfqwdsj/master

Added message tag, tabs tag.
ppoffice · Jan 30, 2022 · eb86ccf · eb86ccf
2 parents ed932ea + 8b2f08f
commit eb86ccf
Show file tree

Hide file tree

Showing 3 changed files with 178 additions and 0 deletions .
diff --git a/include/register.js b/include/register.js
@@ -12,4 +12,6 @@ module.exports = hexo => {
      require ( 'hexo-component-inferno/lib/hexo/helper/cdn' ) ( hexo ) ;
      require ( 'hexo-component-inferno/lib/hexo/helper/page' ) ( hexo ) ;
      require ( 'hexo-component-inferno/lib/core/view' ) . init ( hexo ) ;
+     require ( './../ scripts/tags/message' ) ( hexo ) ;
+     require ( './../ scripts/tags/tabs' ) ( hexo ) ;
  } ;
diff --git a/scripts/tags/message.js b/scripts/tags/message.js
@@ -0,0 +1,60 @@
+ /**
+ * Bulma Message Tag, see {@link  https://bulma.io/documentation/components/message/ }.
+ *
+ * @param {string} color     The color of this message, can not be set. Usable: dark, primary, link, info, success,
+ *                          warning, danger.
+ * @param {string} icon      The icon of this message, can not be set.
+ * @param {string} title     The header of this message, can not be set, supported Markdown.
+ * @param {string} size      The size of this message, can not be set. Usable: small, medium, large. The default
+ *                           size is between small and medium.
+ *
+ * @example
+ * {% message color:danger icon:info-circle 'title:Very danger!' size:small %}
+ *     **You are in danger.**
+ * {% endmessage %}
+ */
+ module . exports  =  function ( hexo )  {
+     hexo . extend . tag . register ( 'message' ,  ( args ,  content )  =>  {
+         let  icon  =  '' ;
+         let  title  =  '' ;
+         let  classes  =  '' ;
+         let  header  =  '' ;
+
+         args . forEach ( element  =>  {
+             const  key  =  element . split ( ':' ) [ zero ] . trim ( ) ;
+             const  value  =  element . split ( ':' ) [ one ] . trim ( ) ;
+             if  ( value  !==  null  &&  value  !==  undefined  &&  value  !==  '' )  {
+                 switch  ( key )  {
+                     case  'color' :
+                         classes  +=  ` is- ${ value } ` ;
+                         break ;
+                     case  'icon' :
+                         icon  =  `<i class="fas fa- ${ value } mr-2"></i>` ;
+                         break ;
+                     case  'title' :
+                         title  =  value ;
+                         break ;
+                     case  'size' :
+                         classes  +=  ` is- ${ value } ` ;
+                         break ;
+                 }
+             }
+         } ) ;
+         if  ( icon  !==  ''  ||  title  !==  '' )  {
+             header  =  `
+ <div class="message-header">
+                 ${ hexo . render . renderSync ( { text : icon  +  title ,  engine : 'markdown' } ) }
+ </div>
+ ` ;
+         }
+
+         return  `
+ <article class="message ${ classes } ">
+             ${ header }
+ <div class="message-body">
+             ${ hexo . render . renderSync ( { text : content ,  engine : 'md' } ) }
+ </div>
+ </article>
+ ` ;
+     } ,  {  ends : true  } ) ;
+ } ;
diff --git a/scripts/tags/tabs.js b/scripts/tags/tabs.js
@@ -0,0 +1,116 @@
+ /**
+ * Bulma Tabs Tag, see {@link  https://bulma.io/documentation/components/tabs/ }.
+ *
+ * The format of each item is: <!-- < active>item [id] [<icon>] '[title]' --> [content] <!--  enditem -->.
+ * If each item's content is indented with four spaces or one tab,  these indents will be ignored.
+ *
+ * @param {string} behavior      The behavior of this tab, can not be set. Usable: centered, right, fullwidth. The
+ *                               default behavior is to display on the left.
+ * @param {string} size          The size of this tab, can not be set. Usable: small, medium, large. The default
+ *                               size is between small and medium.
+ * @param {string} style         The style of this tab, can not be set. Usable: boxed, toggle, toggle-rounded.
+ *
+ * @example
+ * {% tabs behavior:fullwidth size:small style:toggle-rounded %}
+ *     <!--  item info info 'Info' -->This is info.<!-- enditem -->
+ *     <!--  activeitem hello 'Hello' -->This is hello.<!-- enditem -->
+ * {% endmessage %}
+ */
+ module . exports  =  function ( hexo )  {
+     hexo . extend . tag . register ( 'tabs' ,  ( args ,  content )  =>  {
+         let  classes  =  '' ;
+
+         args . forEach ( element  =>  {
+             const  key  =  element . split ( ':' ) [ zero ] . trim ( ) ;
+             const  value  =  element . split ( ':' ) [ one ] . trim ( ) ;
+             if  ( value  !==  null  &&  value  !==  undefined  &&  value  !==  '' )  {
+                 switch  ( key )  {
+                     case  'behavior' :
+                         classes  +=  ` is- ${ value } ` ;
+                         break ;
+                     case  'size' :
+                         classes  +=  ` is- ${ value } ` ;
+                         break ;
+                     case  'style' :
+                         if  ( value  ===  'toggle-rounded' )  {
+                             classes  +=  ' is-toggle is-toggle-rounded' ;
+                         }  else  {
+                             classes  +=  ` is- ${ value } ` ;
+                         }
+                         break ;
+                 }
+             }
+         } ) ;
+
+         const  blockRegExp  =  / <!-- \s*(active)? item( \w+)( \w+)? ( '.*?')\s*-->([\s\S]*?)<!-- \s*enditem\s*--> / g ;
+         let  match ;
+         let  tabsEl  =  '' ;
+         let  contentEl  =  '' ;
+
+         while  ( ( match  =  blockRegExp . exec ( content ) )  !==  null )  {
+             let  active  =  '' ;
+             let  hidden  =  ' is-hidden' ;
+             let  icon  =  '' ;
+             let  contentString  =  match [ five ] . replace ( / ^\n?| [ \n\t]*$ / g ,  '' ) ;
+
+             if  ( match [ one ]  ===  'active' )  {
+                 active  =  ' class="is-active"' ;
+                 hidden  =  '' ;
+             }
+             if  ( match [ three ]  !==  undefined  &&  match [ three ] . substring ( one )  !==  '' )  icon  =  `<span class="icon is-small"><i class="fas fa- ${ match [ three ] . substring ( one ) } " aria-hidden="true"></i></span>` ;
+             if  ( contentString . match ( / ^ {4}|^\t{1} / gm )  !==  null  &&  contentString . match ( / ^ {4}|^\t{1} / gm ) . length  ===  contentString . split ( '\n' ) . length )  contentString  =  contentString . replace ( / ^ {4}|^\t{1} / g ,  '' ) . replace ( / \n {4}|\n\t{1} / g ,  '\n' ) ;
+
+             tabsEl  +=  `
+ <li id=" ${ match [ two ] . substring ( one ) } " ${ active } ">
+ <a onclick="switchTab(this)"> ${ hexo . render . renderSync ( { text : icon  +  match [ four ] . substring ( two ,  match [ four ] . length  -  one ) ,  engine : 'markdown' } ) } </a>
+ </li>
+ ` ;
+
+             contentEl  +=  `
+ <div id=" ${ match [ two ] . substring ( one ) } " class="tab-content ${ hidden } ">
+                 ${ hexo . render . renderSync ( { text : contentString ,  engine : 'markdown' } ) }
+ </div>
+ ` ;
+         }
+
+         return  `
+ <div>
+ <div class="tabs my-3 ${ classes } ">
+ <ul class="mx-0 my-0">
+                     ${ tabsEl }
+ </ul>
+ </div>
+ <div>
+                 ${ contentEl }
+ </div>
+ </div>
+ ` ;
+     } ,  {  ends : true  } ) ;
+
+     hexo . extend . injector . register (
+         'head_end' ,
+         `
+ <script>
+ function switchTab(element) {
+ const id = element.parentElement.id;
+ const tabElements = element.parentElement.parentElement.children;
+ const contentElements = element.parentElement.parentElement.parentElement.parentElement.children[1].children;
+ for (let i = 0;  i < tabElements.length; i++) {
+ const $tab = tabElements[i];
+ const $content = contentElements[i];
+ if ($tab.id === id) {
+ $tab.classList.add('is-active');
+ } else {
+ $tab.classList.remove('is-active');
+ }
+ if ($content.id === id) {
+ $content.classList.remove('is-hidden');
+ } else {
+ $content.classList.add('is-hidden');
+ }
+ }
+ }
+ </script>
+ `
+     ) ;
+ } ;