Skip to content

D
DoraemonKit

DiDi / DoraemonKit
12 个月 前同步成功

通知 166
Star 19623
Fork 3062
D
DoraemonKit

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 7737a802 编写于 作者: A AdamCaoQAQ 提交者： GitHub
浏览文件
操作

Merge pull request #823 from didi/feature/dev-web 

Feature/dev web
上级 268ee3e0 80af155a
展开全部 隐藏空白更改
内联 并排
Showing with 1753 addition and 619 deletion
Web/packages/core/dist/index.js
浏览文件 @ 7737a802
......@@ -3,100 +3,155 @@ import { pushScopeId, popScopeId, openBlock, createBlock, withDirectives, create
/**
* 拖拽指令 v-dragable
* 减少外部依赖
* 默认使用v-dragable
* 也接受传入一个config对象 v-dragable="config"
* config支持 name opacity left top safeBottom 等属性
*/
const INIT_VALUE = 9999;
const DEFAULT_OPACITY = 0.5;
const SAFE_BOTTOM = 50; // 底部防误触
// const SAFE_BOTTOM = 50 // 底部防误触
let MOUSE_DOWN_FLAG = false;
const DEFAULT_EL_CONF = {
name: '', // 名称 用于存储位置storage的标识，没有则不存储
opacity: 1, // 默认透明度
left: '', // 初始位置, 没有则居中
top: '', // 初始位置, 没有则居中
safeBottom: 0
};
// TODO 拖拽事件兼容 Pc处理
// TODO 默认初始位置为右下角
var dragable = {
mounted (el) {
const dragable = {
mounted (el, binding) {
el.config = {
...DEFAULT_EL_CONF,
...binding.value
};
// 初始化变量
el.dokitEntryLastX = INIT_VALUE;
el.dokitEntryLastY = INIT_VALUE;
// 初始化样式
el.style.position = 'fixed';
el.style.opacity = DEFAULT_OPACITY;
el.dokitPositionLeft = getDefaultX();
el.dokitPositionTop = getDefaultY();
el.style.opacity = el.config.opacity;
el.dokitPositionLeft = getDefaultX(el);
el.dokitPositionTop = getDefaultY(el);
el.style.top = `${el.dokitPositionTop}px`;
el.style.left = `${el.dokitPositionLeft}px`;
adjustPosition(el);
// 触摸事件监听
el.ontouchstart = () => {
el.style.opacity = 1;
moveStart(el);
};
el.ontouchmove = (e) => {
e.preventDefault();
if (el.dokitEntryLastX === INIT_VALUE) {
el.dokitEntryLastX = e.touches[0].clientX;
el.dokitEntryLastY = e.touches[0].clientY;
return
}
el.dokitPositionTop += (e.touches[0].clientY - el.dokitEntryLastY);
el.dokitPositionLeft += (e.touches[0].clientX - el.dokitEntryLastX);
el.dokitEntryLastX = e.touches[0].clientX;
el.dokitEntryLastY = e.touches[0].clientY;
el.style.top = `${getAvailableTop(el)}px`;
el.style.left = `${getAvailableLeft(el)}px`;
moving(el, e);
};
el.ontouchend = (e) => {
setTimeout(() => {
if (el.dokitPositionLeft < 0) {
el.dokitPositionLeft = 0;
el.style.left = `${el.dokitPositionLeft}px`;
} else if (el.dokitPositionLeft + e.target.clientWidth > window.screen.availWidth) {
el.dokitPositionLeft = window.screen.availWidth - e.target.clientWidth;
el.style.left = `${el.dokitPositionLeft}px`;
moveEnd(el);
};
// PC鼠标事件
el.onmousedown = (e) => {
e.preventDefault();
moveStart(el);
MOUSE_DOWN_FLAG = true;
};
}
if (el.dokitPositionTop < 0) {
el.dokitPositionTop = 0;
el.style.top = `${el.dokitPositionTop}px`;
window.addEventListener('mousemove', (e)=> {
if (MOUSE_DOWN_FLAG) moving(el, e);
});
} else if (el.dokitPositionTop + e.target.clientHeight + SAFE_BOTTOM > window.screen.availHeight) {
el.dokitPositionTop = window.screen.availHeight - e.target.clientHeight - SAFE_BOTTOM;
el.style.top = `${el.dokitPositionTop}px`;
window.addEventListener('mouseup', (e)=> {
if (MOUSE_DOWN_FLAG) {
moveEnd(el);
MOUSE_DOWN_FLAG = false;
}
});
}
localStorage.setItem('dokitPositionTop', el.dokitPositionTop);
localStorage.setItem('dokitPositionLeft', el.dokitPositionLeft);
}, 100);
el.dokitEntryLastX = INIT_VALUE;
el.dokitEntryLastY = INIT_VALUE;
el.style.opacity = 0.5;
};
window.addEventListener('resize', ()=> {
adjustPosition(el);
});
}
};
function getDefaultX(el){
let defaultX = Math.round(window.outerWidth/2);
return localStorage.getItem('dokitPositionLeft') ? parseInt(localStorage.getItem('dokitPositionLeft')) : defaultX
function moveStart(el) {
el.style.opacity = 1;
}
function getDefaultY(el){
let defaultY = Math.round(window.outerHeight/2);
return localStorage.getItem('dokitPositionTop') ? parseInt(localStorage.getItem('dokitPositionTop')) : defaultY
function moving(el, e) {
let target = e.touches ? e.touches[0] : e;
if (el.dokitEntryLastX === INIT_VALUE) {
el.dokitEntryLastX = target.clientX;
el.dokitEntryLastY = target.clientY;
return
}
el.dokitPositionTop += (target.clientY - el.dokitEntryLastY);
el.dokitPositionLeft += (target.clientX - el.dokitEntryLastX);
el.dokitEntryLastX = target.clientX;
el.dokitEntryLastY = target.clientY;
// el.style.top = `${getAvailableTop(el)}px`
// el.style.left = `${getAvailableLeft(el)}px`
el.style.top = `${el.dokitPositionTop}px`;
el.style.left = `${el.dokitPositionLeft}px`;
}
function getAvailableLeft(el){
return standardNumber(el.dokitPositionLeft, window.outerWidth - el.clientWidth)
function moveEnd(el, e) {
setTimeout(() => {
adjustPosition(el);
el.config.name && localStorage.setItem(`dokitPositionTop_${el.config.name}`, el.dokitPositionTop);
el.config.name && localStorage.setItem(`dokitPositionLeft_${el.config.name}`, el.dokitPositionLeft);
}, 100);
el.dokitEntryLastX = INIT_VALUE;
el.dokitEntryLastY = INIT_VALUE;
el.style.opacity = el.config.opacity;
}
function getAvailableTop(el){
return standardNumber(el.dokitPositionTop, window.outerHeight - el.clientHeight)
function getDefaultX(el){
let defaultX = el.config.left || Math.round(window.innerWidth/2);
return localStorage.getItem(`dokitPositionLeft_${el.config.name}`) ? parseInt(localStorage.getItem(`dokitPositionLeft_${el.config.name}`)) : defaultX
}
function getDefaultY(el){
let defaultY = el.config.top || Math.round(window.innerHeight/2);
return localStorage.getItem(`dokitPositionTop_${el.config.name}`) ? parseInt(localStorage.getItem(`dokitPositionTop_${el.config.name}`)) : defaultY
}
function standardNumber(number, max){
if(number < 0){
return 0
// function getAvailableLeft(el){
// return standardNumber(el.dokitPositionLeft, window.innerWidth - el.clientWidth)
// }
// function getAvailableTop(el){
// return standardNumber(el.dokitPositionTop, window.innerHeight - el.clientHeight)
// }
// function standardNumber(number, max){
// if(number < 0){
// return 0
// }
// if(number >= max){
// return max
// }
// return number
// }
function adjustPosition(el) {
if (el.dokitPositionLeft < 0) {
el.dokitPositionLeft = 0;
el.style.left = `${el.dokitPositionLeft}px`;
} else if (el.dokitPositionLeft + el.getBoundingClientRect().width > window.innerWidth) {
el.dokitPositionLeft = window.innerWidth - el.getBoundingClientRect().width;
el.style.left = `${el.dokitPositionLeft}px`;
}
if(number >= max){
return max
if (el.dokitPositionTop < 0) {
el.dokitPositionTop = 0;
el.style.top = `${el.dokitPositionTop}px`;
} else if (el.dokitPositionTop + el.getBoundingClientRect().height + el.config.safeBottom > window.innerHeight) {
el.dokitPositionTop = window.innerHeight - el.getBoundingClientRect().height - el.config.safeBottom;
el.style.top = `${el.dokitPositionTop}px`;
}
return number
}
const IconBack = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAzCAMAAADIDVqJAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAXFQTFRFAAAANX7GNHzFM3zFM3zFNn3ENYDHNHzFM3zENIDHNH7INH3ENX3GNn7GM33ENYDFNYDGM4DINH7HM3zENH3HNHzENYDGM37FM33FNH3FNn3FNX7HN4DINHzEM33HNH7FNIDGNn7GM33ENX3FNXzHNoDENH7FNH3EM3zEN33INHzFNH3FM4DHNX3HNH3GNX7ENHzENHzFNYDFNH3FM33ENn3JM33GN4DINX7EM3zEM33GNH7FM33FM33FNIDFNH3GNX3KM37HNHzFN4DINX7FNH3EOHzHNH3GM3zFM4DGM33EM3zENHzENH3EM33FOoTFgID/NHzFOIDHM3zEM3zFNoPJM33FM33ENH3FNHzENYDL////NHzENH3FM4PFM3zFOYDGNH3FM3zFN3zINHzEM33FNoDJM3zFM33FNH3ENHzFM37FNH3ENH3FM33ENH7GNX7FM33ENH3FNH7FM37ENH7FM3zFNH3EM4jMM3zE////TdHL6gAAAHl0Uk5TAEPy+vA9RPb0QEX3P0fzPkg8Sfg7SjpL+fE5TThON082Ue81UjRT++4zVO0yVjFX/OwwWOsvWi5b6i1d/eksXitf6Cph5yli/ihk5ieh3x8CoiCg4CGf4Z3iIgGc4yOaJJnkJZjlJpaVk5KQj42LioiHhYSCgHOyD3AmCqsAAAABYktHRFt0vJU0AAAACXBIWXMAAABIAAAASABGyWs+AAABPUlEQVQ4y43UxVoCUBQE4Ctgd3cXKAYoKqioINiBrdjdXby9C+6c3ZzPWf+rE2MMS4bDmY4rk5qs7FQ6ObnU5OXDFFBTCFNUTE2JmFJqysqtcVRQUymmiprqGmtq66ipF9NATSOMq4maZidMCzWtMG3t1HSI6aSmq9sat4eaHpheLzV9YvqpGRi0xuenZghmOEDNiJhRasZggiFqxiesmQxTMyVmmpoZmEiUmlmYWJyauXmYBWoWYZaWqTEr1qRW1zhaT4jaUNQm1Na2onagdjW1B7V/wFXyEOroWFEnok4VdQZ1fqGoS6ira0XdpP4x+uStKL5EY+6gYpq6h4rEFfUgKqqoRyjlkI15ggqGFfUsKqSoFyjlTY15hfIFFPUmyq+odyilhIz5gHJ7FfUpyqOoLyilYo35/rFJ/Jo/DZ3bT7fEcIgAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDQtMjFUMTc6MzI6MjgrMDg6MDBBnT5hAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIxLTA0LTIxVDE3OjMyOjI4KzA4OjAwMMCG3QAAAABJRU5ErkJggg==';
......@@ -370,7 +425,15 @@ var script$3 = {
dragable,
},
data() {
return {};
return {
btnConfig: {
name: 'dokit_entry',
opacity: 0.5,
left: window.innerWidth - 50,
top: window.innerHeight - 100,
safeBottom: 50
}
};
},
computed: {
state(){
......@@ -410,7 +473,7 @@ const render$3 = /*#__PURE__*/_withId$3((_ctx, _cache, $props, $setup, $data, $o
style: {"z-index":"10000"},
onClick: _cache[1] || (_cache[1] = (...args) => ($options.toggleShowContainer && $options.toggleShowContainer(...args)))
}, null, 512 /* NEED_PATCH */), [
[_directive_dragable]
[_directive_dragable, $data.btnConfig]
]),
withDirectives(createVNode("div", {
class: "mask",
......
Web/packages/core/package.json
浏览文件 @ 7737a802
......@@ -28,6 +28,8 @@
"bugs": {
"url": "https://github.com/didi/DoraemonKit/issues"
},
"dependencies": {},
"dependencies": {
"@dokit/web-utils": "^0.0.1-alpha.0"
},
"gitHead": "886ea7c19806526668e5da0179da335e7df9d012"
}
Web/packages/core/src/common/directives/dragable.js 已删除 100644 → 0
浏览文件 @ 268ee3e0
/**
* 拖拽指令 v-dragable
* 减少外部依赖
*/
const INIT_VALUE = 9999
const DEFAULT_OPACITY = 0.5
const SAFE_BOTTOM = 50 // 底部防误触
// TODO 拖拽事件兼容 Pc处理
// TODO 默认初始位置为右下角
export default {
mounted (el) {
// 初始化变量
el.dokitEntryLastX = INIT_VALUE
el.dokitEntryLastY = INIT_VALUE
// 初始化样式
el.style.position = 'fixed'
el.style.opacity = DEFAULT_OPACITY
el.dokitPositionLeft = getDefaultX(el)
el.dokitPositionTop = getDefaultY(el)
el.style.top = `${el.dokitPositionTop}px`
el.style.left = `${el.dokitPositionLeft}px`
// 触摸事件监听
el.ontouchstart = () => {
el.style.opacity = 1
}
el.ontouchmove = (e) => {
e.preventDefault()
if (el.dokitEntryLastX === INIT_VALUE) {
el.dokitEntryLastX = e.touches[0].clientX
el.dokitEntryLastY = e.touches[0].clientY
return
}
el.dokitPositionTop += (e.touches[0].clientY - el.dokitEntryLastY)
el.dokitPositionLeft += (e.touches[0].clientX - el.dokitEntryLastX)
el.dokitEntryLastX = e.touches[0].clientX
el.dokitEntryLastY = e.touches[0].clientY
el.style.top = `${getAvailableTop(el)}px`
el.style.left = `${getAvailableLeft(el)}px`
}
el.ontouchend = (e) => {
setTimeout(() => {
if (el.dokitPositionLeft < 0) {
el.dokitPositionLeft = 0
el.style.left = `${el.dokitPositionLeft}px`
} else if (el.dokitPositionLeft + e.target.clientWidth > window.screen.availWidth) {
el.dokitPositionLeft = window.screen.availWidth - e.target.clientWidth
el.style.left = `${el.dokitPositionLeft}px`
}
if (el.dokitPositionTop < 0) {
el.dokitPositionTop = 0
el.style.top = `${el.dokitPositionTop}px`
} else if (el.dokitPositionTop + e.target.clientHeight + SAFE_BOTTOM > window.screen.availHeight) {
el.dokitPositionTop = window.screen.availHeight - e.target.clientHeight - SAFE_BOTTOM
el.style.top = `${el.dokitPositionTop}px`
}
localStorage.setItem('dokitPositionTop', el.dokitPositionTop);
localStorage.setItem('dokitPositionLeft', el.dokitPositionLeft);
}, 100)
el.dokitEntryLastX = INIT_VALUE
el.dokitEntryLastY = INIT_VALUE
el.style.opacity = 0.5
}
}
}
function getDefaultX(el){
let defaultX = Math.round(window.outerWidth/2)
return localStorage.getItem('dokitPositionLeft') ? parseInt(localStorage.getItem('dokitPositionLeft')) : defaultX
}
function getDefaultY(el){
let defaultY = Math.round(window.outerHeight/2)
return localStorage.getItem('dokitPositionTop') ? parseInt(localStorage.getItem('dokitPositionTop')) : defaultY
}
function getAvailableLeft(el){
return standardNumber(el.dokitPositionLeft, window.outerWidth - el.clientWidth)
}
function getAvailableTop(el){
return standardNumber(el.dokitPositionTop, window.outerHeight - el.clientHeight)
}
function standardNumber(number, max){
if(number < 0){
return 0
}
if(number >= max){
return max
}
return number
}
\ No newline at end of file
Web/packages/core/src/components/app.vue
浏览文件 @ 7737a802
<template>
<div class="dokit-app">
<div class="dokit-entry-btn" style="z-index: 10000;" v-dragable @click="toggleShowContainer"></div>
<div class="dokit-entry-btn" style="z-index: 10000;" v-dragable="btnConfig" @click="toggleShowContainer"></div>
<div class="mask" v-show="showContainer" @click="toggleContainer"></div>
<router-container v-show="showContainer"></router-container>
<independ-container v-show="independPlugins.length"></independ-container>
......@@ -8,10 +8,10 @@
</template>
<script>
import dragable from "@common/directives/dragable";
import { dragable } from '@dokit/web-utils';
import RouterContainer from './router-container';
import IndependContainer from './independ-container';
import {toggleContainer} from '@store/index';
import { toggleContainer } from '@store/index';
export default {
components: {
......@@ -22,7 +22,15 @@ export default {
dragable,
},
data() {
return {};
return {
btnConfig: {
name: 'dokit_entry',
opacity: 0.5,
left: window.innerWidth - 50,
top: window.innerHeight - 100,
safeBottom: 50
}
};
},
computed: {
state(){
......
Web/packages/utils/dist/index.js
浏览文件 @ 7737a802
const isObject = function(obj){
return Object.prototype.toString.call(obj) === '[object Object]'
const isObject = function (obj) {
return Object.prototype.toString.call(obj) === '[object Object]'
};
const isFunction = function(obj){
return typeof obj === 'function'
const isFunction = function (obj) {
return typeof obj === 'function'
};
const isMobile = function() {
if (window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
return true
}
return false
};
const inBrowser = typeof window !== 'undefined';
export { inBrowser, isFunction, isObject };
/**
* 拖拽指令 v-dragable
* 减少外部依赖
* 默认使用v-dragable
* 也接受传入一个config对象 v-dragable="config"
* config支持 name opacity left top safeBottom 等属性
*/
const INIT_VALUE = 9999;
// const SAFE_BOTTOM = 50 // 底部防误触
let MOUSE_DOWN_FLAG = false;
const DEFAULT_EL_CONF = {
name: '', // 名称 用于存储位置storage的标识，没有则不存储
opacity: 1, // 默认透明度
left: '', // 初始位置, 没有则居中
top: '', // 初始位置, 没有则居中
safeBottom: 0
};
// TODO 拖拽事件兼容 Pc处理
// TODO 默认初始位置为右下角
const dragable = {
mounted (el, binding) {
el.config = {
...DEFAULT_EL_CONF,
...binding.value
};
// 初始化变量
el.dokitEntryLastX = INIT_VALUE;
el.dokitEntryLastY = INIT_VALUE;
// 初始化样式
el.style.position = 'fixed';
el.style.opacity = el.config.opacity;
el.dokitPositionLeft = getDefaultX(el);
el.dokitPositionTop = getDefaultY(el);
el.style.top = `${el.dokitPositionTop}px`;
el.style.left = `${el.dokitPositionLeft}px`;
adjustPosition(el);
// 触摸事件监听
el.ontouchstart = () => {
moveStart(el);
};
el.ontouchmove = (e) => {
e.preventDefault();
moving(el, e);
};
el.ontouchend = (e) => {
moveEnd(el);
};
// PC鼠标事件
el.onmousedown = (e) => {
e.preventDefault();
moveStart(el);
MOUSE_DOWN_FLAG = true;
};
window.addEventListener('mousemove', (e)=> {
if (MOUSE_DOWN_FLAG) moving(el, e);
});
window.addEventListener('mouseup', (e)=> {
if (MOUSE_DOWN_FLAG) {
moveEnd(el);
MOUSE_DOWN_FLAG = false;
}
});
window.addEventListener('resize', ()=> {
adjustPosition(el);
});
}
};
function moveStart(el) {
el.style.opacity = 1;
}
function moving(el, e) {
let target = e.touches ? e.touches[0] : e;
if (el.dokitEntryLastX === INIT_VALUE) {
el.dokitEntryLastX = target.clientX;
el.dokitEntryLastY = target.clientY;
return
}
el.dokitPositionTop += (target.clientY - el.dokitEntryLastY);
el.dokitPositionLeft += (target.clientX - el.dokitEntryLastX);
el.dokitEntryLastX = target.clientX;
el.dokitEntryLastY = target.clientY;
// el.style.top = `${getAvailableTop(el)}px`
// el.style.left = `${getAvailableLeft(el)}px`
el.style.top = `${el.dokitPositionTop}px`;
el.style.left = `${el.dokitPositionLeft}px`;
}
function moveEnd(el, e) {
setTimeout(() => {
adjustPosition(el);
el.config.name && localStorage.setItem(`dokitPositionTop_${el.config.name}`, el.dokitPositionTop);
el.config.name && localStorage.setItem(`dokitPositionLeft_${el.config.name}`, el.dokitPositionLeft);
}, 100);
el.dokitEntryLastX = INIT_VALUE;
el.dokitEntryLastY = INIT_VALUE;
el.style.opacity = el.config.opacity;
}
function getDefaultX(el){
let defaultX = el.config.left || Math.round(window.innerWidth/2);
return localStorage.getItem(`dokitPositionLeft_${el.config.name}`) ? parseInt(localStorage.getItem(`dokitPositionLeft_${el.config.name}`)) : defaultX
}
function getDefaultY(el){
let defaultY = el.config.top || Math.round(window.innerHeight/2);
return localStorage.getItem(`dokitPositionTop_${el.config.name}`) ? parseInt(localStorage.getItem(`dokitPositionTop_${el.config.name}`)) : defaultY
}
// function getAvailableLeft(el){
// return standardNumber(el.dokitPositionLeft, window.innerWidth - el.clientWidth)
// }
// function getAvailableTop(el){
// return standardNumber(el.dokitPositionTop, window.innerHeight - el.clientHeight)
// }
// function standardNumber(number, max){
// if(number < 0){
// return 0
// }
// if(number >= max){
// return max
// }
// return number
// }
function adjustPosition(el) {
if (el.dokitPositionLeft < 0) {
el.dokitPositionLeft = 0;
el.style.left = `${el.dokitPositionLeft}px`;
} else if (el.dokitPositionLeft + el.getBoundingClientRect().width > window.innerWidth) {
el.dokitPositionLeft = window.innerWidth - el.getBoundingClientRect().width;
el.style.left = `${el.dokitPositionLeft}px`;
}
if (el.dokitPositionTop < 0) {
el.dokitPositionTop = 0;
el.style.top = `${el.dokitPositionTop}px`;
} else if (el.dokitPositionTop + el.getBoundingClientRect().height + el.config.safeBottom > window.innerHeight) {
el.dokitPositionTop = window.innerHeight - el.getBoundingClientRect().height - el.config.safeBottom;
el.style.top = `${el.dokitPositionTop}px`;
}
}
export { dragable, inBrowser, isFunction, isMobile, isObject };
Web/packages/utils/package.json
浏览文件 @ 7737a802
......@@ -8,7 +8,7 @@
"author": "duanlikang <duanlikang@didichuxing.com>",
"homepage": "https://github.com/didi/DoraemonKit#readme",
"license": "ISC",
"main": "dist/main.js",
"main": "dist/index.js",
"directories": {
"lib": "lib",
"test": "__tests__"
......
Web/packages/utils/src/dragable.js 0 → 100644
浏览文件 @ 7737a802
/**
* 拖拽指令 v-dragable
* 减少外部依赖
* 默认使用v-dragable
* 也接受传入一个config对象 v-dragable="config"
* config支持 name opacity left top safeBottom 等属性
*/
const INIT_VALUE = 9999
// const SAFE_BOTTOM = 50 // 底部防误触
let MOUSE_DOWN_FLAG = false
const DEFAULT_EL_CONF = {
name: '', // 名称 用于存储位置storage的标识，没有则不存储
opacity: 1, // 默认透明度
left: '', // 初始位置, 没有则居中
top: '', // 初始位置, 没有则居中
safeBottom: 0
}
// TODO 拖拽事件兼容 Pc处理
// TODO 默认初始位置为右下角
export const dragable = {
mounted (el, binding) {
el.config = {
...DEFAULT_EL_CONF,
...binding.value
}
// 初始化变量
el.dokitEntryLastX = INIT_VALUE
el.dokitEntryLastY = INIT_VALUE
// 初始化样式
el.style.position = 'fixed'
el.style.opacity = el.config.opacity
el.dokitPositionLeft = getDefaultX(el)
el.dokitPositionTop = getDefaultY(el)
el.style.top = `${el.dokitPositionTop}px`
el.style.left = `${el.dokitPositionLeft}px`
adjustPosition(el);
// 触摸事件监听
el.ontouchstart = () => {
moveStart(el)
}
el.ontouchmove = (e) => {
e.preventDefault()
moving(el, e)
}
el.ontouchend = (e) => {
moveEnd(el, e)
}
// PC鼠标事件
el.onmousedown = (e) => {
e.preventDefault()
moveStart(el)
MOUSE_DOWN_FLAG = true
}
window.addEventListener('mousemove', (e)=> {
if (MOUSE_DOWN_FLAG) moving(el, e)
})
window.addEventListener('mouseup', (e)=> {
if (MOUSE_DOWN_FLAG) {
moveEnd(el, e)
MOUSE_DOWN_FLAG = false
}
})
window.addEventListener('resize', ()=> {
adjustPosition(el)
})
}
}
function moveStart(el) {
el.style.opacity = 1
}
function moving(el, e) {
let target = e.touches ? e.touches[0] : e
if (el.dokitEntryLastX === INIT_VALUE) {
el.dokitEntryLastX = target.clientX
el.dokitEntryLastY = target.clientY
return
}
el.dokitPositionTop += (target.clientY - el.dokitEntryLastY)
el.dokitPositionLeft += (target.clientX - el.dokitEntryLastX)
el.dokitEntryLastX = target.clientX
el.dokitEntryLastY = target.clientY
// el.style.top = `${getAvailableTop(el)}px`
// el.style.left = `${getAvailableLeft(el)}px`
el.style.top = `${el.dokitPositionTop}px`
el.style.left = `${el.dokitPositionLeft}px`
}
function moveEnd(el, e) {
setTimeout(() => {
adjustPosition(el)
el.config.name && localStorage.setItem(`dokitPositionTop_${el.config.name}`, el.dokitPositionTop);
el.config.name && localStorage.setItem(`dokitPositionLeft_${el.config.name}`, el.dokitPositionLeft);
}, 100)
el.dokitEntryLastX = INIT_VALUE
el.dokitEntryLastY = INIT_VALUE
el.style.opacity = el.config.opacity
}
function getDefaultX(el){
let defaultX = el.config.left || Math.round(window.innerWidth/2)
return localStorage.getItem(`dokitPositionLeft_${el.config.name}`) ? parseInt(localStorage.getItem(`dokitPositionLeft_${el.config.name}`)) : defaultX
}
function getDefaultY(el){
let defaultY = el.config.top || Math.round(window.innerHeight/2)
return localStorage.getItem(`dokitPositionTop_${el.config.name}`) ? parseInt(localStorage.getItem(`dokitPositionTop_${el.config.name}`)) : defaultY
}
// function getAvailableLeft(el){
// return standardNumber(el.dokitPositionLeft, window.innerWidth - el.clientWidth)
// }
// function getAvailableTop(el){
// return standardNumber(el.dokitPositionTop, window.innerHeight - el.clientHeight)
// }
// function standardNumber(number, max){
// if(number < 0){
// return 0
// }
// if(number >= max){
// return max
// }
// return number
// }
function adjustPosition(el) {
if (el.dokitPositionLeft < 0) {
el.dokitPositionLeft = 0
el.style.left = `${el.dokitPositionLeft}px`
} else if (el.dokitPositionLeft + el.getBoundingClientRect().width > window.innerWidth) {
el.dokitPositionLeft = window.innerWidth - el.getBoundingClientRect().width
el.style.left = `${el.dokitPositionLeft}px`
}
if (el.dokitPositionTop < 0) {
el.dokitPositionTop = 0
el.style.top = `${el.dokitPositionTop}px`
} else if (el.dokitPositionTop + el.getBoundingClientRect().height + el.config.safeBottom > window.innerHeight) {
el.dokitPositionTop = window.innerHeight - el.getBoundingClientRect().height - el.config.safeBottom
el.style.top = `${el.dokitPositionTop}px`
}
}
\ No newline at end of file
Web/packages/utils/src/index.js
浏览文件 @ 7737a802
export * from './utils'
export * from './dom'
\ No newline at end of file
export * from './dom'
export * from './dragable'
\ No newline at end of file
Web/packages/utils/src/utils.js
浏览文件 @ 7737a802
export const isObject = function(obj){
return Object.prototype.toString.call(obj) === '[object Object]'
export const isObject = function (obj) {
return Object.prototype.toString.call(obj) === '[object Object]'
}
export const isFunction = function(obj){
return typeof obj === 'function'
export const isFunction = function (obj) {
return typeof obj === 'function'
}
export const isMobile = function() {
if (window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
return true
}
return false
}
\ No newline at end of file
Web/packages/web/dist/dokit.js
浏览文件 @ 7737a802
此差异已折叠。
Web/packages/web/package.json
浏览文件 @ 7737a802
......@@ -30,7 +30,8 @@
"dev": "npx rollup -wc"
},
"dependencies": {
"@dokit/web-core": "^0.0.1-alpha.0"
"@dokit/web-core": "^0.0.1-alpha.0",
"@dokit/web-utils": "^0.0.1-alpha.0"
},
"gitHead": "886ea7c19806526668e5da0179da335e7df9d012"
}
Web/packages/web/src/common/Card.vue
浏览文件 @ 7737a802
......@@ -15,16 +15,19 @@ export default {
</script>
<style lang="less">
.dokit-card {
border-radius: 10px;
background-color: #d9e1e8;
border-radius: 5px;
box-shadow: 0 8px 12px #ebedf0;
overflow: hidden;
.dokit-card__header{
background-color: #337cc4;
padding: 10px;
background-color: #2b90d9;
padding: 5px;
color: #fff;
font-weight: bold;
font-style: italic;
}
.dokit-card__body{
padding: 10px;
padding: 5px;
}
}
</style>
\ No newline at end of file
Web/packages/web/src/common/directives/dragable.js 已删除 100644 → 0
浏览文件 @ 268ee3e0
/**
* 拖拽指令 v-dragable
* 减少外部依赖
*/
const INIT_VALUE = 9999
const DEFAULT_OPACITY = 0.5
const SAFE_BOTTOM = 50 // 底部防误触
// TODO 拖拽事件兼容 Pc处理
// TODO 默认初始位置为右下角
export default {
mounted (el) {
// 初始化变量
el.dokitEntryLastX = INIT_VALUE
el.dokitEntryLastY = INIT_VALUE
// 初始化样式
el.style.position = 'fixed'
el.style.opacity = DEFAULT_OPACITY
el.dokitPositionLeft = getDefaultX(el)
el.dokitPositionTop = getDefaultY(el)
el.style.top = `${el.dokitPositionTop}px`
el.style.left = `${el.dokitPositionLeft}px`
// 触摸事件监听
el.ontouchstart = () => {
el.style.opacity = 1
}
el.ontouchmove = (e) => {
e.preventDefault()
if (el.dokitEntryLastX === INIT_VALUE) {
el.dokitEntryLastX = e.touches[0].clientX
el.dokitEntryLastY = e.touches[0].clientY
return
}
el.dokitPositionTop += (e.touches[0].clientY - el.dokitEntryLastY)
el.dokitPositionLeft += (e.touches[0].clientX - el.dokitEntryLastX)
el.dokitEntryLastX = e.touches[0].clientX
el.dokitEntryLastY = e.touches[0].clientY
el.style.top = `${getAvailableTop(el)}px`
el.style.left = `${getAvailableLeft(el)}px`
}
el.ontouchend = (e) => {
setTimeout(() => {
if (el.dokitPositionLeft < 0) {
el.dokitPositionLeft = 0
el.style.left = `${el.dokitPositionLeft}px`
} else if (el.dokitPositionLeft + e.target.clientWidth > window.screen.availWidth) {
el.dokitPositionLeft = window.screen.availWidth - e.target.clientWidth
el.style.left = `${el.dokitPositionLeft}px`
}
if (el.dokitPositionTop < 0) {
el.dokitPositionTop = 0
el.style.top = `${el.dokitPositionTop}px`
} else if (el.dokitPositionTop + e.target.clientHeight + SAFE_BOTTOM > window.screen.availHeight) {
el.dokitPositionTop = window.screen.availHeight - e.target.clientHeight - SAFE_BOTTOM
el.style.top = `${el.dokitPositionTop}px`
}
localStorage.setItem('dokitPositionTop', el.dokitPositionTop);
localStorage.setItem('dokitPositionLeft', el.dokitPositionLeft);
}, 100)
el.dokitEntryLastX = INIT_VALUE
el.dokitEntryLastY = INIT_VALUE
el.style.opacity = 0.5
}
}
}
function getDefaultX(el){
let defaultX = Math.round(window.outerWidth/2)
return localStorage.getItem('dokitPositionLeft') ? parseInt(localStorage.getItem('dokitPositionLeft')) : defaultX
}
function getDefaultY(el){
let defaultY = Math.round(window.outerHeight/2)
return localStorage.getItem('dokitPositionTop') ? parseInt(localStorage.getItem('dokitPositionTop')) : defaultY
}
function getAvailableLeft(el){
return standardNumber(el.dokitPositionLeft, window.outerWidth - el.clientWidth)
}
function getAvailableTop(el){
return standardNumber(el.dokitPositionTop, window.outerHeight - el.clientHeight)
}
function standardNumber(number, max){
if(number < 0){
return 0
}
if(number >= max){
return max
}
return number
}
\ No newline at end of file
Web/packages/web/src/common/info-card.vue 0 → 100644
浏览文件 @ 7737a802
此差异已折叠。
Web/packages/web/src/feature.js
浏览文件 @ 7737a802
import Console from './plugins/console/index'
import AppInfo from './plugins/app-info/index'
import Storage from './plugins/storage/index'
import DemoPlugin from './plugins/demo-plugin/index'
import DemoIndependPlugin from './plugins/demo-single-plugin/index'
import H5DoorPlugin from './plugins/h5-door/index'
import HelloWorld from './components/ToolHelloWorld'
import {IndependPlugin, RouterPlugin} from '@dokit/web-core'
export const BasicFeatures = {
title: '常用工具',
list: [Console, AppInfo, DemoPlugin, DemoIndependPlugin, H5DoorPlugin]
list: [Console, AppInfo, Storage, DemoPlugin, DemoIndependPlugin, H5DoorPlugin]
}
export const DokitFeatures = {
title: '平台功能',
list: [{
list: [new RouterPlugin({
nameZh: 'Mock数据',
name: 'mock',
icon: 'https://pt-starimg.didistatic.com/static/starimg/img/aDn77poRDB1618997545078.png',
component: HelloWorld
}]
})]
}
export const UIFeatures = {
title: '视觉功能',
list: [{
nameZh: '取色器',
name: 'color-selector',
icon: 'https://pt-starimg.didistatic.com/static/starimg/img/QYUvEE8FnN1618997536890.png',
component: HelloWorld
}, {
list: [new RouterPlugin({
nameZh: '对齐标尺',
name: 'align-ruler',
icon: 'https://pt-starimg.didistatic.com/static/starimg/img/a5UTjMn6lO1618997535798.png',
component: HelloWorld
}, {
}), new RouterPlugin({
nameZh: 'UI结构',
name: 'view-selector',
icon: 'https://pt-starimg.didistatic.com/static/starimg/img/XNViIWzG7N1618997548483.png',
component: HelloWorld
}]
})]
}
export const Features = [BasicFeatures, DokitFeatures, UIFeatures]
\ No newline at end of file
Web/packages/web/src/plugins/app-info/ToolAppInfo.vue
浏览文件 @ 7737a802
......@@ -2,32 +2,32 @@
<div class="app-info-container">
<div class="info-wrapper">
<Card title="Page Info">
<table border="1">
<table>
<tr>
<td>UA</td>
<td>{{ua}}</td>
<td class="key">UA</td>
<td class="value">{{ua}}</td>
</tr>
<tr>
<td>URL</td>
<td>{{url}}</td>
<td class="key">URL</td>
<td class="value">{{url}}</td>
</tr>
</table>
</Card>
</div>
<div class="info-wrapper">
<div class="info-wrapper" style="margin-top:20px">
<Card title="Device Info">
<table border="1">
<table>
<tr>
<td>设备缩放比</td>
<td>{{ratio}}</td>
<td class="key">设备缩放比</td>
<td class="value">{{ratio}}</td>
</tr>
<tr>
<td>screen</td>
<td>{{screen.width}}X{{screen.height}}</td>
<td class="key">screen</td>
<td>{{screen.width}} X {{screen.height}}</td>
</tr>
<tr>
<td>viewport</td>
<td>{{viewport.width}}X{{viewport.height}}</td>
<td class="key">viewport</td>
<td>{{viewport.width}} X {{viewport.height}}</td>
</tr>
</table>
</Card>
......@@ -62,7 +62,10 @@ export default {
overflow: hidden;
}
.info-wrapper{
margin: 20px 20px 0 20px;
margin: 5px 5px 0 5px;
.key{
font-weight: bold;
}
}
table{
border-color: #eee;
......
Web/packages/web/src/plugins/demo-plugin/index.js
浏览文件 @ 7737a802
......@@ -4,7 +4,7 @@ import {RouterPlugin} from '@dokit/web-core'
export default new RouterPlugin({
nameZh: '测试',
name: 'test',
icon: 'https://pt-starimg.didistatic.com/static/starimg/img/z1346TQD531618997547642.png',
icon: 'https://pt-starimg.didistatic.com/static/starimg/img/6WONqJCVks1621926657356.png',
component: HelloWorld
})
Web/packages/web/src/plugins/demo-single-plugin/IndependPluginDemo.vue
浏览文件 @ 7737a802
<template>
<div class="hello-world" v-dragable>
<div style="font-weight:bold;font-size:30px;font-style:italic;">Hello Dokit</div>
<div class="hello-independ" v-dragable>
<div style="font-weight: bold; font-size: 30px; font-style: italic">
Hello Dokit
</div>
<div>Demo Independ Plugin</div>
<div @click="remove" style="background-color: red;">点击移除当前独立插件</div>
<div @click="remove" style="background-color: red; color:white;margin-top:10px">
点击移除当前独立插件
</div>
</div>
</template>
<script>
import dragable from "@common/directives/dragable";
import {removeIndependPlugin} from '@dokit/web-core';
import { dragable } from "@dokit/web-utils";
import { removeIndependPlugin } from "@dokit/web-core";
export default {
directives: {
......@@ -16,18 +19,21 @@ export default {
},
methods: {
remove() {
removeIndependPlugin('test')
}
}
}
removeIndependPlugin("test");
},
},
};
</script>
<style>
.hello-world{
<style scoped>
.hello-independ {
display: inline-block;
padding:10px;
width: 200px;
/* padding: 10px; */
text-align: center;
background-color: white;
border-radius: 20px;
box-shadow: 0 8px 12px #ebedf0;
overflow: hidden;
border: 1px solid red;
}
</style>
\ No newline at end of file
Web/packages/web/src/plugins/storage/cookie.vue 0 → 100644
浏览文件 @ 7737a802
<template>
<div style="margin-top:20px;">
<InfoCard :infoMap="storageMap" title="Cookie" @refresh="updateList" @clear="clear" @removeItem="removeItem"></InfoCard>
</div>
</template>
<script>
import InfoCard from '@common/info-card'
import { clearCookie, removeCookieItem, getCookieMap } from './js/storage'
export default {
components: {
InfoCard
},
data () {
return {
storageMap: {}
}
},
created() {
this.updateList()
},
methods: {
updateList() {
this.storageMap = getCookieMap()
},
removeItem(key) {
removeCookieItem(key)
this.updateList()
},
clear() {
clearCookie()
this.updateList()
}
},
}
</script>
<style lang="">
</style>
\ No newline at end of file
Web/packages/web/src/plugins/storage/index.js 0 → 100644
浏览文件 @ 7737a802
import Storage from './main.vue'
// import {overrideConsole,restoreConsole} from './js/console'
import {getGlobalData, RouterPlugin} from '@dokit/web-core'
export default new RouterPlugin({
name: 'Storage',
nameZh: '存储',
component: Storage,
icon: 'https://pt-starimg.didistatic.com/static/starimg/img/LM74BpA9bS1621926286444.png',
onLoad(){},
onUnload(){}
})
\ No newline at end of file
Web/packages/web/src/plugins/storage/js/storage.js 0 → 100644
浏览文件 @ 7737a802
export const overrideLocalStorage = function(callback) {
const originSetItem = localStorage.setItem.bind(localStorage);
localStorage.setItem = function (key, value) {
// if (!isStr(key) || !isStr(value)) return;
originSetItem(key, value);
callback({type: 'setItem'})
};
const originRemoveItem = localStorage.removeItem.bind(localStorage);
localStorage.removeItem = function (key) {
originRemoveItem(key);
callback({type: 'removeItem'})
};
const originClear = localStorage.clear.bind(localStorage);
localStorage.clear = function (key) {
originClear();
callback({type: 'clear'})
};
}
export const overrideSessionStorage = function(callback) {
const originSetItem = sessionStorage.setItem.bind(sessionStorage);
sessionStorage.setItem = function (key, value) {
// if (!isStr(key) || !isStr(value)) return;
originSetItem(key, value);
callback({type: 'setItem'})
};
const originRemoveItem = sessionStorage.removeItem.bind(sessionStorage);
sessionStorage.removeItem = function (key) {
originRemoveItem(key);
callback({type: 'removeItem'})
};
const originClear = sessionStorage.clear.bind(sessionStorage);
sessionStorage.clear = function (key) {
originClear();
callback({type: 'clear'})
};
}
export const clearCookie = function () {
let cookieMap = getCookieMap()
for (const key in cookieMap) {
if (cookieMap.hasOwnProperty.call(cookieMap, key)) {
removeCookieItem(key)
}
}
}
export const removeCookieItem = function (key) {
document.cookie = encodeURIComponent(key) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
}
export const getCookieMap = function (params) {
const cookieMap = Object.create({})
const cookie = document.cookie;
if (cookie.trim() !== '') {
cookie.split(';').forEach(ele => {
ele = ele.split('=');
const key = ele.shift().trim();
ele = decodeURIComponent(ele.join('='));
cookieMap[key] = ele
})
}
return cookieMap;
}
Web/packages/web/src/plugins/storage/local-storage.vue 0 → 100644
浏览文件 @ 7737a802
<template>
<div>
<InfoCard :infoMap="storageMap" title="localStorage" @refresh="updateList" @clear="clear" @removeItem="removeItem"></InfoCard>
</div>
</template>
<script>
import InfoCard from '@common/info-card'
import {overrideLocalStorage} from './js/storage'
export default {
components: {
InfoCard
},
data () {
return {
storageMap: {}
}
},
created() {
overrideLocalStorage(() => {
this.updateList()
});
this.updateList()
},
methods: {
updateList() {
let storageMap = {...window.localStorage}
// 有一些属性不需要展示
for (const key in storageMap) {
if (Object.hasOwnProperty.call(storageMap, key)) {
if (~key.indexOf('dokit') || typeof storageMap[key] !== 'string') delete storageMap[key]
}
}
this.storageMap = storageMap
},
removeItem(key) {
window.localStorage.removeItem(key)
},
clear() {
window.localStorage.clear()
}
},
}
</script>
<style lang="">
</style>
\ No newline at end of file
Web/packages/web/src/plugins/storage/main.vue 0 → 100644
浏览文件 @ 7737a802
<template>
<div class="storage-plugin">
<localStorage></localStorage>
<sessionStorage></sessionStorage>
<cookie></cookie>
</div>
</template>
<script>
import localStorage from './local-storage';
import sessionStorage from './session-storage';
import cookie from './cookie';
export default {
components: {
localStorage,
sessionStorage,
cookie
}
}
</script>
<style>
.storage-plugin{
padding: 5px;
}
</style>
\ No newline at end of file
Web/packages/web/src/plugins/storage/session-storage.vue 0 → 100644
浏览文件 @ 7737a802
<template>
<div style="margin-top:20px;">
<InfoCard :infoMap="storageMap" title="sessionStorage" @refresh="updateList" @clear="clear" @removeItem="removeItem"></InfoCard>
</div>
</template>
<script>
import InfoCard from '@common/info-card'
import {overrideSessionStorage} from './js/storage'
export default {
components: {
InfoCard
},
data () {
return {
storageMap: {}
}
},
created() {
overrideSessionStorage(() => {
this.updateList()
});
this.updateList()
},
methods: {
updateList() {
let storageMap = {...window.sessionStorage}
// 有一些属性不需要展示
for (const key in storageMap) {
if (Object.hasOwnProperty.call(storageMap, key)) {
if (~key.indexOf('dokit') || typeof storageMap[key] !== 'string') delete storageMap[key]
}
}
this.storageMap = storageMap
},
removeItem(key) {
window.sessionStorage.removeItem(key)
},
clear() {
window.sessionStorage.clear()
}
},
}
</script>
<style lang="">
</style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或