DEV Community: hashrock

Making Miniature Book with CSS

hashrock — Sat, 04 Jul 2020 07:43:33 +0000

As a front-end exercise, I've made a habit of making UI components every Friday.

You can see some of the components I've made in the past in the tag #金曜GUI.

I like small, cute things like miniatures, and yesterday I made a Miniature Book component with CSS and Vue.js.

1. Place some divs at absolute

2. Adding a three-dimensional page with perspective properties

To rotate the div in 3D, use the perspective and transform-style properties.

wrapper:

  perspective: 300px;
  transform-style: preserve-3d;

item:

  transform-origin: left center;
  transform: rotateY(30deg);

You can use transform-origin and position: absolute to adjust the position.

3. Curve the edges of the page

CSS can be used to create joint animations. I learned this from s14garnet.

Transformations are affected by the parent element. they can be concatenated using preserve-3d.

4. Add dragging interactions to continuously turn pages

The implementation of drag interaction is straightforward: just keep track of the difference in offsetX and reflect it in the rotation angle.

You can use modulo to loop the book, but note that JavaScript modulo can return a negative value.

HTML:

<div id="app"
       @pointerdown="down"
       @pointermove="move"
       @pointerup="up">
  ...
</div>

JavaScript:

Number.prototype.mod = function (n) {
  return ((this % n) + n) % n;
};
new Vue({
  el: "#app",
  data: {
    rotateRaw: 40,
    rotateOld: 0,
    offset: null
  },
  methods: {
    down(ev) {
      this.$el.setPointerCapture(ev.pointerId);
      this.offset = ev.offsetX;
      this.rotateOld = this.rotate;
    },
    up(ev) {
      this.offset = null;
    },
    move(ev) {
      if (this.offset) {
        this.rotateRaw = this.rotateOld - (ev.offsetX - this.offset);
      }
    }
  },
  computed: {
    rotate() {
      return this.rotateRaw.mod(180);
    }
  }
});

Note that the pointerdown, pointermove and pointerup events require a polyfill in iOS Safari.

To prevent the div element in the wrapper from being selected by dragging, use pointer-events: none to make the Pointer events transparent.

.wrapper {
  ...
  pointer-events: none;
  user-select: none;
}

Here's DEMO:

https://codepen.io/hashrock/pen/RwrxeKe

Vue.js and input type="range" are your friends

I like to adjust the look and feel of the UI with input type="range". It's a one off UI editor. It's similar to building scaffolding to build a house.

input type="range" is useful, but don't forget to write v-model.number to convert its value to a number.

<input type="range" min=0 max=180 step=1 v-model.number="rotate">

Easy Timeline Animation with Plaintext

hashrock — Sun, 05 Jan 2020 06:16:25 +0000

I love Adobe Flash's timeline UI.
It's super easy to create complex timeline animations.

But actually Flash is dead... (still Adobe Animate is living)

Okay, I have an idea. Expressing the timeline UI with plaintext.

Then I made an animation library.

timelineDown

Please watch how it works.

Yey. It's useful for tweaking animation timings, isn't it?

It's also work with data attibutes. No JS config required.

but I think writing JS is the best way to manage multiple timelines.

Source

It's only 27 lines of code, because it is actually an wrapper of gsap.timeline.

This library is still PoC, I'm planning to make breaking changes for support ScrollMagic.

Repository

https://github.com/hashrock/timelineDown

I also published this to npm. Enjoy!

Writing spreadsheet with SVG and Vue.js

hashrock — Tue, 13 Mar 2018 18:17:30 +0000

I like handsontable, but I want to write my own from scratch.

DEMO

Try it from here:

https://anydown-example-vue-spreadsheet-lite.netlify.com/

Repo:

https://github.com/anydown/vue-spreadsheet-lite

How to implement

There are so many things to implement. I can't do them all.

Selection UI

Because SVG Spec doesn't have z-index for now, I decided to split UI and Contents layer into two svg elements.

The UI layer has visual elements such as bounding-boxes or selection rects. They have to be always on top.

In-place editing

There is a hidden text field on selected cell. At first its opacity is set to 0. When the cell is clicked, opacity changes to 1.

This hidden text field always capture key inputs to handle Input Method. This is important to users who uses Chinese characters.

SVG

SVG is very useful to implement complex GUI. It's just DOM and bindable with Vue's ViewModel. Especially, I like to handle SVG with computed.

<template>
  <div class="grid" @mouseup="onMouseUpSvg()" @mousemove="headerResizeMove">
    <svg :width="positionLeft(data.length + 1) + 1" height=24>
      <g v-for="(col, ci) in headerObj" :key="ci" :transform="translateCol(ci)" @mousedown="startColumnSelect(ci)" @mousemove="changeColumnSelect(ci)" @mouseup="endColumnSelect">
        <rect class="col-header" x=0 y=0 :width="widthAt(ci)" :height="rowHeight">
        </rect>
        <text class="col-header__text" text-anchor="middle" :x="widthAt(ci) / 2" y=12 :width="widthAt(ci)" :height="rowHeight">{{col.name}}</text>
        <rect class="col-header__resize" :class="{'active': ci === headerResizeAt}" :x="widthAt(ci) - 5" :y=0 :width="5" :height="rowHeight" @mousedown.stop="headerResizeStart(ci)"></rect>
      </g>
    </svg>

    <div ref="wrapper" style="height: 400px; overflow: scroll; position:relative;">
      <svg :width="positionLeft(data.length + 1) + 1" :height="data.length * 24" >
        <g v-for="(row, ri) in data" :key="ri" :transform="translateRow(ri)">
          <g v-for="(col, ci) in row" :key="ci" :transform="translateCol(ci)" @mousedown="onMouseDownCell(ci, ri)" @mousemove="onMouseMoveCell(ci, ri)">
            <rect x=0 y=0 :width="widthAt(ci)" :height="rowHeight">
            </rect>
            <text x=2 y=12 :width="widthAt(ci)" :height="rowHeight">{{col}}</text>
          </g>
        </g>
        <rect :transform="selectionTransform" class="selection" x=0 y=0 :width="selectionSize.w" :height="selectionCount.h * rowHeight"></rect>
      </svg>
      <div class="editor__frame" :style="editorStyleObj">
        <input ref="hiddenInput"  @mousedown="onMouseDownCell(selection.c, selection.r)" class="editor__textarea" v-model="editingText" @blur="onBlur" :class="{'editor--visible': editing}" autofocus />
      </div>
    </div>
  </div>
</template>

This is an one-file template and just 413 lines. If I use canvas or div to implement this, I think its LOC will be doubled.

Bundle with bili

bili is a useful tool to distribute SFCs.

I created this project with vue create, but its default .babelrc seems to prevent build with bili.

According to this issue, I should use this:

bili --plugin vue --no-babel.babelrc

UPDATE 03-14-2018

This issue has been fixed today, We no longer need --no-babel.babelrc. Thanks EGOIST!

then I could publish this to npm.

https://www.npmjs.com/package/@anydown/vue-spreadsheet-lite

Conclusion

Writing GUI with SVG is so fun!