add Palette Button component

components.json

@@ -31,5 +31,6 @@
   "lazyload": "./packages/lazyload/index.js",
   "datetime-picker": "./packages/datetime-picker/index.js",
   "index-list": "./packages/index-list/index.js",
-  "index-section": "./packages/index-section/index.js"
+  "index-section": "./packages/index-section/index.js",
+  "palette-button": "./packages/palette-button/index.js"
 }

example/nav.config.json

@@ -76,6 +76,11 @@
         "path": "/index-list",
         "name": "Index List",
         "icon": "alphabet"
+      },
+      {
+        "path": "/palette-button",
+        "name": "Palette Button",
+        "icon": "alphabet"
       }
     ]
   },

example/pages/palette-button.vue

@@ -0,0 +1,69 @@
+<template>
+  <div style="text-align:center;padding-top:200px;">
+    <mt-palette-button content="+" @expand="main_log('expand')" @expanded="main_log('expanded')" @collapse="main_log('collapse')"
+      direction="rt" class="pb" :radius="80" ref="target_1" mainButtonStyle="color:#fff;background-color:#26a2ff;"
+      style="left:30px;">
+      <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(1)"></div>
+      <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(2)"></div>
+      <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(3)"></div>
+    </mt-palette-button>
+    <mt-palette-button content="+" @expand="main_log('expand')" @expanded="main_log('expanded')" @collapse="main_log('collapse')"
+      direction="t" class="pb" :radius="80" ref="target_2" mainButtonStyle="color:yellow;background-color:#26a2ff;" :offset="Math.PI / 12"
+      style="left:calc(50% - 30px);">
+      <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(1)"></div>
+      <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(2)"></div>
+      <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(3)"></div>
+      <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(4)"></div>
+      <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(5)"></div>
+      <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(6)"></div>
+    </mt-palette-button>
+    <mt-palette-button content="+" @expand="main_log('expand')" @expanded="main_log('expanded')" @collapse="main_log('collapse')"
+      direction="lt" class="pb" :radius="100" ref="target_3"
+      style="right:30px;">
+      <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(1)"></div>
+      <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(2)"></div>
+      <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(3)"></div>
+      <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(4)"></div>
+      <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(5)"></div>
+    </mt-palette-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    methods: {
+      main_log(val) {
+        console.log('main_log', val);
+      },
+      sub_log(val) {
+        console.log('sub_log', val);
+        this.$refs.target_1.collapse();
+      }
+    }
+  };
+</script>
+
+<style>
+  .pb{
+    width: 60px;
+    height: 60px;
+    line-height: 60px;
+    color: #FFF;
+    position:absolute;
+    bottom: 30px;
+  }
+  .my-icon-button{
+    width:30px;
+    height:30px;
+    border-radius:50%;
+    background-color:#26a2ff;
+    color: #fff;
+    line-height:30px;
+    text-align:center;
+  }
+  .mint-main-button{
+    color: #000;
+    background-color:#26a2ff;
+  }
+</style>
+

packages/palette-button/README.md

@@ -0,0 +1,23 @@
+# Overview
+palette-button is a set of buttons that can expand and collapse
+
+# Usage
+
+see example
+
+# Option
+- content: the text content of the main button
+- offset: the offset arc of the fan-shaped area
+- direction: the direction of the fan-shaped area, belongs to one of the ['lt', 't', 'rt', 'r', 'rb', 'b', 'lb', 'l']
+- radius: the radius of the fan-shaped area
+- mainButtonStyle: set the style of the main button
+
+# Method
+- toggle: toggle between expand and collapse
+- expand: expand all sub buttons
+- collapse: collapse all sub buttons
+
+# Event
+- expand: begin expand sub buttons
+- expanded: all sub buttons has been expanded
+- collapse: begin collapse sub buttons

packages/palette-button/cooking.conf.js

@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+  entry: {
+    index: path.join(__dirname, 'index.js')
+  },
+  dist: path.join(__dirname, 'lib'),
+  template: false,
+  format: 'umd',
+  moduleName: 'MintPaletteButton',
+  extractCSS: 'style.css',
+
+  extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+  'main': path.join(__dirname, '../../src'),
+  'mint-ui': path.join(__dirname, '..')
+});
+
+cooking.add('externals', {
+  vue: {
+    root: 'Vue',
+    commonjs: 'vue',
+    commonjs2: 'vue',
+    amd: 'vue'
+  }
+});
+
+module.exports = cooking.resolve();

packages/palette-button/index.js

@@ -0,0 +1,2 @@
+import PaletteButton from './src/palette-button.vue';
+module.exports = PaletteButton;

packages/palette-button/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "mint-palette-button",
+  "description": "",
+  "version": "0.1.0",
+  "main": "lib/index.js",
+  "author": "cia.fbi.007@hotmail.com",
+  "homepage": "https://github.com/ElemeFE/mint-ui",
+  "license": "MIT",
+  "repository": "https://github.com/ElemeFE/mint-ui/tree/master/components/palette-button",
+  "dependencies": {
+  }
+}

