= nodes.length) return null
48 | return nodes[index]
49 | }
50 | }
--------------------------------------------------------------------------------
/src/scripts/DragItemUtil.js:
--------------------------------------------------------------------------------
1 | import DOM from '@/scripts/DOM.js'
2 |
3 | // ドラッグ＆ドロップのライブラリクラス
4 | export default class DragItemUtil {
5 | constructor (options) {
6 | // ドラッグ対象のDOM要素(実際にはcloneした要素を表示に使う)
7 | const target = options.targetElement
8 | this.dragTargetElement = target.cloneNode(true)
9 |
10 | const wrap = document.createElement('div')
11 | wrap.appendChild(this.dragTargetElement)
12 | this.wrapElement = wrap
13 | this.wrapElement.style.position = 'absolute'
14 | this.wrapElement.style.top = '0px'
15 | this.wrapElement.style.left = '0px'
16 | this.wrapElement.style.pointerEvents = 'none'
17 | this.wrapElement.style.boxSizing = 'border-box'
18 | this.wrapElement.style.transition = 'opacity .2s'
19 | this.wrapElement.style.zIndex = '1000'
20 | this.wrapElement.style.cursor = 'grabbing'
21 | this.wrapElement.opacity = 0
22 |
23 | this.dragStartEvent = options.dragStartEvent
24 |
25 | // ドラッグイメージを包含するDOM要素
26 | this.parentElement = options.parentElement
27 |
28 | // ドラッグ対象の要素の位置を記録
29 | this.srcPosition = DOM.position(target, this.parentElement)
30 | this.startPosition = {x: options.dragStartEvent.pageX, y: options.dragStartEvent.pageY}
31 |
32 | if (options.draggingClass) {
33 | // クラスの指定があれば、ドラッグ対象の要素にクラスを設定する
34 | setTimeout(()=>{
35 | this.dragTargetElement.classList.add(options.draggingClass)
36 | },0 )
37 | }
38 |
39 | // ドラッグイメージのサイズ、位置を調整して初期化する
40 | this.dragTargetElement.style.width = target.offsetWidth + 'px'
41 | this.dragTargetElement.style.height = target.offsetHeight + 'px'
42 | this.parentElement.appendChild(this.wrapElement)
43 | this.dragover(this.dragStartEvent)
44 |
45 | // ドラッグ時の表示制御のためのダミー画像
46 | const dummy = document.createElement('div')
47 | dummy.style.position = 'absolute'
48 | dummy.style.opacity = '0'
49 | dummy.style.width = '1px'
50 | dummy.style.height = '1px'
51 | dummy.style.pointerEvents = 'none'
52 | this.parentElement.appendChild(dummy)
53 | this.dragStartEvent.dataTransfer.setDragImage(dummy, 0, 0)
54 |
55 | this.dragoverFunc = ev => {
56 | this.dragover(ev)
57 | }
58 | document.addEventListener('dragover', this.dragoverFunc)
59 | }
60 |
61 | // ドラッグオーバー処理
62 | dragover (ev) {
63 | const dx = ev.pageX - this.startPosition.x
64 | const dy = ev.pageY - this.startPosition.y
65 | const x = this.srcPosition.x + dx
66 | const y = this.srcPosition.y + dy
67 | this.wrapElement.style.transform = `translate(${x}px, ${y}px)`
68 | }
69 |
70 | // 破棄時の処理
71 | destroy () {
72 | this.wrapElement.style.opacity = 1
73 | this.wrapElement.style.transition = 'opacity .2s'
74 | this.wrapElement.style.opacity = 0
75 | setTimeout(()=>{
76 | this.wrapElement.remove()
77 | },200)
78 | document.removeEventListener('dragover', this.dragoverFunc)
79 | }
80 | }
--------------------------------------------------------------------------------
/src/scripts/ItemBase.js:
--------------------------------------------------------------------------------
1 | // アイテムデータ処理クラスの基底クラス
2 | export default class ItemBase {
3 |
4 | constructor (options) {
5 | this.options = options
6 | this.baseIndentLevel = 0
7 | this.name
8 | }
9 |
10 | // 設定取得
11 | getConfig (key) {
12 | if (typeof this.options[this.name] !== 'undefined' && typeof this.options[this.name][key] !== 'undefined') {
13 | return this.options[this.name][key]
14 | } else if (typeof this.options[key] !== 'undefined') {
15 | return this.options[key]
16 | } else {
17 | return null
18 | }
19 | }
20 |
21 | // 渡されたHTMLElementが、このコンポーネントで処理可能か判断する
22 | matches () { return false }
23 |
24 | // 渡されたHTMLElementから、コンポーネントで扱えるデータに変換する
25 | getItem (element) { return null }
26 |
27 | // アイテムデータをHTMLに変換する
28 | getHtml(item, base_ind) {
29 | if (typeof base_ind !== 'undefined') {
30 | this.baseIndentLevel = base_ind
31 | }
32 | return null
33 | }
34 |
35 | // アイテムデータから、
36 | // 定義セット情報を取得する
37 | getPreset (item) {
38 | const conf = this.getConfig('presets')
39 | if (!conf) return null
40 |
41 | let matched_def = null
42 | conf.some(def => {
43 | let key_num = 0, matched_num = 0
44 | for (let key in def) {
45 | if (key === 'dispName') continue
46 | if (def[key] === item[key]) matched_num++
47 | key_num++
48 | }
49 | if (matched_num === key_num) { // 一致する定義セットが見つかった
50 | matched_def = def
51 | return true
52 | }
53 | })
54 | return matched_def
55 | }
56 |
57 | // 空のデータを返す
58 | getEmptyItem() { return null }
59 |
60 | // インデントを返す
61 | _indent (level) {
62 | let indent = this.options['outputIndent'] // インデント
63 | return indent.repeat(this.baseIndentLevel + level)
64 | }
65 | }
--------------------------------------------------------------------------------
/src/scripts/LoadComponents.js:
--------------------------------------------------------------------------------
1 | const components = {}
2 | const item_classes = {}
3 | const requires = require.context(
4 | '@/components', false, /.vue$/
5 | )
6 | requires.keys().forEach(file => {
7 | let m
8 | if ((m = file.match(/^\.\/(.+?)\.vue$/))!==null) {
9 | const name = m[1]
10 | const config = requires(file)
11 | const component = config.default || config
12 | const item_class = config.Item
13 |
14 | components[name] = component
15 | item_classes[name] = item_class
16 | }
17 | })
18 |
19 | export {components, item_classes}
--------------------------------------------------------------------------------
/src/scripts/Util.js:
--------------------------------------------------------------------------------
1 | import mergeWith from 'lodash/mergeWith'
2 | import cloneDeep from 'lodash/cloneDeep'
3 |
4 | export default class Util {
5 | static generateID(len, type) {
6 | if (typeof len === 'undefined') len = 8
7 | if (typeof type === 'undefined') type = 'alphanumeric'
8 |
9 | let chars
10 | if (type === 'alphanumeric') chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
11 | else if (type === 'numeric') chars = '0123456789'
12 |
13 | const clen = chars.length
14 | let r = ""
15 | for (let i = 0; i < len; i++) {
16 | r += chars[Math.floor(Math.random() * clen)]
17 | }
18 | return r
19 | }
20 |
21 | // WYSIWYGエディタで入力されたHTMLを整形する
22 | static arrangeEditableHtml(html) {
23 | if (!html) return ''
24 | //
の形式はに変換
25 | html = html.replace(/]+)?>]+)?(\s*\/)?><\/p>/ig, '')
26 | // DIV および Pタグの開始タグは改行に変換
27 | html = html.replace(/(|)/ig, '
')
28 | // DIV および Pタグの終了タグは除去
29 | html = html.replace(/(<\/\s*div\s*>|<\/\s*p\s*>)/ig, '')
30 | // 先頭のBRタグは除去
31 | html = html.replace(/^(]+)?(\s*\/)?>)+/i, '')
32 | return html
33 | }
34 |
35 | // データをクリップボードにコピーする
36 | static copyToClipboard(data) {
37 | let elm = document.createElement('div')
38 | elm.appendChild(document.createElement('pre')).textContent = data
39 |
40 | elm.style.position = 'fixed'
41 | elm.style.left = '-100%'
42 |
43 | document.body.appendChild(elm)
44 | document.getSelection().selectAllChildren(elm)
45 |
46 | let result = document.execCommand('copy')
47 | document.body.removeChild(elm)
48 | return result
49 | }
50 |
51 | // サイズ表記からバイト数への変換
52 | static sizeToByte(size_str) {
53 | const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB']
54 | size_str = size_str.toUpperCase()
55 | const reg = new RegExp('^(([1-9]\\d*|0)(\\.\\d+)?)\\s*(' + units.join('|') + '?)$')
56 |
57 | if (size_str.match(reg)) {
58 | const size = RegExp.$1
59 | const unit = RegExp.$4
60 | const pos = units.indexOf(unit)
61 | return Math.floor(size * Math.pow(1024, pos))
62 | }
63 | return null
64 | }
65 |
66 | // タッチデバイス判定
67 | static isTouchDevice() {
68 | return ('ontouchstart' in document) && ('orientation' in window)
69 | }
70 |
71 | // オブジェクトのディープコピー
72 | static deepCopy(obj) {
73 | return cloneDeep(obj)
74 | }
75 | // オブジェクトのディープマージ
76 | static deepMerge(target, src) {
77 | return mergeWith(target, src, (obj, src)=>{
78 | if (Array.isArray(obj)) {
79 | return src
80 | }
81 | })
82 | }
83 | }
84 |
85 | export class Rect {
86 | constructor(x, y, w, h) {
87 | this.x = x
88 | this.y = y
89 | this.width = w
90 | this.height = h
91 | }
92 | }
--------------------------------------------------------------------------------
/src/styles/animation.scss:
--------------------------------------------------------------------------------
1 | // ブロック要素のグループアニメーション
2 | .BEV-item-anim {
3 | transition: all .3s;
4 | width: 100%;
5 | box-sizing: border-box;
6 | }
7 | .BEV-item-enter {
8 | opacity: 0;
9 | transform: translateX(-30px);
10 | }
11 | .BEV-item-enter-to, .BEV-item-leave {
12 | opacity: 1;
13 | transform: translateX(0);
14 | }
15 | .BEV-item-leave-to {
16 | opacity: 0;
17 | transform: translateX(0);
18 | }
19 | .BEV-item-leave-active {
20 | position: absolute;
21 | }
22 |
23 | // ポップアップメニュー アニメーション
24 | .popup-enter-active, .popup-leave-active {
25 | transition: opacity .2s;
26 | }
27 | .popup-enter, .popup-leave-to /* .fade-leave-active below version 2.1.8 */ {
28 | opacity: 0;
29 | }
30 |
31 | // メニュー系のフェードアニメーション
32 | .fade-enter-active, .fade-leave-active {
33 | transition: opacity .2s;
34 | }
35 | .fade-enter, .fade-leave-to {
36 | opacity: 0;
37 | }
38 |
39 | // カラムのアイテムなし<-->アイテムありのアニメーション
40 | .column-no-items-enter-active, .column-no-items-leave-active {
41 | transition: opacity .3s;
42 | }
43 | .column-no-items-enter, .column-no-items-leave-to {
44 | opacity: 0;
45 | }
46 | .column-no-items-leave-active {
47 | position: absolute!important;
48 | }
49 |
50 | // ポップアップメニューの移動アニメーション
51 | .popup-leave-move {
52 | transition: all .2s;
53 | transform: translate(-20px, 0);
54 | }
55 |
56 | .popup-move-enter-active, .popup-move-leave-active {
57 | transition: opacity .2s, transform .2s, padding .2s;
58 | }
59 | .popup-move-enter {
60 | opacity: 0;
61 | transform: translate(20px, 0);
62 | }
63 | .popup-move-leave-to {
64 | opacity: 0;
65 | }
66 |
--------------------------------------------------------------------------------
/src/styles/components.scss:
--------------------------------------------------------------------------------
1 | .BEV-item {
2 | position: relative;
3 | opacity: 1;
4 | }
5 |
6 |
--------------------------------------------------------------------------------
/src/styles/reset.scss:
--------------------------------------------------------------------------------
1 | // リセット
2 | /deep/ {
3 | div,
4 | dl,
5 | dt,
6 | dd,
7 | ul,
8 | ol,
9 | li,
10 | h1,
11 | h2,
12 | h3,
13 | h4,
14 | h5,
15 | h6,
16 | pre,
17 | code,
18 | form,
19 | fieldset,
20 | legend,
21 | input,
22 | textarea,
23 | p,
24 | blockquote,
25 | th,
26 | td,
27 | label {
28 | margin:0;
29 | padding:0;
30 | }
31 | table {
32 | border-collapse:collapse;
33 | border-spacing:0;
34 | }
35 | fieldset,
36 | img {
37 | border:0;
38 | }
39 |
40 | address,
41 | caption,
42 | cite,
43 | code,
44 | dfn,
45 | em,
46 | strong,
47 | th,
48 | var {
49 | font-style:normal;
50 | font-weight:normal;
51 | }
52 | ol,
53 | ul {
54 | list-style:none;
55 | }
56 | caption,
57 | th {
58 | text-align:left;
59 | }
60 | h1,
61 | h2,
62 | h3,
63 | h4,
64 | h5,
65 | h6 {
66 | font-size:100%;
67 | font-weight:normal;
68 | }
69 | q:before,
70 | q:after {
71 | content:'';
72 | }
73 | abbr,
74 | acronym {
75 | border:0;
76 | font-variant:normal;
77 | }
78 | sup {
79 | vertical-align:text-top;
80 | }
81 | sub {
82 | vertical-align:text-bottom;
83 | }
84 | input,
85 | textarea,
86 | select {
87 | font-family:inherit;
88 | font-size:inherit;
89 | font-weight:inherit;
90 | }
91 |
92 | input,
93 | textarea,
94 | select {
95 | *font-size:100%;
96 | }
97 |
98 | legend {
99 | color:#000;
100 | }
101 | }
--------------------------------------------------------------------------------
/src/styles/v-tooltip.scss:
--------------------------------------------------------------------------------
1 | $tooltip-bg-color: rgba(0,0,0,.7);
2 | .BEV-tooltip {
3 | display: block !important;
4 | z-index: 10000;
5 |
6 | .BEV-tooltip-inner {
7 | background: $tooltip-bg-color;
8 | color: white;
9 | border-radius: 3px;
10 | padding: 3px 8px 3px;
11 | font-size: .8em;
12 | }
13 |
14 | .BEV-tooltip-arrow {
15 | width: 0;
16 | height: 0;
17 | border-style: solid;
18 | position: absolute;
19 | margin: 5px;
20 | border-color: $tooltip-bg-color;
21 | z-index: 1;
22 | }
23 |
24 | &[x-placement^="top"] {
25 | margin-bottom: 5px;
26 |
27 | .BEV-tooltip-arrow {
28 | border-width: 5px 5px 0 5px;
29 | border-left-color: transparent !important;
30 | border-right-color: transparent !important;
31 | border-bottom-color: transparent !important;
32 | bottom: -5px;
33 | left: calc(50% - 5px);
34 | margin-top: 0;
35 | margin-bottom: 0;
36 | }
37 | }
38 |
39 | &[x-placement^="bottom"] {
40 | margin-top: 5px;
41 |
42 | .BEV-tooltip-arrow {
43 | border-width: 0 5px 5px 5px;
44 | border-left-color: transparent !important;
45 | border-right-color: transparent !important;
46 | border-top-color: transparent !important;
47 | top: -5px;
48 | left: calc(50% - 5px);
49 | margin-top: 0;
50 | margin-bottom: 0;
51 | }
52 | }
53 |
54 | &[x-placement^="right"] {
55 | margin-left: 5px;
56 |
57 | .BEV-tooltip-arrow {
58 | border-width: 5px 5px 5px 0;
59 | border-left-color: transparent !important;
60 | border-top-color: transparent !important;
61 | border-bottom-color: transparent !important;
62 | left: -5px;
63 | top: calc(50% - 5px);
64 | margin-left: 0;
65 | margin-right: 0;
66 | }
67 | }
68 |
69 | &[x-placement^="left"] {
70 | margin-right: 5px;
71 |
72 | .BEV-tooltip-arrow {
73 | border-width: 5px 0 5px 5px;
74 | border-top-color: transparent !important;
75 | border-right-color: transparent !important;
76 | border-bottom-color: transparent !important;
77 | right: -5px;
78 | top: calc(50% - 5px);
79 | margin-left: 0;
80 | margin-right: 0;
81 | }
82 | }
83 |
84 |
85 | &[aria-hidden='true'] {
86 | visibility: hidden;
87 | opacity: 0;
88 | transition: opacity .15s, visibility .15s;
89 | }
90 |
91 | &[aria-hidden='false'] {
92 | visibility: visible;
93 | opacity: 1;
94 | transition: opacity .15s;
95 | }
96 | }
--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | publicPath: './',
3 | outputDir: './dist',
4 | runtimeCompiler: true,
5 |
6 | configureWebpack: {
7 | output: {
8 | filename: 'js/block-editor-vue.js'
9 | },
10 | optimization: {
11 | splitChunks: false
12 | }
13 | },
14 |
15 | filenameHashing: false,
16 | baseUrl: undefined,
17 | assetsDir: undefined,
18 | productionSourceMap: false,
19 | parallel: undefined,
20 |
21 | css: {
22 | extract: false
23 | }
24 | }
25 |
--------------------------------------------------------------------------------