398 lines
13 KiB
JavaScript
398 lines
13 KiB
JavaScript
|
"use strict";
|
|||
|
|
|
|||
|
|
import {MyDocItem} from "../model/MyDocItem.js";
|
|||
|
|
import {MyMapItem} from "../model/MyMapItem.js";
|
|||
|
|
|
|||
|
|
export class MyUtils {
|
|||
|
|
//todo 判断是哪一种浏览器类型。以及是否是手机
|
|||
|
|
//todo 初始化屏幕宽高比
|
|||
|
|
|
|||
|
|
|
|||
|
|
MyBrowser = null
|
|||
|
|
|
|||
|
|
constructor() {
|
|||
|
|
/**
|
|||
|
|
* 提供浏览器检测的模块
|
|||
|
|
* @unfile
|
|||
|
|
* @module UE.browser
|
|||
|
|
*/
|
|||
|
|
window.browser = ((function () {
|
|||
|
|
var agent = navigator.userAgent.toLowerCase(),
|
|||
|
|
opera = window.opera,
|
|||
|
|
browser = {
|
|||
|
|
/**
|
|||
|
|
* @property {boolean} ie 检测当前浏览器是否为IE
|
|||
|
|
* @example
|
|||
|
|
* ```javascript
|
|||
|
|
* if ( UE.browser.ie ) {
|
|||
|
|
* console.log( '当前浏览器是IE' );
|
|||
|
|
* }
|
|||
|
|
* ```
|
|||
|
|
*/
|
|||
|
|
ie: /(msie\s|trident.*rv:)([\w.]+)/i.test(agent),
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @property {boolean} opera 检测当前浏览器是否为Opera
|
|||
|
|
* @example
|
|||
|
|
* ```javascript
|
|||
|
|
* if ( UE.browser.opera ) {
|
|||
|
|
* console.log( '当前浏览器是Opera' );
|
|||
|
|
* }
|
|||
|
|
* ```
|
|||
|
|
*/
|
|||
|
|
opera: !!opera && opera.version,
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @property {boolean} webkit 检测当前浏览器是否是webkit内核的浏览器
|
|||
|
|
* @example
|
|||
|
|
* ```javascript
|
|||
|
|
* if ( UE.browser.webkit ) {
|
|||
|
|
* console.log( '当前浏览器是webkit内核浏览器' );
|
|||
|
|
* }
|
|||
|
|
* ```
|
|||
|
|
*/
|
|||
|
|
webkit: agent.indexOf(" applewebkit/") > -1,
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @property {boolean} mac 检测当前浏览器是否是运行在mac平台下
|
|||
|
|
* @example
|
|||
|
|
* ```javascript
|
|||
|
|
* if ( UE.browser.mac ) {
|
|||
|
|
* console.log( '当前浏览器运行在mac平台下' );
|
|||
|
|
* }
|
|||
|
|
* ```
|
|||
|
|
*/
|
|||
|
|
mac: agent.indexOf("macintosh") > -1,
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @property {boolean} quirks 检测当前浏览器是否处于“怪异模式”下
|
|||
|
|
* @example
|
|||
|
|
* ```javascript
|
|||
|
|
* if ( UE.browser.quirks ) {
|
|||
|
|
* console.log( '当前浏览器运行处于“怪异模式”' );
|
|||
|
|
* }
|
|||
|
|
* ```
|
|||
|
|
*/
|
|||
|
|
quirks: document.compatMode == "BackCompat"
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @property {boolean} gecko 检测当前浏览器内核是否是gecko内核
|
|||
|
|
* @example
|
|||
|
|
* ```javascript
|
|||
|
|
* if ( UE.browser.gecko ) {
|
|||
|
|
* console.log( '当前浏览器内核是gecko内核' );
|
|||
|
|
* }
|
|||
|
|
* ```
|
|||
|
|
*/
|
|||
|
|
browser.gecko =
|
|||
|
|
navigator.product == "Gecko" &&
|
|||
|
|
!browser.webkit &&
|
|||
|
|
!browser.opera &&
|
|||
|
|
!browser.ie
|
|||
|
|
|
|||
|
|
var version = 0
|
|||
|
|
|
|||
|
|
// Internet Explorer 6.0+
|
|||
|
|
if (browser.ie) {
|
|||
|
|
var v1 = agent.match(/(?:msie\s([\w.]+))/)
|
|||
|
|
var v2 = agent.match(/(?:trident.*rv:([\w.]+))/)
|
|||
|
|
if (v1 && v2 && v1[1] && v2[1]) {
|
|||
|
|
version = Math.max(v1[1] * 1, v2[1] * 1)
|
|||
|
|
} else if (v1 && v1[1]) {
|
|||
|
|
version = v1[1] * 1
|
|||
|
|
} else if (v2 && v2[1]) {
|
|||
|
|
version = v2[1] * 1
|
|||
|
|
} else {
|
|||
|
|
version = 0
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
browser.ie11Compat = document.documentMode == 11
|
|||
|
|
/**
|
|||
|
|
* @property { boolean } ie9Compat 检测浏览器模式是否为 IE9 兼容模式
|
|||
|
|
* @warning 如果浏览器不是IE， 则该值为undefined
|
|||
|
|
* @example
|
|||
|
|
* ```javascript
|
|||
|
|
* if ( UE.browser.ie9Compat ) {
|
|||
|
|
* console.log( '当前浏览器运行在IE9兼容模式下' );
|
|||
|
|
* }
|
|||
|
|
* ```
|
|||
|
|
*/
|
|||
|
|
browser.ie9Compat = document.documentMode == 9
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @property { boolean } ie8 检测浏览器是否是IE8浏览器
|
|||
|
|
* @warning 如果浏览器不是IE， 则该值为undefined
|
|||
|
|
* @example
|
|||
|
|
* ```javascript
|
|||
|
|
* if ( UE.browser.ie8 ) {
|
|||
|
|
* console.log( '当前浏览器是IE8浏览器' );
|
|||
|
|
* }
|
|||
|
|
* ```
|
|||
|
|
*/
|
|||
|
|
browser.ie8 = !!document.documentMode
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @property { boolean } ie8Compat 检测浏览器模式是否为 IE8 兼容模式
|
|||
|
|
* @warning 如果浏览器不是IE， 则该值为undefined
|
|||
|
|
* @example
|
|||
|
|
* ```javascript
|
|||
|
|
* if ( UE.browser.ie8Compat ) {
|
|||
|
|
* console.log( '当前浏览器运行在IE8兼容模式下' );
|
|||
|
|
* }
|
|||
|
|
* ```
|
|||
|
|
*/
|
|||
|
|
browser.ie8Compat = document.documentMode == 8
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @property { boolean } ie7Compat 检测浏览器模式是否为 IE7 兼容模式
|
|||
|
|
* @warning 如果浏览器不是IE， 则该值为undefined
|
|||
|
|
* @example
|
|||
|
|
* ```javascript
|
|||
|
|
* if ( UE.browser.ie7Compat ) {
|
|||
|
|
* console.log( '当前浏览器运行在IE7兼容模式下' );
|
|||
|
|
* }
|
|||
|
|
* ```
|
|||
|
|
*/
|
|||
|
|
browser.ie7Compat =
|
|||
|
|
(version == 7 && !document.documentMode) || document.documentMode == 7
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @property { boolean } ie6Compat 检测浏览器模式是否为 IE6 模式 或者怪异模式
|
|||
|
|
* @warning 如果浏览器不是IE， 则该值为undefined
|
|||
|
|
* @example
|
|||
|
|
* ```javascript
|
|||
|
|
* if ( UE.browser.ie6Compat ) {
|
|||
|
|
* console.log( '当前浏览器运行在IE6模式或者怪异模式下' );
|
|||
|
|
* }
|
|||
|
|
* ```
|
|||
|
|
*/
|
|||
|
|
browser.ie6Compat = version < 7 || browser.quirks
|
|||
|
|
|
|||
|
|
browser.ie9above = version > 8
|
|||
|
|
|
|||
|
|
browser.ie9below = version < 9
|
|||
|
|
|
|||
|
|
browser.ie11above = version > 10
|
|||
|
|
|
|||
|
|
browser.ie11below = version < 11
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Gecko.
|
|||
|
|
if (browser.gecko) {
|
|||
|
|
var geckoRelease = agent.match(/rv:([\d\.]+)/)
|
|||
|
|
if (geckoRelease) {
|
|||
|
|
geckoRelease = geckoRelease[1].split(".")
|
|||
|
|
version =
|
|||
|
|
geckoRelease[0] * 10000 +
|
|||
|
|
(geckoRelease[1] || 0) * 100 +
|
|||
|
|
(geckoRelease[2] || 0) * 1
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @property { Number } chrome 检测当前浏览器是否为Chrome, 如果是，则返回Chrome的大版本号
|
|||
|
|
* @warning 如果浏览器不是chrome， 则该值为undefined
|
|||
|
|
* @example
|
|||
|
|
* ```javascript
|
|||
|
|
* if ( UE.browser.chrome ) {
|
|||
|
|
* console.log( '当前浏览器是Chrome' );
|
|||
|
|
* }
|
|||
|
|
* ```
|
|||
|
|
*/
|
|||
|
|
if (/chrome\/(\d+\.\d)/i.test(agent)) {
|
|||
|
|
browser.chrome = +RegExp["\x241"]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @property { Number } safari 检测当前浏览器是否为Safari, 如果是，则返回Safari的大版本号
|
|||
|
|
* @warning 如果浏览器不是safari， 则该值为undefined
|
|||
|
|
* @example
|
|||
|
|
* ```javascript
|
|||
|
|
* if ( UE.browser.safari ) {
|
|||
|
|
* console.log( '当前浏览器是Safari' );
|
|||
|
|
* }
|
|||
|
|
* ```
|
|||
|
|
*/
|
|||
|
|
if (
|
|||
|
|
/(\d+\.\d)?(?:\.\d)?\s+safari\/?(\d+\.\d+)?/i.test(agent) &&
|
|||
|
|
!/chrome/i.test(agent)
|
|||
|
|
) {
|
|||
|
|
browser.safari = +(RegExp["\x241"] || RegExp["\x242"])
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Opera 9.50+
|
|||
|
|
if (browser.opera) version = parseFloat(opera.version())
|
|||
|
|
|
|||
|
|
// WebKit 522+ (Safari 3+)
|
|||
|
|
if (browser.webkit)
|
|||
|
|
version = parseFloat(agent.match(/ applewebkit\/(\d+)/)[1])
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @property { Number } version 检测当前浏览器版本号
|
|||
|
|
* @remind
|
|||
|
|
* <ul>
|
|||
|
|
* <li>IE系列返回值为5,6,7,8,9,10等</li>
|
|||
|
|
* <li>gecko系列会返回10900，158900等</li>
|
|||
|
|
* <li>webkit系列会返回其build号 (如 522等)</li>
|
|||
|
|
* </ul>
|
|||
|
|
* @example
|
|||
|
|
* ```javascript
|
|||
|
|
* console.log( '当前浏览器版本号是： ' + UE.browser.version );
|
|||
|
|
* ```
|
|||
|
|
*/
|
|||
|
|
browser.version = version
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @property { boolean } isCompatible 检测当前浏览器是否能够与UEditor良好兼容
|
|||
|
|
* @example
|
|||
|
|
* ```javascript
|
|||
|
|
* if ( UE.browser.isCompatible ) {
|
|||
|
|
* console.log( '浏览器与UEditor能够良好兼容' );
|
|||
|
|
* }
|
|||
|
|
* ```
|
|||
|
|
*/
|
|||
|
|
browser.isCompatible =
|
|||
|
|
!browser.mobile &&
|
|||
|
|
((browser.ie && version >= 6) ||
|
|||
|
|
(browser.gecko && version >= 10801) ||
|
|||
|
|
(browser.opera && version >= 9.5) ||
|
|||
|
|
(browser.air && version >= 1) ||
|
|||
|
|
(browser.webkit && version >= 522) ||
|
|||
|
|
false)
|
|||
|
|
return browser
|
|||
|
|
})())
|
|||
|
|
//快捷方式
|
|||
|
|
window.ie = window.browser.ie;
|
|||
|
|
window.webkit = window.browser.webkit;
|
|||
|
|
window.gecko = window.browser.gecko;
|
|||
|
|
window.opera = window.browser.opera;
|
|||
|
|
//log
|
|||
|
|
console.log("browser : ", window.browser,
|
|||
|
|
"\nie: ", window.ie,
|
|||
|
|
"\nwindow.webkit: ", window.webkit,
|
|||
|
|
"\nwindow.gecko: ", window.gecko,
|
|||
|
|
"\nwindow.opera: ", window.opera)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
*
|
|||
|
|
* @returns 生产uuid
|
|||
|
|
*/
|
|||
|
|
Uuid() {
|
|||
|
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
|
|||
|
|
.replace(/[xy]/g, function (c) {
|
|||
|
|
const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8)
|
|||
|
|
return v.toString(16)
|
|||
|
|
}).split("-")[0]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 阻止默认事件
|
|||
|
|
* @constructor
|
|||
|
|
*/
|
|||
|
|
ProhibitDefaultEvent(event) {
|
|||
|
|
event.preventDefault()
|
|||
|
|
event.returnValue = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取 触发事件的元素
|
|||
|
|
* @param event
|
|||
|
|
* @constructor
|
|||
|
|
*/
|
|||
|
|
GetEventTarget(event) {
|
|||
|
|
return event.target
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
ParseEvent(e) {
|
|||
|
|
return e || window.event //标准化事件处理
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
GetKeyCode(event) {
|
|||
|
|
return event.keyCode || event.which || event.charCode
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 当前选区。 兼容不同浏览器
|
|||
|
|
* @returns {Selection|*}
|
|||
|
|
*/
|
|||
|
|
GetSelection() {
|
|||
|
|
return window.getSelection() || document.selection
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 是否是数字
|
|||
|
|
* @param value
|
|||
|
|
* @returns {boolean}
|
|||
|
|
*/
|
|||
|
|
IsNum(value) {
|
|||
|
|
return !isNaN(parseFloat(value)) && isFinite(value)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 在节点node后面插入新节点newNode
|
|||
|
|
* @method InsertAfter
|
|||
|
|
* @param { Node } node 目标节点
|
|||
|
|
* @param { Node } newNode 新插入的节点， 该节点将置于目标节点之后
|
|||
|
|
* @return { Node } 新插入的节点
|
|||
|
|
*/
|
|||
|
|
InsertAfter(node, newNode) {
|
|||
|
|
return node.nextSibling
|
|||
|
|
? node.parentNode.insertBefore(newNode, node.nextSibling)
|
|||
|
|
: node.parentNode.appendChild(newNode)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 新增一个元素
|
|||
|
|
* @param newParagraph
|
|||
|
|
*/
|
|||
|
|
AddNewParagraph(newParagraph) {
|
|||
|
|
//docRoot
|
|||
|
|
window.myEdit.ctx.MyRoot.appendChild(newParagraph);
|
|||
|
|
|
|||
|
|
//mapRoot
|
|||
|
|
let myP = new MyDocItem(newParagraph);
|
|||
|
|
let curOrder = myP.parseOrder();
|
|||
|
|
let uuid = myP.parseUuid();
|
|||
|
|
window.myEdit.ctx.MyDocMap.set(curOrder, new MyMapItem(uuid))
|
|||
|
|
|
|||
|
|
//收起选区到一个点，光标落在一个可编辑元素上
|
|||
|
|
window.myEdit.utils.GetSelection().setPosition(newParagraph, 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 同步某一行数据到对应的 map节点
|
|||
|
|
* @param docP
|
|||
|
|
* @constructor
|
|||
|
|
*/
|
|||
|
|
SyncMapItemChildrenStyle(docP) {
|
|||
|
|
//子元素为空不处理
|
|||
|
|
let items = docP.childNodes;
|
|||
|
|
if (items.length <= 0) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//构造参数
|
|||
|
|
let curMyP = new MyDocItem(docP);
|
|||
|
|
let mapItem = window.myEdit.ctx.getMapItem(curMyP.parseOrder());
|
|||
|
|
|
|||
|
|
//清空重置
|
|||
|
|
// console.log(mapItem);
|
|||
|
|
mapItem.getStyle().setChildrenStyleMapNull();
|
|||
|
|
//遍历
|
|||
|
|
for (let i = 0; i < items.length; i++) {
|
|||
|
|
let curItem = items[i];
|
|||
|
|
let tmpClassList = curItem.classList;
|
|||
|
|
if (tmpClassList != null && tmpClassList.length > 0) {
|
|||
|
|
mapItem.getStyle().setChildrenStyle(i, tmpClassList);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// console.log("sync docP : ", docP, " children: ", docP.children, " childrenMap: ", mapItem.getStyle().getChildrenStyleMap())
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|