packages/palette-button/src/palette-button.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="mint-palette-button" :class="{ expand: expanded, 'mint-palette-button-active': transforming }"
+    @animationend="onMainAnimationEnd" @webkitanimationend="onMainAnimationEnd" @mozanimationend="onMainAnimationEnd">
+    <div class="mint-sub-button-container">
+      <slot></slot>
+    </div>
+    <div @touchstart="toggle" class="mint-main-button" :style="mainButtonStyle">
+      {{content}}
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'mt-palette-button',
+    data: function() {
+      return {
+        transforming: false,    // 是否正在执行动画
+        expanded: false           // 是否已经展开子按钮
+      };
+    },
+    props: {
+      content: {
+        type: String,
+        default: ''
+      },
+      offset: {
+        type: Number,           // 扇面偏移角，默认是四分之π，配合默认方向lt
+        default: Math.PI / 4
+      },
+      direction: {
+        type: String,
+        default: 'lt'           // lt t rt this.radius rb b lb l 取值有8个方向，左上、上、右上、右、右下、下、左下、左，默认为左上
+      },
+      radius: {
+        type: Number,
+        default: 90
+      },
+      mainButtonStyle: {
+        type: String,           // 应用到 mint-main-button 上的 class
+        default: ''
+      }
+    },
+    methods: {
+      toggle(event) {
+        if (!this.transforming) {
+          if (this.expanded) {
+            this.collapse(event);
+          } else {
+            this.expand(event);
+          }
+        }
+      },
+      onMainAnimationEnd(event) {
+        this.transforming = false;
+        this.$emit('expanded');
+      },
+      expand(event) {
+        this.expanded = true;
+        this.transforming = true;
+        this.$emit('expand', event);
+      },
+      collapse(event) {
+        this.expanded = false;
+        this.$emit('collapse', event);
+      }
+    },
+    mounted() {
+      this.slotChildren = [];
+      for (let i = 0; i < this.$slots.default.length; i++) {
+        if (this.$slots.default[i].elm.nodeType !== 3) {
+          this.slotChildren.push(this.$slots.default[i]);
+        }
+      }
+
+      let css = '';
+      let direction_arc = Math.PI * (3 + Math.max(['lt', 't', 'rt', 'r', 'rb', 'b', 'lb', 'l'].indexOf(this.direction), 0)) / 4;
+      for (let i = 0; i < this.slotChildren.length; i++) {
+        var arc = (Math.PI - this.offset * 2) / (this.slotChildren.length - 1) * i + this.offset + direction_arc;
+        var x = Math.cos(arc) * this.radius;
+        var y = Math.sin(arc) * this.radius;
+        var item_css = '.expand .palette-button-' + this._uid + '-sub-' + i + '{transform:translate(' + x + 'px,' + y + 'px) rotate(720deg);transition-delay:' + 0.03 * i + 's}';
+        css += item_css;
+
+        this.slotChildren[i].elm.className += (' palette-button-' + this._uid + '-sub-' + i);
+      }
+
+      this.styleNode = document.createElement('style');
+      this.styleNode.type = 'text/css';
+      this.styleNode.rel = 'stylesheet';
+      this.styleNode.title = 'palette button style';
+      this.styleNode.appendChild(document.createTextNode(css));
+      document.getElementsByTagName('head')[0].appendChild(this.styleNode);
+    },
+    destroyed() {
+      if (this.styleNode) {
+        this.styleNode.parentNode.removeChild(this.styleNode);
+      }
+    }
+  };
+</script>
+
+<style>
+  .mint-palette-button{
+    display:inline-block;
+    position:relative;
+    border-radius:50%;
+    width: 56px;
+    height:56px;
+    line-height:56px;
+    text-align:center;
+    transition:transform .1s ease-in-out;
+  }
+
+  .mint-main-button{
+    position:absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    border-radius:50%;
+    background-color:blue;
+    font-size:2em;
+  }
+  .mint-palette-button-active{
+    animation: mint-zoom 0.5s ease-in-out;
+  }
+  .mint-sub-button-container>*{
+    position:absolute;
+    top:15px;
+    left:15px;
+    width:25px;
+    height:25px;
+    transition: transform .3s ease-in-out;
+  }
+
+  @keyframes mint-zoom{
+    0% {transform:scale(1)}
+    10% {transform:scale(1.1)}
+    30% {transform:scale(0.9)}
+    50% {transform:scale(1.05)}
+    70% {transform:scale(0.95)}
+    90% {transform:scale(1.01)}
+    100% {transform:scale(1)}
+  }
+</style>

src/index.js

@@ -30,6 +30,7 @@ import Lazyload from '../packages/lazyload/index.js';
 import DatetimePicker from '../packages/datetime-picker/index.js';
 import IndexList from '../packages/index-list/index.js';
 import IndexSection from '../packages/index-section/index.js';
+import PaletteButton from '../packages/palette-button/index.js';
 import '../src/assets/font/iconfont.css';
 
 const install = function(Vue) {
@@ -62,6 +63,7 @@ const install = function(Vue) {
   Vue.component(DatetimePicker.name, DatetimePicker);
   Vue.component(IndexList.name, IndexList);
   Vue.component(IndexSection.name, IndexSection);
+  Vue.component(PaletteButton.name, PaletteButton);
   Vue.use(InfiniteScroll);
   Vue.use(Lazyload, {
     loading: require('./assets/loading-spin.svg'),
@@ -112,5 +114,6 @@ module.exports = {
   Lazyload,
   DatetimePicker,
   IndexList,
-  IndexSection
+  IndexSection,
+  PaletteButton
 };