@taole/dev-helper 0.0.10 → 0.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/Tdiv/index.js +232 -223
  2. package/Tdiv/index.svelte +29 -0
  3. package/Tdiv/index.vue +9 -0
  4. package/dist/tdiv.umd.js +229 -220
  5. package/package.json +24 -24
package/Tdiv/index.js CHANGED
@@ -1,224 +1,233 @@
1
- import setting from "./setting.js";
2
- import { updateConfig, setViewportWidth, setViewportUnit, setUsePx, setUseButtonEffect, subscribe } from "./setting.js";
3
-
4
- const styleText = `
5
- .tw-img-div {
6
- display: block;
7
- background-position: top center;
8
- background-repeat: no-repeat;
9
- background-size: 100% auto;
10
- flex: none;
11
- }
12
- .click-effect:active {
13
- opacity: 0.85;
14
- transform: translateY(1px);
15
- }`;
16
-
17
- function hasValue(value) {
18
- return value !== null && value !== undefined && value !== '';
19
- }
20
-
21
- function calc(value, { usePx, viewportWidth, viewportUnit }) {
22
- let vWidth = setting.viewportWidth;
23
- if (viewportWidth) vWidth = viewportWidth;
24
- let vUnit = setting.viewportUnit;
25
- if (viewportUnit) vUnit = viewportUnit;
26
- let localUsePx = setting.usePx;
27
- if (typeof usePx === 'boolean') localUsePx = usePx;
28
-
29
- // console.log("setting", setting, localUsePx);
30
-
31
- if (typeof value === 'string' && !isNaN(value)) value = Number(value);
32
- if (typeof value === 'number') {
33
- if (localUsePx) return value + 'px';
34
- let val = ((value / vWidth) * 100).toFixed(4);
35
- return `${val}${vUnit}`;
36
- }
37
- return value;
38
- }
39
-
40
- class Tdiv extends HTMLElement {
41
- static get observedAttributes() {
42
- return [
43
- '_class', 'usePx', '_style', 'src', 'width', 'height', 'absolute',
44
- 'top', 'left', 'right', 'bottom', 'zIndex', 'pointer', 'flex', 'column', 'center',
45
- 'text', 'color', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit'
46
- ];
47
- }
48
-
49
- constructor() {
50
- super();
51
- this._onClickHandler = this._onClickHandler.bind(this);
52
- this._connected = false;
53
- this._iscalcstyle = false;
54
- this._unsubscribe = null;
55
- }
56
-
57
- connectedCallback() {
58
- this._connected = true;
59
- this._upgradeProperties();
60
- this._update();
61
- this.addEventListener('click', this._onClickHandler);
62
- this._unsubscribe = subscribe(this._update.bind(this));
63
- }
64
-
65
- disconnectedCallback() {
66
- this._connected = false;
67
- this.removeEventListener('click', this._onClickHandler);
68
- if (this._unsubscribe) {
69
- this._unsubscribe();
70
- this._unsubscribe = null;
71
- }
72
- }
73
-
74
- attributeChangedCallback() {
75
- if (!this._connected) return;
76
- this._update();
77
- }
78
-
79
- _upgradeProperties() {
80
- // For properties set before upgrade
81
- Tdiv.observedAttributes.forEach(attr => {
82
- if (this.hasOwnProperty(attr)) {
83
- let value = this[attr];
84
- delete this[attr];
85
- this[attr] = value;
86
- }
87
- });
88
- }
89
-
90
- _getAttr(name, type = 'string') {
91
- if (!this.hasAttribute(name)) return null;
92
- let val = this.getAttribute(name);
93
- if (type === 'boolean') return val === '' || val === 'true';
94
- if (type === 'number') return Number(val);
95
- return val;
96
- }
97
-
98
- _update() {
99
- if (this._iscalcstyle) return;
100
- this._iscalcstyle = true;
101
- // console.log('update');
102
- // 读取所有属性
103
- const _class = this._getAttr('_class') || '';
104
- const usePx = this._getAttr('usePx', 'boolean');
105
- const styleAttr = this._getAttr('_style') || '';
106
- const src = this._getAttr('src') || '';
107
- const width = this._getAttr('width');
108
- const height = this._getAttr('height');
109
- const absolute = this._getAttr('absolute', 'boolean');
110
- const top = this._getAttr('top');
111
- const left = this._getAttr('left');
112
- const right = this._getAttr('right');
113
- const bottom = this._getAttr('bottom');
114
- const zIndex = this._getAttr('zIndex');
115
- const pointer = this._getAttr('pointer', 'boolean');
116
- const flex = this._getAttr('flex', 'boolean');
117
- const column = this._getAttr('column', 'boolean');
118
- const center = this._getAttr('center', 'boolean');
119
- const text = this._getAttr('text');
120
- const color = this._getAttr('color');
121
- const srcMode = this._getAttr('srcMode') || 'auto';
122
- const debug = this._getAttr('debug', 'boolean');
123
- const viewportWidth = this._getAttr('viewportWidth', 'number');
124
- const viewportUnit = this._getAttr('viewportUnit');
125
- // class
126
- let extraClass = ['tw-img-div'];
127
- if (_class) extraClass.push(_class);
128
- if (setting.useButtonEffect && this._getAttr('onClick')) extraClass.push('click-effect');
129
- // 分组样式
130
- const calcOpt = { usePx, viewportWidth, viewportUnit };
131
- let layoutStyle = '';
132
- // 宽度
133
- if (hasValue(width)) {
134
- const widthStyle = `width: ${calc(width, calcOpt)};`;
135
- layoutStyle += widthStyle;
136
- }
137
- if (hasValue(height)) {
138
- const heightStyle = `height: ${calc(height, calcOpt)};`;
139
- layoutStyle += heightStyle;
140
- }
141
- if (absolute) {
142
- layoutStyle += 'position: absolute;';
143
- if (hasValue(left)) layoutStyle += `left: ${calc(left, calcOpt)};`;
144
- if (hasValue(top)) layoutStyle += `top: ${calc(top, calcOpt)};`;
145
- if (hasValue(right)) layoutStyle += `right: ${calc(right, calcOpt)};`;
146
- if (hasValue(bottom)) layoutStyle += `bottom: ${calc(bottom, calcOpt)};`;
147
- } else {
148
- layoutStyle += 'position: relative;';
149
- if (hasValue(top)) layoutStyle += `margin-top: ${calc(top, calcOpt)};`;
150
- if (hasValue(left)) layoutStyle += `margin-left: ${calc(left, calcOpt)};`;
151
- if (hasValue(right)) layoutStyle += `margin-right: ${calc(right, calcOpt)};`;
152
- if (hasValue(bottom)) layoutStyle += `margin-bottom: ${calc(bottom, calcOpt)};`;
153
- }
154
- if (hasValue(zIndex)) layoutStyle += `z-index: ${zIndex};`;
155
- if (pointer === true) {
156
- layoutStyle += 'cursor: pointer;';
157
- } else if (this._getAttr('onClick') && pointer === false) {
158
- layoutStyle += 'cursor: pointer;';
159
- }
160
- if (flex) {
161
- layoutStyle += 'display:flex;';
162
- if (column) layoutStyle += 'flex-direction: column;';
163
- if (center) {
164
- layoutStyle += 'justify-content: center;';
165
- layoutStyle += 'align-items: center;';
166
- }
167
- } else {
168
- if (center) layoutStyle += 'text-align: center;';
169
- }
170
-
171
- if (text) layoutStyle += `font-size: ${calc(text, calcOpt)};`;
172
- if (src) {
173
- let realSrc = src;
174
- if (src.indexOf('https://') === -1) {
175
- realSrc = `https://dynamics-share.tuwan.com/${src}?x-oss-process=image/format,webp/ignore-error,1`;
176
- }
177
- layoutStyle += `background-image: url(${realSrc});`;
178
-
179
-
180
- if (srcMode === 'fill') {
181
- layoutStyle += 'background-size: 100% 100%;';
182
- } else if (srcMode === 'cover') {
183
- layoutStyle += 'background-size: cover;';
184
- }
185
- }
186
- if (color) layoutStyle += `color: ${color};`;
187
- if (styleAttr) layoutStyle += styleAttr;
188
- if (debug) {
189
- console.log('layoutStyle', layoutStyle);
190
- }
191
- const currentList = Array.from(this.classList);
192
- const classNeeded = extraClass.filter(item => !currentList.includes(item));
193
- this.classList.add(...classNeeded);
194
- this.style.cssText = layoutStyle;
195
- this._iscalcstyle = false;
196
- }
197
-
198
- _onClickHandler(e) {
199
- // 支持onClick属性（字符串，window作用域下查找）
200
- const onClickAttr = this._getAttr('onClick');
201
- if (onClickAttr && typeof window[onClickAttr] === 'function') {
202
- window[onClickAttr](e);
203
- }
204
- }
205
- }
206
-
207
-
208
- let isRegister = false;
209
- function registerTdiv() {
210
- if (!isRegister) {
211
- customElements.define('t-div', Tdiv);
212
- // append style for t-div
213
- const style = document.createElement('style');
214
- style.textContent = styleText;
215
- document.head.appendChild(style);
216
- isRegister = true;
217
- }
218
- }
219
-
220
- registerTdiv();
221
-
222
- export default {
223
- updateConfig, setViewportWidth, setViewportUnit, setUsePx, setUseButtonEffect
1
+ import setting from "./setting.js";
2
+ import { updateConfig, setViewportWidth, setViewportUnit, setUsePx, setUseButtonEffect, subscribe } from "./setting.js";
3
+
4
+ const styleText = `
5
+ .tw-img-div {
6
+ display: block;
7
+ background-position: top center;
8
+ background-repeat: no-repeat;
9
+ background-size: 100% auto;
10
+ flex: none;
11
+ }
12
+ .click-effect:active {
13
+ opacity: 0.85;
14
+ transform: translateY(1px);
15
+ }`;
16
+
17
+ function hasValue(value) {
18
+ return value !== null && value !== undefined && value !== '';
19
+ }
20
+
21
+ function calc(value, { usePx, viewportWidth, viewportUnit }) {
22
+ let vWidth = setting.viewportWidth;
23
+ if (viewportWidth) vWidth = viewportWidth;
24
+ let vUnit = setting.viewportUnit;
25
+ if (viewportUnit) vUnit = viewportUnit;
26
+ let localUsePx = setting.usePx;
27
+ if (typeof usePx === 'boolean') localUsePx = usePx;
28
+
29
+ // console.log("setting", setting, localUsePx);
30
+
31
+ if (typeof value === 'string' && !isNaN(value)) value = Number(value);
32
+ if (typeof value === 'number') {
33
+ if (localUsePx) return value + 'px';
34
+ let val = ((value / vWidth) * 100).toFixed(4);
35
+ return `${val}${vUnit}`;
36
+ }
37
+ return value;
38
+ }
39
+
40
+ class Tdiv extends HTMLElement {
41
+ static get observedAttributes() {
42
+ return [
43
+ '_class', 'usePx', '_style', 'src', 'width', 'height', 'absolute',
44
+ 'top', 'left', 'right', 'bottom', 'zIndex', 'pointer', 'flex', 'column', 'center',
45
+ 'text', 'color','radius','border','borderColor', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit'
46
+ ];
47
+ }
48
+
49
+ constructor() {
50
+ super();
51
+ this._onClickHandler = this._onClickHandler.bind(this);
52
+ this._connected = false;
53
+ this._iscalcstyle = false;
54
+ this._unsubscribe = null;
55
+ }
56
+
57
+ connectedCallback() {
58
+ this._connected = true;
59
+ this._upgradeProperties();
60
+ this._update();
61
+ this.addEventListener('click', this._onClickHandler);
62
+ this._unsubscribe = subscribe(this._update.bind(this));
63
+ }
64
+
65
+ disconnectedCallback() {
66
+ this._connected = false;
67
+ this.removeEventListener('click', this._onClickHandler);
68
+ if (this._unsubscribe) {
69
+ this._unsubscribe();
70
+ this._unsubscribe = null;
71
+ }
72
+ }
73
+
74
+ attributeChangedCallback() {
75
+ if (!this._connected) return;
76
+ this._update();
77
+ }
78
+
79
+ _upgradeProperties() {
80
+ // For properties set before upgrade
81
+ Tdiv.observedAttributes.forEach(attr => {
82
+ if (this.hasOwnProperty(attr)) {
83
+ let value = this[attr];
84
+ delete this[attr];
85
+ this[attr] = value;
86
+ }
87
+ });
88
+ }
89
+
90
+ _getAttr(name, type = 'string') {
91
+ if (!this.hasAttribute(name)) return null;
92
+ let val = this.getAttribute(name);
93
+ if (type === 'boolean') return val === '' || val === 'true';
94
+ if (type === 'number') return Number(val);
95
+ return val;
96
+ }
97
+
98
+ _update() {
99
+ if (this._iscalcstyle) return;
100
+ this._iscalcstyle = true;
101
+ // console.log('update');
102
+ // 读取所有属性
103
+ const _class = this._getAttr('_class') || '';
104
+ const usePx = this._getAttr('usePx', 'boolean');
105
+ const styleAttr = this._getAttr('_style') || '';
106
+ const src = this._getAttr('src') || '';
107
+ const width = this._getAttr('width');
108
+ const height = this._getAttr('height');
109
+ const absolute = this._getAttr('absolute', 'boolean');
110
+ const top = this._getAttr('top');
111
+ const left = this._getAttr('left');
112
+ const right = this._getAttr('right');
113
+ const bottom = this._getAttr('bottom');
114
+ const zIndex = this._getAttr('zIndex');
115
+ const pointer = this._getAttr('pointer', 'boolean');
116
+ const flex = this._getAttr('flex', 'boolean');
117
+ const column = this._getAttr('column', 'boolean');
118
+ const center = this._getAttr('center', 'boolean');
119
+ const text = this._getAttr('text');
120
+ const color = this._getAttr('color');
121
+ const radius = this._getAttr('radius');
122
+ const border = this._getAttr('border');
123
+ const borderColor = this._getAttr('borderColor');
124
+ const srcMode = this._getAttr('srcMode') || 'auto';
125
+ const debug = this._getAttr('debug', 'boolean');
126
+ const viewportWidth = this._getAttr('viewportWidth', 'number');
127
+ const viewportUnit = this._getAttr('viewportUnit');
128
+ // class
129
+ let extraClass = ['tw-img-div'];
130
+ if (_class) extraClass.push(_class);
131
+ if (setting.useButtonEffect && this._getAttr('onClick')) extraClass.push('click-effect');
132
+ // 分组样式
133
+ const calcOpt = { usePx, viewportWidth, viewportUnit };
134
+ let layoutStyle = '';
135
+ // 宽度
136
+ if (hasValue(width)) {
137
+ const widthStyle = `width: ${calc(width, calcOpt)};`;
138
+ layoutStyle += widthStyle;
139
+ }
140
+ if (hasValue(height)) {
141
+ const heightStyle = `height: ${calc(height, calcOpt)};`;
142
+ layoutStyle += heightStyle;
143
+ }
144
+ if (absolute) {
145
+ layoutStyle += 'position: absolute;';
146
+ if (hasValue(left)) layoutStyle += `left: ${calc(left, calcOpt)};`;
147
+ if (hasValue(top)) layoutStyle += `top: ${calc(top, calcOpt)};`;
148
+ if (hasValue(right)) layoutStyle += `right: ${calc(right, calcOpt)};`;
149
+ if (hasValue(bottom)) layoutStyle += `bottom: ${calc(bottom, calcOpt)};`;
150
+ } else {
151
+ layoutStyle += 'position: relative;';
152
+ if (hasValue(top)) layoutStyle += `margin-top: ${calc(top, calcOpt)};`;
153
+ if (hasValue(left)) layoutStyle += `margin-left: ${calc(left, calcOpt)};`;
154
+ if (hasValue(right)) layoutStyle += `margin-right: ${calc(right, calcOpt)};`;
155
+ if (hasValue(bottom)) layoutStyle += `margin-bottom: ${calc(bottom, calcOpt)};`;
156
+ }
157
+ if (hasValue(radius)) layoutStyle += `border-radius: ${calc(radius, calcOpt)};`;
158
+ if (hasValue(border)) {
159
+ layoutStyle += `border: ${calc(border, calcOpt)} solid ${borderColor || "#000"};`;
160
+ } else if (hasValue(borderColor)) {
161
+ layoutStyle += `border-color: ${borderColor};`;
162
+ }
163
+ if (hasValue(zIndex)) layoutStyle += `z-index: ${zIndex};`;
164
+ if (pointer === true) {
165
+ layoutStyle += 'cursor: pointer;';
166
+ } else if (this._getAttr('onClick') && pointer === false) {
167
+ layoutStyle += 'cursor: pointer;';
168
+ }
169
+ if (flex) {
170
+ layoutStyle += 'display:flex;';
171
+ if (column) layoutStyle += 'flex-direction: column;';
172
+ if (center) {
173
+ layoutStyle += 'justify-content: center;';
174
+ layoutStyle += 'align-items: center;';
175
+ }
176
+ } else {
177
+ if (center) layoutStyle += 'text-align: center;';
178
+ }
179
+
180
+ if (text) layoutStyle += `font-size: ${calc(text, calcOpt)};`;
181
+ if (src) {
182
+ let realSrc = src;
183
+ if (src.indexOf('https://') === -1) {
184
+ realSrc = `https://dynamics-share.tuwan.com/${src}?x-oss-process=image/format,webp/ignore-error,1`;
185
+ }
186
+ layoutStyle += `background-image: url(${realSrc});`;
187
+
188
+
189
+ if (srcMode === 'fill') {
190
+ layoutStyle += 'background-size: 100% 100%;';
191
+ } else if (srcMode === 'cover') {
192
+ layoutStyle += 'background-size: cover;';
193
+ }
194
+ }
195
+ if (color) layoutStyle += `color: ${color};`;
196
+ if (styleAttr) layoutStyle += styleAttr;
197
+ if (debug) {
198
+ console.log('layoutStyle', layoutStyle);
199
+ }
200
+ const currentList = Array.from(this.classList);
201
+ const classNeeded = extraClass.filter(item => !currentList.includes(item));
202
+ this.classList.add(...classNeeded);
203
+ this.style.cssText = layoutStyle;
204
+ this._iscalcstyle = false;
205
+ }
206
+
207
+ _onClickHandler(e) {
208
+ // 支持onClick属性（字符串，window作用域下查找）
209
+ const onClickAttr = this._getAttr('onClick');
210
+ if (onClickAttr && typeof window[onClickAttr] === 'function') {
211
+ window[onClickAttr](e);
212
+ }
213
+ }
214
+ }
215
+
216
+
217
+ let isRegister = false;
218
+ function registerTdiv() {
219
+ if (!isRegister) {
220
+ customElements.define('t-div', Tdiv);
221
+ // append style for t-div
222
+ const style = document.createElement('style');
223
+ style.textContent = styleText;
224
+ document.head.appendChild(style);
225
+ isRegister = true;
226
+ }
227
+ }
228
+
229
+ registerTdiv();
230
+
231
+ export default {
232
+ updateConfig, setViewportWidth, setViewportUnit, setUsePx, setUseButtonEffect
224
233
  }
package/Tdiv/index.svelte CHANGED
@@ -97,6 +97,26 @@
97
97
  * 内部文本的颜色
98
98
  */
99
99
  export let color = "";
100
+
101
+ /**
102
+ * @type {number|string}
103
+ * 圆角大小
104
+ */
105
+ export let radius = null;
106
+
107
+ /**
108
+ * @type {string}
109
+ * 边框宽度
110
+ */
111
+ export let border = null;
112
+
113
+ /**
114
+ * @type {string}
115
+ * 边框颜色
116
+ */
117
+ export let borderColor = null;
118
+
119
+
100
120
  /**
101
121
  * @type {'auto'|'fill'|'cover'|'contain'}
102
122
  * src传入时有效, 图片的填充模式: 默认auto
@@ -208,6 +228,15 @@
208
228
  ret += `margin-bottom: ${calc(bottom)};`;
209
229
  }
210
230
  }
231
+ if(hasValue(radius)){
232
+ ret += `border-radius: ${calc(radius)};`;
233
+ }
234
+ if(hasValue(border)){
235
+ ret += `border: ${calc(border)} solid ${borderColor || "#000"};`;
236
+ } else if(hasValue(borderColor)){
237
+ ret += `border-color: ${borderColor};`;
238
+ }
239
+
211
240
  if (hasValue(zIndex)) {
212
241
  ret += `z-index: ${zIndex};`;
213
242
  }
package/Tdiv/index.vue CHANGED
@@ -28,6 +28,9 @@ export default {
28
28
  center: { type: Boolean, default: false },
29
29
  text: { type: [Number, String], default: null },
30
30
  color: { type: String, default: '' },
31
+ radius: { type: [Number, String], default: null },
32
+ border: { type: [Number, String], default: null },
33
+ borderColor: { type: String, default: null },
31
34
  srcMode: { type: String, default: 'auto' },
32
35
  onClick: { type: Function, default: null },
33
36
  debug: { type: Boolean, default: false },
@@ -80,6 +83,12 @@ export default {
80
83
  if (hasValue(this.right)) ret += `margin-right: ${calc(this.right)};`;
81
84
  if (hasValue(this.bottom)) ret += `margin-bottom: ${calc(this.bottom)};`;
82
85
  }
86
+ if (hasValue(this.radius)) ret += `border-radius: ${calc(this.radius)};`;
87
+ if (hasValue(this.border)) {
88
+ ret += `border: ${calc(this.border)} solid ${this.borderColor || "#000"};`;
89
+ } else if(hasValue(this.borderColor)){
90
+ ret += `border-color: ${this.borderColor};`;
91
+ }
83
92
  if (hasValue(this.zIndex)) ret += `z-index: ${this.zIndex};`;
84
93
  if (this.pointer === true) {
85
94
  ret += 'cursor: pointer;';
package/dist/tdiv.umd.js CHANGED
@@ -85,226 +85,235 @@
85
85
  notify();
86
86
  }
87
87
 
88
- const styleText = `
89
- .tw-img-div {
90
- display: block;
91
- background-position: top center;
92
- background-repeat: no-repeat;
93
- background-size: 100% auto;
94
- flex: none;
95
- }
96
- .click-effect:active {
97
- opacity: 0.85;
98
- transform: translateY(1px);
99
- }`;
100
-
101
- function hasValue(value) {
102
- return value !== null && value !== undefined && value !== '';
103
- }
104
-
105
- function calc(value, { usePx, viewportWidth, viewportUnit }) {
106
- let vWidth = config.viewportWidth;
107
- if (viewportWidth) vWidth = viewportWidth;
108
- let vUnit = config.viewportUnit;
109
- if (viewportUnit) vUnit = viewportUnit;
110
- let localUsePx = config.usePx;
111
- if (typeof usePx === 'boolean') localUsePx = usePx;
112
-
113
- // console.log("setting", setting, localUsePx);
114
-
115
- if (typeof value === 'string' && !isNaN(value)) value = Number(value);
116
- if (typeof value === 'number') {
117
- if (localUsePx) return value + 'px';
118
- let val = ((value / vWidth) * 100).toFixed(4);
119
- return `${val}${vUnit}`;
120
- }
121
- return value;
122
- }
123
-
124
- class Tdiv extends HTMLElement {
125
- static get observedAttributes() {
126
- return [
127
- '_class', 'usePx', '_style', 'src', 'width', 'height', 'absolute',
128
- 'top', 'left', 'right', 'bottom', 'zIndex', 'pointer', 'flex', 'column', 'center',
129
- 'text', 'color', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit'
130
- ];
131
- }
132
-
133
- constructor() {
134
- super();
135
- this._onClickHandler = this._onClickHandler.bind(this);
136
- this._connected = false;
137
- this._iscalcstyle = false;
138
- this._unsubscribe = null;
139
- }
140
-
141
- connectedCallback() {
142
- this._connected = true;
143
- this._upgradeProperties();
144
- this._update();
145
- this.addEventListener('click', this._onClickHandler);
146
- this._unsubscribe = subscribe(this._update.bind(this));
147
- }
148
-
149
- disconnectedCallback() {
150
- this._connected = false;
151
- this.removeEventListener('click', this._onClickHandler);
152
- if (this._unsubscribe) {
153
- this._unsubscribe();
154
- this._unsubscribe = null;
155
- }
156
- }
157
-
158
- attributeChangedCallback() {
159
- if (!this._connected) return;
160
- this._update();
161
- }
162
-
163
- _upgradeProperties() {
164
- // For properties set before upgrade
165
- Tdiv.observedAttributes.forEach(attr => {
166
- if (this.hasOwnProperty(attr)) {
167
- let value = this[attr];
168
- delete this[attr];
169
- this[attr] = value;
170
- }
171
- });
172
- }
173
-
174
- _getAttr(name, type = 'string') {
175
- if (!this.hasAttribute(name)) return null;
176
- let val = this.getAttribute(name);
177
- if (type === 'boolean') return val === '' || val === 'true';
178
- if (type === 'number') return Number(val);
179
- return val;
180
- }
181
-
182
- _update() {
183
- if (this._iscalcstyle) return;
184
- this._iscalcstyle = true;
185
- // console.log('update');
186
- // 读取所有属性
187
- const _class = this._getAttr('_class') || '';
188
- const usePx = this._getAttr('usePx', 'boolean');
189
- const styleAttr = this._getAttr('_style') || '';
190
- const src = this._getAttr('src') || '';
191
- const width = this._getAttr('width');
192
- const height = this._getAttr('height');
193
- const absolute = this._getAttr('absolute', 'boolean');
194
- const top = this._getAttr('top');
195
- const left = this._getAttr('left');
196
- const right = this._getAttr('right');
197
- const bottom = this._getAttr('bottom');
198
- const zIndex = this._getAttr('zIndex');
199
- const pointer = this._getAttr('pointer', 'boolean');
200
- const flex = this._getAttr('flex', 'boolean');
201
- const column = this._getAttr('column', 'boolean');
202
- const center = this._getAttr('center', 'boolean');
203
- const text = this._getAttr('text');
204
- const color = this._getAttr('color');
205
- const srcMode = this._getAttr('srcMode') || 'auto';
206
- const debug = this._getAttr('debug', 'boolean');
207
- const viewportWidth = this._getAttr('viewportWidth', 'number');
208
- const viewportUnit = this._getAttr('viewportUnit');
209
- // class
210
- let extraClass = ['tw-img-div'];
211
- if (_class) extraClass.push(_class);
212
- if (config.useButtonEffect && this._getAttr('onClick')) extraClass.push('click-effect');
213
- // 分组样式
214
- const calcOpt = { usePx, viewportWidth, viewportUnit };
215
- let layoutStyle = '';
216
- // 宽度
217
- if (hasValue(width)) {
218
- const widthStyle = `width: ${calc(width, calcOpt)};`;
219
- layoutStyle += widthStyle;
220
- }
221
- if (hasValue(height)) {
222
- const heightStyle = `height: ${calc(height, calcOpt)};`;
223
- layoutStyle += heightStyle;
224
- }
225
- if (absolute) {
226
- layoutStyle += 'position: absolute;';
227
- if (hasValue(left)) layoutStyle += `left: ${calc(left, calcOpt)};`;
228
- if (hasValue(top)) layoutStyle += `top: ${calc(top, calcOpt)};`;
229
- if (hasValue(right)) layoutStyle += `right: ${calc(right, calcOpt)};`;
230
- if (hasValue(bottom)) layoutStyle += `bottom: ${calc(bottom, calcOpt)};`;
231
- } else {
232
- layoutStyle += 'position: relative;';
233
- if (hasValue(top)) layoutStyle += `margin-top: ${calc(top, calcOpt)};`;
234
- if (hasValue(left)) layoutStyle += `margin-left: ${calc(left, calcOpt)};`;
235
- if (hasValue(right)) layoutStyle += `margin-right: ${calc(right, calcOpt)};`;
236
- if (hasValue(bottom)) layoutStyle += `margin-bottom: ${calc(bottom, calcOpt)};`;
237
- }
238
- if (hasValue(zIndex)) layoutStyle += `z-index: ${zIndex};`;
239
- if (pointer === true) {
240
- layoutStyle += 'cursor: pointer;';
241
- } else if (this._getAttr('onClick') && pointer === false) {
242
- layoutStyle += 'cursor: pointer;';
243
- }
244
- if (flex) {
245
- layoutStyle += 'display:flex;';
246
- if (column) layoutStyle += 'flex-direction: column;';
247
- if (center) {
248
- layoutStyle += 'justify-content: center;';
249
- layoutStyle += 'align-items: center;';
250
- }
251
- } else {
252
- if (center) layoutStyle += 'text-align: center;';
253
- }
254
-
255
- if (text) layoutStyle += `font-size: ${calc(text, calcOpt)};`;
256
- if (src) {
257
- let realSrc = src;
258
- if (src.indexOf('https://') === -1) {
259
- realSrc = `https://dynamics-share.tuwan.com/${src}?x-oss-process=image/format,webp/ignore-error,1`;
260
- }
261
- layoutStyle += `background-image: url(${realSrc});`;
262
-
263
-
264
- if (srcMode === 'fill') {
265
- layoutStyle += 'background-size: 100% 100%;';
266
- } else if (srcMode === 'cover') {
267
- layoutStyle += 'background-size: cover;';
268
- }
269
- }
270
- if (color) layoutStyle += `color: ${color};`;
271
- if (styleAttr) layoutStyle += styleAttr;
272
- if (debug) {
273
- console.log('layoutStyle', layoutStyle);
274
- }
275
- const currentList = Array.from(this.classList);
276
- const classNeeded = extraClass.filter(item => !currentList.includes(item));
277
- this.classList.add(...classNeeded);
278
- this.style.cssText = layoutStyle;
279
- this._iscalcstyle = false;
280
- }
281
-
282
- _onClickHandler(e) {
283
- // 支持onClick属性（字符串，window作用域下查找）
284
- const onClickAttr = this._getAttr('onClick');
285
- if (onClickAttr && typeof window[onClickAttr] === 'function') {
286
- window[onClickAttr](e);
287
- }
288
- }
289
- }
290
-
291
-
292
- let isRegister = false;
293
- function registerTdiv() {
294
- if (!isRegister) {
295
- customElements.define('t-div', Tdiv);
296
- // append style for t-div
297
- const style = document.createElement('style');
298
- style.textContent = styleText;
299
- document.head.appendChild(style);
300
- isRegister = true;
301
- }
302
- }
303
-
304
- registerTdiv();
305
-
306
- var index = {
307
- updateConfig, setViewportWidth, setViewportUnit, setUsePx, setUseButtonEffect
88
+ const styleText = `
89
+ .tw-img-div {
90
+ display: block;
91
+ background-position: top center;
92
+ background-repeat: no-repeat;
93
+ background-size: 100% auto;
94
+ flex: none;
95
+ }
96
+ .click-effect:active {
97
+ opacity: 0.85;
98
+ transform: translateY(1px);
99
+ }`;
100
+
101
+ function hasValue(value) {
102
+ return value !== null && value !== undefined && value !== '';
103
+ }
104
+
105
+ function calc(value, { usePx, viewportWidth, viewportUnit }) {
106
+ let vWidth = config.viewportWidth;
107
+ if (viewportWidth) vWidth = viewportWidth;
108
+ let vUnit = config.viewportUnit;
109
+ if (viewportUnit) vUnit = viewportUnit;
110
+ let localUsePx = config.usePx;
111
+ if (typeof usePx === 'boolean') localUsePx = usePx;
112
+
113
+ // console.log("setting", setting, localUsePx);
114
+
115
+ if (typeof value === 'string' && !isNaN(value)) value = Number(value);
116
+ if (typeof value === 'number') {
117
+ if (localUsePx) return value + 'px';
118
+ let val = ((value / vWidth) * 100).toFixed(4);
119
+ return `${val}${vUnit}`;
120
+ }
121
+ return value;
122
+ }
123
+
124
+ class Tdiv extends HTMLElement {
125
+ static get observedAttributes() {
126
+ return [
127
+ '_class', 'usePx', '_style', 'src', 'width', 'height', 'absolute',
128
+ 'top', 'left', 'right', 'bottom', 'zIndex', 'pointer', 'flex', 'column', 'center',
129
+ 'text', 'color','radius','border','borderColor', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit'
130
+ ];
131
+ }
132
+
133
+ constructor() {
134
+ super();
135
+ this._onClickHandler = this._onClickHandler.bind(this);
136
+ this._connected = false;
137
+ this._iscalcstyle = false;
138
+ this._unsubscribe = null;
139
+ }
140
+
141
+ connectedCallback() {
142
+ this._connected = true;
143
+ this._upgradeProperties();
144
+ this._update();
145
+ this.addEventListener('click', this._onClickHandler);
146
+ this._unsubscribe = subscribe(this._update.bind(this));
147
+ }
148
+
149
+ disconnectedCallback() {
150
+ this._connected = false;
151
+ this.removeEventListener('click', this._onClickHandler);
152
+ if (this._unsubscribe) {
153
+ this._unsubscribe();
154
+ this._unsubscribe = null;
155
+ }
156
+ }
157
+
158
+ attributeChangedCallback() {
159
+ if (!this._connected) return;
160
+ this._update();
161
+ }
162
+
163
+ _upgradeProperties() {
164
+ // For properties set before upgrade
165
+ Tdiv.observedAttributes.forEach(attr => {
166
+ if (this.hasOwnProperty(attr)) {
167
+ let value = this[attr];
168
+ delete this[attr];
169
+ this[attr] = value;
170
+ }
171
+ });
172
+ }
173
+
174
+ _getAttr(name, type = 'string') {
175
+ if (!this.hasAttribute(name)) return null;
176
+ let val = this.getAttribute(name);
177
+ if (type === 'boolean') return val === '' || val === 'true';
178
+ if (type === 'number') return Number(val);
179
+ return val;
180
+ }
181
+
182
+ _update() {
183
+ if (this._iscalcstyle) return;
184
+ this._iscalcstyle = true;
185
+ // console.log('update');
186
+ // 读取所有属性
187
+ const _class = this._getAttr('_class') || '';
188
+ const usePx = this._getAttr('usePx', 'boolean');
189
+ const styleAttr = this._getAttr('_style') || '';
190
+ const src = this._getAttr('src') || '';
191
+ const width = this._getAttr('width');
192
+ const height = this._getAttr('height');
193
+ const absolute = this._getAttr('absolute', 'boolean');
194
+ const top = this._getAttr('top');
195
+ const left = this._getAttr('left');
196
+ const right = this._getAttr('right');
197
+ const bottom = this._getAttr('bottom');
198
+ const zIndex = this._getAttr('zIndex');
199
+ const pointer = this._getAttr('pointer', 'boolean');
200
+ const flex = this._getAttr('flex', 'boolean');
201
+ const column = this._getAttr('column', 'boolean');
202
+ const center = this._getAttr('center', 'boolean');
203
+ const text = this._getAttr('text');
204
+ const color = this._getAttr('color');
205
+ const radius = this._getAttr('radius');
206
+ const border = this._getAttr('border');
207
+ const borderColor = this._getAttr('borderColor');
208
+ const srcMode = this._getAttr('srcMode') || 'auto';
209
+ const debug = this._getAttr('debug', 'boolean');
210
+ const viewportWidth = this._getAttr('viewportWidth', 'number');
211
+ const viewportUnit = this._getAttr('viewportUnit');
212
+ // class
213
+ let extraClass = ['tw-img-div'];
214
+ if (_class) extraClass.push(_class);
215
+ if (config.useButtonEffect && this._getAttr('onClick')) extraClass.push('click-effect');
216
+ // 分组样式
217
+ const calcOpt = { usePx, viewportWidth, viewportUnit };
218
+ let layoutStyle = '';
219
+ // 宽度
220
+ if (hasValue(width)) {
221
+ const widthStyle = `width: ${calc(width, calcOpt)};`;
222
+ layoutStyle += widthStyle;
223
+ }
224
+ if (hasValue(height)) {
225
+ const heightStyle = `height: ${calc(height, calcOpt)};`;
226
+ layoutStyle += heightStyle;
227
+ }
228
+ if (absolute) {
229
+ layoutStyle += 'position: absolute;';
230
+ if (hasValue(left)) layoutStyle += `left: ${calc(left, calcOpt)};`;
231
+ if (hasValue(top)) layoutStyle += `top: ${calc(top, calcOpt)};`;
232
+ if (hasValue(right)) layoutStyle += `right: ${calc(right, calcOpt)};`;
233
+ if (hasValue(bottom)) layoutStyle += `bottom: ${calc(bottom, calcOpt)};`;
234
+ } else {
235
+ layoutStyle += 'position: relative;';
236
+ if (hasValue(top)) layoutStyle += `margin-top: ${calc(top, calcOpt)};`;
237
+ if (hasValue(left)) layoutStyle += `margin-left: ${calc(left, calcOpt)};`;
238
+ if (hasValue(right)) layoutStyle += `margin-right: ${calc(right, calcOpt)};`;
239
+ if (hasValue(bottom)) layoutStyle += `margin-bottom: ${calc(bottom, calcOpt)};`;
240
+ }
241
+ if (hasValue(radius)) layoutStyle += `border-radius: ${calc(radius, calcOpt)};`;
242
+ if (hasValue(border)) {
243
+ layoutStyle += `border: ${calc(border, calcOpt)} solid ${borderColor || "#000"};`;
244
+ } else if (hasValue(borderColor)) {
245
+ layoutStyle += `border-color: ${borderColor};`;
246
+ }
247
+ if (hasValue(zIndex)) layoutStyle += `z-index: ${zIndex};`;
248
+ if (pointer === true) {
249
+ layoutStyle += 'cursor: pointer;';
250
+ } else if (this._getAttr('onClick') && pointer === false) {
251
+ layoutStyle += 'cursor: pointer;';
252
+ }
253
+ if (flex) {
254
+ layoutStyle += 'display:flex;';
255
+ if (column) layoutStyle += 'flex-direction: column;';
256
+ if (center) {
257
+ layoutStyle += 'justify-content: center;';
258
+ layoutStyle += 'align-items: center;';
259
+ }
260
+ } else {
261
+ if (center) layoutStyle += 'text-align: center;';
262
+ }
263
+
264
+ if (text) layoutStyle += `font-size: ${calc(text, calcOpt)};`;
265
+ if (src) {
266
+ let realSrc = src;
267
+ if (src.indexOf('https://') === -1) {
268
+ realSrc = `https://dynamics-share.tuwan.com/${src}?x-oss-process=image/format,webp/ignore-error,1`;
269
+ }
270
+ layoutStyle += `background-image: url(${realSrc});`;
271
+
272
+
273
+ if (srcMode === 'fill') {
274
+ layoutStyle += 'background-size: 100% 100%;';
275
+ } else if (srcMode === 'cover') {
276
+ layoutStyle += 'background-size: cover;';
277
+ }
278
+ }
279
+ if (color) layoutStyle += `color: ${color};`;
280
+ if (styleAttr) layoutStyle += styleAttr;
281
+ if (debug) {
282
+ console.log('layoutStyle', layoutStyle);
283
+ }
284
+ const currentList = Array.from(this.classList);
285
+ const classNeeded = extraClass.filter(item => !currentList.includes(item));
286
+ this.classList.add(...classNeeded);
287
+ this.style.cssText = layoutStyle;
288
+ this._iscalcstyle = false;
289
+ }
290
+
291
+ _onClickHandler(e) {
292
+ // 支持onClick属性（字符串，window作用域下查找）
293
+ const onClickAttr = this._getAttr('onClick');
294
+ if (onClickAttr && typeof window[onClickAttr] === 'function') {
295
+ window[onClickAttr](e);
296
+ }
297
+ }
298
+ }
299
+
300
+
301
+ let isRegister = false;
302
+ function registerTdiv() {
303
+ if (!isRegister) {
304
+ customElements.define('t-div', Tdiv);
305
+ // append style for t-div
306
+ const style = document.createElement('style');
307
+ style.textContent = styleText;
308
+ document.head.appendChild(style);
309
+ isRegister = true;
310
+ }
311
+ }
312
+
313
+ registerTdiv();
314
+
315
+ var index = {
316
+ updateConfig, setViewportWidth, setViewportUnit, setUsePx, setUseButtonEffect
308
317
  };
309
318
 
310
319
  return index;
package/package.json CHANGED
@@ -1,24 +1,24 @@
1
- {
2
- "name": "@taole/dev-helper",
3
- "version": "0.0.10",
4
- "type": "module",
5
- "scripts": {
6
- "build": "npx -y rimraf dist && rollup -c",
7
- "test": "echo \"Error: no test specified\" && exit 1"
8
- },
9
- "keywords": [],
10
- "publishConfig": {
11
- "access": "public",
12
- "registry": "https://registry.npmjs.org/"
13
- },
14
- "files": [
15
- "Tdiv",
16
- "dist"
17
- ],
18
- "author": "",
19
- "license": "ISC",
20
- "description": "",
21
- "devDependencies": {
22
- "rollup": "^4.45.1"
23
- }
24
- }
1
+ {
2
+ "name": "@taole/dev-helper",
3
+ "version": "0.0.12",
4
+ "type": "module",
5
+ "scripts": {
6
+ "build": "npx -y rimraf dist && rollup -c",
7
+ "test": "echo \"Error: no test specified\" && exit 1"
8
+ },
9
+ "keywords": [],
10
+ "publishConfig": {
11
+ "access": "public",
12
+ "registry": "https://registry.npmjs.org/"
13
+ },
14
+ "files": [
15
+ "Tdiv",
16
+ "dist"
17
+ ],
18
+ "author": "",
19
+ "license": "ISC",
20
+ "description": "",
21
+ "devDependencies": {
22
+ "rollup": "^4.45.1"
23
+ }
24
+ }