Sunday, July 29, 2018

Passing data through arguments parameters in Vue

Passing data through arguments parameters in Vue

HTML:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <p>Expected output: <code>{{ JSON.stringify(expected) }}</code></p>
  <component @emission="hearEmission">complete data, without extras</component>
  <component @emission="hearEmission('extra', ...arguments)">with extras, incomplete data</component>
  <component @emission="function (a, b, c) { hearEmission('extra', a, b, c) }">expected, overly explicit</component>
  
  <ol class="log">
    <li v-for="line in logs"><code>{{ JSON.stringify(line) }}</code></li>
  </ol>
</div>

Script:

Vue.component('component', {
 template: '<button @click="emitEvent"><slot></slot></button>',
  methods: {
   emitEvent: function() {
     this.$emit('emission', 1, 2, 3);
    }
  }
});

new Vue({
  el: '#app',
  data: {
   logs: [],
    expected: ['extra', 1, 2, 3]
  },
  methods: {
   hearEmission: function(extra, a, b, c) {
     this.logs.push([extra, a, b, c]);
      if (this.logs.length === 11) {
       this.logs.splice(0, 1);
      }
    }
  }
})

Reference:

https://jsfiddle.net/50wL7mdz/30115

Sunday, July 15, 2018

Create SVG dynamically with JavaScript and save export download SVG file

Create SVG dynamically with JavaScript and save export download SVG file

function saveSvg(svgEl, name) {
    svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
    var svgData = svgEl.outerHTML;
    var preface = '<?xml version="1.0" standalone="no"?>\r\n';
    var svgBlob = new Blob([preface, svgData], {type:"image/svg+xml;charset=utf-8"});
    var svgUrl = URL.createObjectURL(svgBlob);
    var downloadLink = document.createElement("a");
    downloadLink.href = svgUrl;
    downloadLink.download = name;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
}

saveSvg(svg, 'test.svg');

Reference:

https://stackoverflow.com/questions/23218174/how-do-i-save-export-an-svg-file-after-creating-an-svg-with-d3-js-ie-safari-an