<!DOCTYPE html>
<html>

  <head>
    <link data-require="highlight.js@*" data-semver="0.7.3" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/solarized_dark.min.css" />
    <link data-require="highlight.js@*" data-semver="0.7.3" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/github.min.css" />
    <link data-require="highlight.js@*" data-semver="0.7.3" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/default.min.css" />
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />
    <link rel="stylesheet" href="guide.css" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="app">
      <header class="guide-header">
        <h1 class="guide-heading-1">Vue.js de スタイルガイド</h1>
      </header>
      <ul class="guide-categories">
        <li><button @click="setCategory('')">ホーム</button></li>
        <li><button @click="setCategory('btn')">btn</button></li>
        <li><button @click="setCategory('text')">text</button></li>
      </ul>
      <div v-for="style in curStyles" class="guide-wrapper">
        <h2 class="guide-heading-2">{{ style.title }}</h2>
        <div v-html="style.html" class="guide-body"></div>
        <hr class="guide-divide">
      </div>
    </div>
    <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script data-require="vue.js@*" data-semver="10.0.26" src="https://cdn.jsdelivr.net/vue/1.0.26/vue.min.js"></script>
    <script data-require="axios@*" data-semver="0.018.0" src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
    <script data-require="marked@*" data-semver="0.3.5" src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
    <script data-require="highlight.js@*" data-semver="0.7.3" src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/highlight.min.js"></script>
    <script src="guide.js"></script>
  </body>

</html>
(function(global, $) {

  marked.setOptions({
    langPrefix: '',
    highlight: function(code, lang) {
      return hljs.highlightAuto(code, [lang]).value;
    }
  });

  var app = new Vue({
    el: '#app',
    data: {
      curCategory: '',
      curStyles: {
        title: '',
        name: '',
        category: '',
        html: ''
      },
      styles: {
        title: '',
        name: '',
        category: '',
        html: ''
      }
    },
    created: function() {
      axios.get('./style.css')
      .then(function (response) {
        var res = response.data.match(/\/\*docs[\s\S]*?\*\//gm);
        var tmpStyles = [];

        res.forEach(function(v,i,a) {
          var info, html, sample;
          var title = '';
          var name = '';
          var category = '';

          html = v;

          // 情報取得
          info = html.match(/\-\-\-[\s\S]*?\-\-\-/gm);

          if (info !== null) {
            if (info[0].match(/title: ?(.*)[\s\S]/) !== null) {
              title = info[0].match(/title: ?(.*)[\s\S]/)[1];
            }
            if (info[0].match(/name: ?(.*)[\s\S]/) !== null) {
              name = info[0].match(/name: ?(.*)[\s\S]/)[1];
            }
            if (info[0].match(/category: ?(.*)[\s\S]/) !== null) {
              category = info[0].match(/category: ?(.*)[\s\S]/)[1];
            }
          }

          // sample表示用HTML取得
          sample = html.match(/\`\`\`html[\s\S]*?\`\`\`/gm);

          // 不要情報削除
          html = html.replace(/\/\*docs[\s\S]/, '')
          .replace(/[\s\S]\*\//, '')
          .replace(/\-\-\-[\s\S]*?\-\-\-/gm, '');

          // Markdown形式に変換
          html = marked(html);

          // sample表示用HTMLが存在する場合、サンプル枠を追加
          if (sample !== null) {
          sample = sample[0].replace(/\`\`\`html[\s\S]/, '').replace(/[\s\S]\`\`\`/, '');
            html = html + '<div class="sample">' + sample + '</div>';
          }

          // tmpStyles
          tmpStyles[i] = {
            title: title,
            name: name,
            category: category,
            html: html
          };
        });

        app.styles = tmpStyles;
        app.setCategory('');
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    updated: function() {
      console.log('updated!!');
    },
    methods: {
      sortData: function(ary) {
        // 並び替えしながらセット
        app.curStyles = ary.sort(function(a, b) {
          return (a["name"] > b["name"]) ? 1 : -1;
        });
      },
      setCategory: function(str) {
        // 選択したカテゴリからデータ抽出
        app.curCategory = str;
        var tmpStyles = app.styles;
        var filtered = $.grep(tmpStyles,
          function(elm, index) {
            return (elm.category === app.curCategory);
          }
        );
        app.sortData(filtered);
      }
    }
  });
})(window, jQuery);
* {
  box-sizing: border-box;
}

/* text */

/*docs
---
title: .text-red
name: text-red
category: text
---
テキストカラー:<span class="text-red">赤■</span>

```html
<span class="text-red">.text-red</span>
```
*/
.text-red {
  color: #f66;
}

/*docs
---
title: .text-blue
name: text-blue
category: text
---
テキストカラー:<span class="text-blue">青■</span>

```html
<span class="text-blue">.text-blue</span>
```
*/
.text-blue {
  color: #66f;
}

/*docs
---
title: .text-green
name: text-green
category: text
---
テキストカラー:<span class="text-green">緑■</span>

```html
<span class="text-green">.text-green</span>
```
*/
.text-green {
  color: #6A6;
}


/* button */

/*docs
---
title: .btn-1
name: btn-1
category: btn
---
ボタン1

```html
<p><a href="DUMMY" class="btn-1">ボタン1</a></p>
<button class="btn-1">ボタン1</button>
```
*/
button.btn-1 {
  -webkit-appearance: none;
  -moz-appearance: none;
}
.btn-1 {
  display: inline-block;
  min-width: 140px;
  padding: 5px 10px;
  border: 1px solid #aaa;
  border-radius: 3px;
  background: #fff;
  outline: none;
  color: #333;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  transition: background .2s ease-in-out;
  cursor: pointer;
}
.btn-1:hover {
  background: #eaeaea;
}
* {
  font-family: "lato", "Mplus 1p", sans-serif;
}

pre {
  margin-bottom: 0;
}

.guide-header {
  margin: 0 0 15px;
  border-bottom: 1px solid #eaeaea;
}

.guide-categories {
  margin: 0 0 30px -5px;
  padding: 0;
  list-style: none;
  letter-spacing: -.4em;
}

.guide-categories li {
  display: inline-block;
  margin: 0 0 0 5px;
  letter-spacing: normal;
}

.guide-categories button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  -moz-appearance: none;
  -webkit-appearance: none;
  min-width: 80px;
  height: 30px;
  vertical-align: top;
  outline: none;
}

.guide-body {
  color: #333;
}

.guide-heading-1 {
  margin: 10px 0;
  color: #333;
  font-size: 28px;
  font-weight: normal;
}

.guide-heading-2 {
  padding: 0 0 0 7px;
  border-left: 3px solid #666;
  color: #333;
  font-size: 20px;
}

.guide-divide {
  margin: 20px 0;
  border: 1px solid #eaeaea;
  box-shadow: 0 2px 2px rgba(0,0,0,.05);
}

.sample {
  padding: 1px 0 0;
  border: 1px dashed #eaeaea;
  border-top: 0;
}