2020/09 Cola Daily Build

09/08 [How to Install Amplitude Using Google Tag Manager(GMT)

console.log( {{ my_data_layer_var_name }} );

(Client-Side)](https://www.youtube.com/watch?v=c5OZdT3pCGg)

0918 vue component uid & slot

<template>
  <div class="row-collapse-container">
    <label data-toggle="collapse" :data-target="'#' + uid" aria-expanded="false" :aria-controls="uid">
      <input type="checkbox" />
      <div class="collapse-down">
        展開查看更多
        <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1.41 0.589966L6 5.16997L10.59 0.589966L12 1.99997L6 7.99997L0 1.99997L1.41 0.589966Z" />
        </svg>
      </div>
      <div class="collapse-up">
        隱藏資訊
        <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1.41 7.41L6 2.83L10.59 7.41L12 6L6 0L0 6L1.41 7.41Z"/>
        </svg>
      </div>
    </label>
    <div :id="uid" aria-expanded="false" class="collapse row collapse-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ReceiptRowCollapse',
  computed: {
    uid() {
      return this.$options.name + '_' + this._uid;
    },
  },
};
</script>

usage:

<RowCollapse>
hide any content
</RowCollapse>

0918 vue model, checkbox, radio button

自定 checkbox, radio 樣式,並簡單用 v-model 完成雙向綁定

usage:

  <check-button-v2
    value="複選選項值-1"
    v-model="multipleSelectdList"
    :disabled="true"
    >複選選項文字-1</check-button-v2>
<template>
  <label :class="['check-button-wrapper', customClass, {disabled: isDisabled}]">
    <input type="checkbox"
      :value="value"
      :disabled="isDisabled"
      v-model="proxyChecked" />
    <span class="box"></span>
    <slot></slot>
  </label>
</template>

<script>
export default {
  name: 'CheckButton',
  props: {
    customClass: { type: String },
    checked: { type: [Array, Boolean], default: false },
    disabled: { type: Boolean, default: false },
    value: { type: String, default: null },
  },
  model: {
    prop: 'checked',
    event: 'change',
  },
  computed: {
    isDisabled() {
      return !!this.disabled
    },
    proxyChecked: {
      get() {
  		  return this.checked;
      },
      set(val) {
        this.$emit('change', val);
      }
    },
  },
};
</script>

<style lang="scss">
$base-border-width: 2;
$base-box-size: 25;

.disabled {
  color: $gray;
  cursor: not-allowed !important;
}

.check-button-wrapper {
  cursor: pointer;
  display: inline-flex;
  align-items: center;

  position: relative;
  height: $base-box-size + px;
  margin-right: 5px;
  padding: 2px 10px 2px 30px;

  user-select: none;

  &:hover input ~ .box{
    border-width: ($base-border-width + 1) +  px;
    border-color: $blue;
  }

  & input:disabled ~ .box{
    border-color: $gray;
    cursor: not-allowed;
    &:before {
      filter: grayscale(100%);
    }
  }

  input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;

    &:checked ~ .box {
      &:before {
        opacity: 1;
      }
    }
  }

  .box {
    cursor: pointer;
    display: inline-block;
    @include size($base-box-size + px);
    position: absolute;
    top: 0;
    left: 0;

    border: $base-border-width + px solid $orange;
    border-radius: 3px;
    overflow: hidden;

    &:before {
      @include size($base-box-size - 9 + px);
      content: '';
      position: absolute;
      top: 10%;
      left: 10%;
      background: url(check.svg) no-repeat 0 0 / 100% 100%;
      opacity: 0;
      transition: 0.4s ease;
    }
  }
}
</style>

radiobox

usage:

  <radio-button-v2
    btnValue="單選值-1"
    v-model="selectdList"
    :disabled="true"
    >單選選項文字-1</radio-button-v2>
<template>
  <label :class="['radio-button-wrapper', customClass, {disabled: isDisabled}]">
    <input type="radio"
      :value="btnValue"
      :checked="(btnValue == value) ? 'checked' : ''"
      :disabled="isDisabled"
      @change="$emit('input', $event.target.value)" />
    <span class="box"></span>
    <slot></slot>
  </label>
</template>

<script>
export default {
  name: 'RadioButton',
  props: {
    customClass: { type: String },
    btnValue: { default: true },
    disabled: { type: Boolean, default: false },
    value: { default: null }, // from v-model
  },
  computed: {
    isDisabled() {
      return !!this.disabled
    }
  },
};
</script>

<style lang="scss">
$base-border-width: 2;
$base-box-size: 25;

.disabled {
  color: $gray;
  cursor: not-allowed !important;
}

.radio-button-wrapper {
  cursor: pointer;
  display: inline-flex;
  align-items: center;

  position: relative;
  height: $base-box-size + px;
  margin-right:5px;
  padding: 2px 10px 2px ($base-box-size + 5) + px;

  user-select: none;

  &:hover input ~ .box{
    border-width: ($base-border-width + 1) +  px;
    border-color: $blue;
  }

  & input:disabled ~ .box{
    border-color: $gray;
    cursor: not-allowed;

    &:before {
      background: $gray;
    }
  }

  input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;

    &:checked ~ .box {
      &:before {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
    }
  }

  .box {
    cursor: pointer;
    display: inline-block;
    @include size($base-box-size + px);
    position: absolute;
    top: 0;
    left: 0;

    border: $base-border-width + px solid $orange;
    border-radius: 50%;
    overflow: hidden;

    &:before {
      @include size($base-box-size - 8 + px);
      border-radius: 100%;
      background: $blue;
      position: absolute;
      top: 50%;
      left: 50%;
      content: '';
      transform: translate(-50%, -50%) scale(0);
      opacity: 1;
      transition: 0.4s ease;
    }
  }
}
</style>

0920 javascript load google SpreadsheetAPP

how get gogole sheet json api (fail)

0920 alfred workflow (php) api

use script filter

$query = "{query}";

$data = json_decode(file_get_contents('http://local.cola/test/' . urlencode($query)), true);
$xml = '';
foreach($data as $item) {
    $xml .= "<item>
        <title>{$item['keyword']}</title>
        <subtitle>{$item['desc']}</subtitle>
        <arg>{$item['desc']}</arg>
        </item>";
}

echo '<?xml version="1.0"?><items>' . $xml . '</items>';

https://alfred-workflow.readthedocs.io/en/latest/api/workflow.html