zh/sdk4.0_new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
zh
2025-09-01 16:17:11 +08:00
parent d802602200
commit 6fa99df21c
1035 changed files with 377083 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/Obj/Element/Dialog/eventBinding.js Normal file
View File

@ -0,0 +1,130 @@
class EventBinding {
constructor() {
this.element = {}
}
static event = {}
getEvent(name) {
return EventBinding.event[name]
}
getEventAll() {
return EventBinding.event
}
setEvent(name, event) {
EventBinding.event[name] = event
}
on(that, elements) {
this.element = {}
for (let i = 0; i < elements.length; i++) {
if (!elements[i] || !elements[i].attributes) {
continue;
}
let Event = {
'input': [],
'change': [],
'blur': [],
'click': []
}
let isEvent = false
let removeName = []
for (let m of elements[i].attributes) {
switch (m.name) {
case '@model': {
isEvent = true
if (elements[i].type == 'checkbox') {
Event.change.push((e) => { that[m.value] = e.target.checked })
elements[i].checked = that[m.value]
}
else {
if (elements[i].type == 'number') {
Event.input.push((e) => {
if (e.target.value || e.target.value === 0) {
let value = e.target.value
value = Number(value)
if (e.data != '.' && (e.data != '-' || e.target.value)) {
if ((e.target.max) && value > Number(e.target.max)) {
value = Number(e.target.max)
}
if ((e.target.min) && value < Number(e.target.min)) {
value = Number(e.target.min)
}
if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
value = Number(e.target.dataset.min)
}
}
}
})
Event.blur.push((e) => {
let value = e.target.value
if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) {
value = Number(value)
if ((e.target.max) && value > Number(e.target.max)) {
value = Number(e.target.max)
}
if ((e.target.min) && value < Number(e.target.min)) {
value = Number(e.target.min)
}
if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
value = Number(e.target.dataset.min)
}
}
that[m.value] = value
})
}
else {
Event.input.push((e) => {
that[m.value] = e.target.value
})
}
if (elements[i].nodeName == 'IMG') {
elements[i].src = that[m.value]
}
else {
elements[i].value = that[m.value]
}
}
if (this.element[m.value]) {
this.element[m.value].push(elements[i])
}
else {
this.element[m.value] = [elements[i]]
}
removeName.push(m.name)
break;
}
case '@click': {
isEvent = true
Event.click.push((e) => {
if (typeof (that[m.value]) === 'function') {
that[m.value](e)
}
})
removeName.push(m.name)
break;
}
}
// elements[i].attributes[m] = undefined
}
for (let n = 0; n < removeName.length; n++) {
elements[i].attributes.removeNamedItem(removeName[n])
}
if (isEvent) {
for (let key in Event) {
if (Event[key].length > 0) {
elements[i].addEventListener(key, (e) => {
for (let t = 0; t < Event[key].length; t++) {
Event[key][t](e)
}
});
}
}
}
}
}
}
export default EventBinding;

175
src/Obj/Element/Dialog/index.js Normal file
View File

@ -0,0 +1,175 @@
import BaseDialog from '../../../BaseDialog';
class Dialog extends BaseDialog {
constructor(sdk, info, options, only) {
super(sdk.viewer._container, options, only);
this.sdk = sdk
this.viewer = sdk.viewer
this.info = info
this._init()
}
async _init() {
await this.init()
await this._attribute()
if (this.options.confirmCallBack) {
let confirmBtn = document.createElement('button');
confirmBtn.className = 'confirm';
confirmBtn.innerHTML = '确认'
this.footAppChild(confirmBtn)
confirmBtn.addEventListener('click', () => {
// console.log('确认')
if (this.options.confirmCallBack) {
this.options.confirmCallBack(this.info)
}
});
}
if (this.options.removeCallBack) {
let deleteBtn = document.createElement('button');
deleteBtn.className = 'delete';
deleteBtn.innerHTML = '删除'
this.footAppChild(deleteBtn)
deleteBtn.addEventListener('click', () => {
// console.log('删除')
this.close()
if (this.options.removeCallBack) {
this.options.removeCallBack()
}
});
}
// if (this.options.resetCallBack) {
// let resetBtn = document.createElement('button');
// resetBtn.className = 'reset';
// resetBtn.innerHTML = '重置'
// this.footAppChild(resetBtn)
// resetBtn.addEventListener('click', () => {
// // console.log('重置')
// if (this.options.resetCallBack) {
// this.options.resetCallBack()
// }
// });
// }
if (this.options.rotateCallBack) {
let rotateBtn = document.createElement('button');
rotateBtn.className = 'rotate';
rotateBtn.innerHTML = '旋转'
this.footAppChild(rotateBtn)
rotateBtn.addEventListener('click', () => {
// console.log('旋转')
if (this.options.rotateCallBack) {
this.options.rotateCallBack()
}
});
}
if (this.options.translationalCallBack || this.options.updateHeightCallBack || this.options.secondaryEditCallBack) {
let div = document.createElement('div');
div.style.position ='absolute'
div.style.left ='24px'
div.style.flet = '0'
div.style.display = 'flex'
this.footAppChild(div)
if (this.options.updateHeightCallBack) {
let heightBtn = document.createElement('button');
heightBtn.innerHTML = '<svg class="icon-updateheigh"><use xlink:href="#yj-icon-updateheight"></use></svg>更新高程'
heightBtn.style.width = 'auto'
heightBtn.addEventListener('click', () => {
this.options.updateHeightCallBack()
})
div.appendChild(heightBtn)
}
if (this.options.secondaryEditCallBack) {
let secondaryEditBtn = document.createElement('button');
secondaryEditBtn.className = 'secondaryEdit';
secondaryEditBtn.innerHTML = '<svg class="icon-edit"><use xlink:href="#yj-icon-edit"></use></svg>二次编辑'
if (this.options.updateHeightCallBack) {
secondaryEditBtn.style.marginLeft = '10px'
}
div.appendChild(secondaryEditBtn)
secondaryEditBtn.addEventListener('click', () => {
// console.log('二次编辑')
if (this.options.secondaryEditCallBack) {
this.options.secondaryEditCallBack()
}
});
}
if (this.options.translationalCallBack) {
let translationalBtn = document.createElement('button');
translationalBtn.className = 'translational';
translationalBtn.innerHTML = `<svg class="icon-py"><use xlink:href="#yj-icon-py"></use></svg>平移`
if (this.options.updateHeightCallBack || this.options.secondaryEditCallBack) {
translationalBtn.style.marginLeft = '10px'
}
div.appendChild(translationalBtn)
translationalBtn.addEventListener('click', () => {
// console.log('平移')
if (this.options.translationalCallBack) {
this.options.translationalCallBack()
}
});
}
}
if (this.options.addFootElm) {
for (let i = 0; i < this.options.addFootElm.length; i++) {
let elm = document.createElement(this.options.addFootElm[i].tagName);
elm.className = this.options.addFootElm[i].className
elm.innerHTML = this.options.addFootElm[i].innerHTML
if(this.options.addFootElm[i].event && this.options.addFootElm[i].event.length==2) {
elm.addEventListener(this.options.addFootElm[i].event[0], this.options.addFootElm[i].event[1])
}
this.footAppChild(elm)
}
}
// if (this.options.showCallBack) {
// let showBox = document.createElement('div');
// showBox.className = 'show';
// showBox.style = 'display: flex;align-items: center;'
// showBox.innerHTML = `<span class="label">隐藏</span><input class="btn-switch" type="checkbox" checked name="show"><span class="label">显示</span>`
// this.footAppChild(showBox)
// let showBtn = showBox.querySelector("input[name='show']")
// this.showBtn = showBtn
// showBtn.checked = this.info.show
// showBtn.addEventListener('input', (e) => {
// this.info.show = e.target.checked
// if (this.options.showCallBack) {
// this.options.showCallBack(this.info.show)
// }
// });
// }
}
_attribute() {
let attribute = this._element.content.getElementsByClassName('attribute')[0]
if (!attribute || attribute.length === 0) {
return
}
let attributeSelectOption = attribute.getElementsByClassName('attribute-select')[0].getElementsByTagName('option')
for (let i = attributeSelectOption.length - 1; i >= 0; i--) {
for (let key in this.info.attribute) {
if (attributeSelectOption[i].value === key) {
if (this.info.attribute[key].disabled) {
attributeSelectOption[i].disabled = true
}
break
}
}
}
}
}
export default Dialog

141
src/Obj/Element/Pagination.js Normal file
View File

@ -0,0 +1,141 @@
function generatePagination(pagination, total, pageSize, pageIndex, cd) {
/*
需要一个<ul id="pagination"></ul>标签
total; // 总数据的数量
pageSize; // 一页显示数量
pageIndex; // 当前页
*/
let totalPage = Math.ceil(total / pageSize) || 1; // 总页数
function initPagination() {
let pageHtml; // 按钮内容
let prevButton = `<li class='list-items lbl btnPrev'>‹</li>`; // 向左
let nextButton = `<li class='list-items lbr btnNext'>›</li>`; // 向右
let firstPage = `<li class='list-items' pagenumber=1>1</li>`; // 第一页
let lastPage = `<li class='list-items' pagenumber=${totalPage}>${totalPage}</li>`; // 最后一页
let leftOmitPage = `<li class='list-items btnGoLeft'>...</li>`; // 省略号
let rightOmitPage = `<li class='list-items btnGoRight'>...</li>`; // 省略号
let pageTips = `<div style='line-height:20px;' class='pageTips'>共 ${total} 条</div > `;
pageHtml = prevButton; // 添加向左的按钮
/* 生成页数 */
if (totalPage <= 6) {
// 总页数小于等于10页全部显示
for (let i = 1; i <= totalPage; i++) {
pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
}
}
//页码大于5页的情况 当前页大于5的话，并且页码是大于11页的
else if (pageIndex <= 4) {
//总页数大于10且当前页远离总页数
for (let i = 1; i <= 5; i++) {
pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
}
pageHtml += rightOmitPage;
pageHtml += lastPage;
} else if (pageIndex > totalPage - 3) {
//pageindex>=9 的时候并且页数》10页的时候
// console.log('totalPage - 2:' + (totalPage - 3));
// console.log('pageindex:' + pageIndex);
//总页数大于10且当前页接近总页数
pageHtml += firstPage;
pageHtml += leftOmitPage;
for (let i = totalPage - 4; i <= totalPage; i++) {
pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
}
} else {
//除开上面两个情况 当前页在中间
pageHtml += firstPage;
pageHtml += leftOmitPage;
for (let i = pageIndex - 1; i <= pageIndex + 1; i++) {
pageHtml += `<li class='list-items' pagenumber=${i}>${i}</li>`;
}
pageHtml += rightOmitPage;
pageHtml += lastPage;
}
pageHtml += nextButton; // 添加向右的按钮
pageHtml += pageTips;
pagination.innerHTML = pageHtml;
pagination
.querySelector("li[pagenumber='" + pageIndex + "']")
.classList.add('active');
let pagenumberBtns = pagination.querySelectorAll('li[pagenumber]'); // 获取所有的页码按钮
/* 点击页码按钮进行翻页 */
pagenumberBtns.forEach(function (elements) {
elements.onclick = function () {
pageIndex = Number(this.innerHTML); // 当前页
pagination
.querySelector("li[pagenumber='" + pageIndex + "']")
.classList.add('active');
pageHtml = ``;
initPagination()
cd && cd(pageIndex)
};
});
/* 向左翻页 */
pagination.getElementsByClassName('btnPrev')[0].addEventListener('click', function () {
if (pageIndex > 1) {
pageIndex--;
pageHtml = '';
initPagination();
cd && cd(pageIndex)
}
});
/* 向右翻页 */
pagination.getElementsByClassName('btnNext')[0].addEventListener('click', function () {
if (pageIndex < totalPage) {
pageIndex++;
pageHtml = '';
initPagination()
cd && cd(pageIndex)
}
});
/* 向左快速翻页 */
let btnGoLeft = pagination.getElementsByClassName('btnGoLeft')[0];
if (btnGoLeft) {
btnGoLeft.addEventListener('mouseenter', function () {
this.innerHTML = '<';
});
btnGoLeft.addEventListener('mouseleave', function () {
this.innerHTML = '...';
});
btnGoLeft.addEventListener('click', function () {
if (pageIndex > 10) {
pageIndex -= 10;
pageHtml = '';
initPagination();
cd && cd(pageIndex)
}
});
}
/* 向右快速翻页 */
let btnGoRight = pagination.getElementsByClassName('btnGoRight')[0];
if (btnGoRight) {
btnGoRight.addEventListener('mouseenter', function () {
this.innerHTML = '>';
});
btnGoRight.addEventListener('mouseleave', function () {
this.innerHTML = '...';
});
btnGoRight.addEventListener('click', function () {
if (pageIndex < totalPage - 10) {
pageIndex += 10;
pageHtml = '';
initPagination();
cd && cd(pageIndex)
}
});
}
}
initPagination();
}
export { generatePagination }

265
src/Obj/Element/cy_html_slider.js Normal file
View File

@ -0,0 +1,265 @@
class cy_slider {
constructor(ele, options = undefined) {
var that = this
this.options = options
//slider 盒子，顶层元素
this.slider_box = ele
if (this.slider_box == null) {
return
}
//slider 手柄
this.handler = this.slider_box.querySelector('.handler')
//slider 有值块
this.light = this.slider_box.querySelector('.light')
//是否是垂直
if (this.slider_box.classList.contains("vertical")) {
this.is_vertical = true
}
//是否是禁用
if (this.slider_box.attributes.getNamedItem("disabled") && this.slider_box.attributes.getNamedItem("disabled").value.toLowerCase() != "false") {
this.is_disabled = true
}
this.is_initialize = true
this.max_data = 100
this.min_data = 0
this.step_separates = []
this.step_percents = []
if (options) {
//参数校验，必要内置参数预算
var u_max_data = parseFloat(options.max_data)
if (u_max_data || u_max_data == 0) {
this.max_data = u_max_data
}
var u_min_data = parseFloat(options.min_data)
if (u_min_data || u_min_data == 0) {
if (u_min_data < this.max_data) {
this.min_data = u_min_data
} else {
this.min_data = this.max_data
}
}
//步长分割
var data_area = this.max_data - this.min_data
var u_step = Math.abs(parseFloat(options.step))
if (u_step) {
if (data_area / u_step > 200) {
u_step = data_area / 200
}
} else {
u_step = Math.floor(data_area / 100)
}
var added_step = this.min_data
this.step_separates.push(added_step)
while (added_step < this.max_data) {
added_step += parseFloat(u_step)
added_step = parseFloat(added_step.toFixed(3))
if (added_step > this.max_data) {
added_step = this.max_data
}
this.step_separates.push(added_step)
}
for (var i = 0; i < this.step_separates.length; i++) {
if (this.step_separates.length == 1) {
this.step_percents.push(1)
break
}
var step_percent = i / (this.step_separates.length - 1)
this.step_percents.push(step_percent)
}
}
this.slider_box.addEventListener('click', (ev) => {
//点击设置值
if (that.is_disabled) {
return
}
if (ev.target.nodeName != "SPAN") {
if (that.is_vertical) {
if (ev.target.classList.contains("light")) {
that._setPosition(that.slider_box.offsetHeight - (that.slider_box.offsetHeight - that.light.offsetHeight + ev.offsetY))
}
else {
that._setPosition(that.slider_box.offsetHeight - ev.offsetY)
}
} else {
that._setPosition(ev.offsetX)
}
}
})
this.movementX = 0
this.movementY = 0
this.previousTouch = null
this.crt_val = 0
this.slider_box.addEventListener('mousedown', (ev) => {
//标准端拖动开始
if (that.is_disabled) {
return
}
that.movementX = 0
that.movementY = 0
that.previousTouch = null
if (that.is_vertical) {
that.crt_val = that.slider_box.offsetHeight * (that.handler.style.bottom.replace("%", "") / 100)
} else {
that.crt_val = that.slider_box.offsetWidth * (that.handler.style.left.replace("%", "") / 100)
}
document.documentElement.addEventListener('mousemove', _dragMove)
document.documentElement.addEventListener('mouseup', () => {
document.documentElement.removeEventListener('mousemove', _dragMove)
})
})
this.slider_box.addEventListener('touchstart', (ev) => {
//touch端拖动开始
if (that.is_disabled) {
return
}
that.movementX = 0
that.movementY = 0
that.previousTouch = null
if (that.is_vertical) {
that.crt_val = that.slider_box.offsetHeight * (that.handler.style.bottom.replace("%", "") / 100)
} else {
that.crt_val = that.slider_box.offsetWidth * (that.handler.style.left.replace("%", "") / 100)
}
document.documentElement.addEventListener('touchmove', _dragMove)
document.documentElement.addEventListener('touchend', () => {
document.documentElement.removeEventListener('touchmove', _dragMove)
})
})
function _dragMove(ev) {
if (ev.type == "touchmove") {
//touch端
if (that.previousTouch) {
that.movementX += ev.touches[0].pageX - that.previousTouch.pageX;
that.movementY += ev.touches[0].pageY - that.previousTouch.pageY;
};
that.previousTouch = ev.touches[0];
if (that.is_vertical) {
var new_val = that.crt_val - that.movementY
if (new_val < 0) {
new_val = 0
} else if (new_val > that.slider_box.offsetHeight) {
new_val = that.slider_box.offsetHeight
}
that._setPosition(new_val)
} else {
var new_val = that.crt_val + that.movementX
if (new_val < 0) {
new_val = 0
} else if (new_val > that.slider_box.offsetWidth) {
new_val = that.slider_box.offsetWidth
}
that._setPosition(new_val)
}
} else {
//标准端
that.movementX += ev.movementX
that.movementY += ev.movementY
if (that.is_vertical) {
var new_val = that.crt_val - that.movementY
if (new_val < 0) {
new_val = 0
} else if (new_val > that.slider_box.offsetHeight) {
new_val = that.slider_box.offsetHeight
}
that._setPosition(new_val)
} else {
var new_val = that.crt_val + that.movementX
if (new_val < 0) {
new_val = 0
} else if (new_val > that.slider_box.offsetWidth) {
new_val = that.slider_box.offsetWidth
}
that._setPosition(new_val)
}
}
ev.preventDefault()
}
//根据相关值设置 slider 样式
this._setPosition = function (val, noCallback) {
var percent
if (this.is_vertical) {
percent = parseFloat(val) / this.slider_box.offsetHeight
} else {
percent = parseFloat(val) / this.slider_box.offsetWidth
}
var resultData
var closest_index = Math.floor(this.step_separates.length * percent)
if (closest_index >= this.step_separates.length) {
closest_index = this.step_separates.length - 1
}
resultData = this.step_separates[closest_index]
percent = this.step_percents[closest_index]
var percentCss = percent * 100 + '%'
if (this.is_vertical) {
this.light.style.height = percentCss
this.handler.style.bottom = percentCss
} else {
this.light.style.width = percentCss
this.handler.style.left = percentCss
}
this.slider_box.dataset.value = resultData
if (!this.is_initialize) {
if (this.options) {
if (this.options.callback instanceof Function && !noCallback) {
this.options.callback(resultData)
}
}
}
}
//设置初始默认值
if (this.options) {
var default_data = parseFloat(this.options.default_data)
if (default_data || default_data == 0) {
this.setSliderData(default_data)
} else {
this.setSliderData(this.min_data)
}
this.is_initialize = false
}
}
//用户公开的方法，设置 slider 值
setSliderData(data, noCallback = false) {
if (data < this.min_data) {
data = this.min_data
}
if (data > this.max_data) {
data = this.max_data
}
var percent
var min_differ = Number.MAX_VALUE
for (var i = 0; i < this.step_separates.length; i++) {
var crt_differ = Math.abs(data - this.step_separates[i])
if (crt_differ < min_differ) {
min_differ = crt_differ
percent = this.step_percents[i]
}
if (crt_differ == 0) {
break
}
}
var move_val
if (this.is_vertical) {
move_val = parseFloat(this.slider_box.offsetHeight * percent)
} else {
move_val = parseFloat(this.slider_box.offsetWidth * percent)
}
this._setPosition(move_val, noCallback)
}
//用户公开的方法，设置是否禁用
setDisabled(is_disabled) {
this.is_disabled = is_disabled
if (!this.slider_box || !this.slider_box.attributes) {
return
}
if (is_disabled) {
var attr_disabled = document.createAttribute("disabled")
this.slider_box.attributes.setNamedItem(attr_disabled)
} else {
this.slider_box.attributes.removeNamedItem("disabled")
}
}
}
export default cy_slider

86
src/Obj/Element/cy_html_tabs.js Normal file
View File

@ -0,0 +1,86 @@
class cy_tabs {
constructor(boxElm, clickTabCallBack, sdk) {
let elm
if(typeof boxElm === 'string') {
elm = document.getElementById(boxElm);
}
else {
elm = boxElm
}
// let elm = document.getElementById(id);
let pane = elm.getElementsByTagName('DIV-cy-tab-pane')
let tabTop = `<div class="DIV-cy-tab-top">`
let tabContent = `<div class="DIV-cy-tab-content">`
let tabindex = 0
for (let i = 0; i < pane.length; i++) {
let flag = false
if (sdk && sdk.tabHide && Array.isArray(sdk.tabHide)) {
for (let m = 0; m < sdk.tabHide.length; m++) {
if (pane[i].getAttribute('label') === sdk.tabHide[m]) {
flag = true
break
}
}
}
if (flag) {
continue
}
let style = 'display: none;'
let active = ''
if (tabindex == 0) {
style = ''
active = 'is-active'
}
tabTop = tabTop + `
<div class="DIV-cy-tab-pane-title">
<div class="DIV-cy-tab-pane-title-p `+ active + `" tabindex="` + tabindex + `"><span>` + pane[i].getAttribute('label') + `</span></div>
</div>
`
tabContent = tabContent + `<div class="DIV-cy-tab-content-pane ${pane[i].className}" style="` + style + `">` + pane[i].innerHTML + `</div>`
tabindex++
}
tabTop = tabTop + `</div>`
tabContent = tabContent + `</div>`
let BoxElm = document.createElement('div');
if(typeof boxElm === 'string') {
BoxElm.setAttribute('id', boxElm)
}
BoxElm.setAttribute('class', 'DIV-cy-tabs')
BoxElm.innerHTML = tabTop + tabContent
elm.parentNode.insertBefore(BoxElm, elm);
elm.parentNode.removeChild(elm);
// 点击事件
let tabs = BoxElm.getElementsByClassName('DIV-cy-tab-pane-title-p')
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', (e) => {
let tabindex = e.target.getAttribute('tabindex')
let contentElm = BoxElm.getElementsByClassName('DIV-cy-tab-content-pane')
clickTabCallBack && clickTabCallBack(tabindex)
for (let i = 0; i < contentElm.length; i++) {
if (i === parseInt(tabindex)) {
contentElm[i].style.display = ''
tabs[i].className = 'DIV-cy-tab-pane-title-p is-active'
}
else {
contentElm[i].style.display = 'none'
tabs[i].className = 'DIV-cy-tab-pane-title-p'
}
}
contentElm[parseInt(tabindex)].style.display = ''
})
}
this.clickTabCallBack = clickTabCallBack
}
clickTabCallBack() {
if (this.clickTabCallBack) {
this.clickTabCallBack()
}
}
}
export default cy_tabs

139
src/Obj/Element/datalist.js Normal file
View File

@ -0,0 +1,139 @@
var legp = function (parentElement, ele, index = 0) {
let targetValue = null
return ({
that: Array.prototype.slice.call(parentElement.querySelectorAll(ele), 0),
stopPropagation: function (e) {
e = e || window.event;
if (e.stopPropagation) { //W3C阻止冒泡方法
e.stopPropagation();
}
else {
e.cancelBubble = true; //IE阻止冒泡方法
}
},
hide: function () {
legp(parentElement, ele).that.forEach(function (item) {
item.style.cssText += "display:none;";
});
},
show: function (num) {
if (num !== undefined) {
legp(parentElement, ele).that[num].style.cssText += "display:block;";
} else {
legp(parentElement, ele).that.forEach(function (item) {
item.style.cssText += "display:block;";
});
}
},
legp_searchList: function (name) {
let arr = [];
legp(parentElement, "input[name=" + name + "]").that.forEach(item => {
arr.push(item.value)
});
return arr;
},
legp_search: function (tagData, search = false) {
// var domId = legp(parentElement, ele).that[0];
var domId = legp(parentElement, ele).that[index];
if (!domId) {
return
}
var html = `<div class="cy_datalist"><i class="yj-custom-icon-arrow-down"></i>\n ${search ? '<input type="text" placeholder="\u8F93\u5165\u6216\u9009\u62E9" autocomplete="off">' : `<input type="text" class="datalist ${index}" readonly="readonly" placeholder="\u8bf7\u9009\u62e9" autocomplete="off">`}\n <dl style="display: none;position: absolute;background: rgba(0, 0, 0, 0.5);color: rgba(var(--color-sdk-base-rgb), 1);border: 1px solid rgba(var(--color-sdk-base-rgb), 0.2);border-radius: 3px;margin: 2px 0px;max-height: 300px;overflow-x: hidden;white-space: nowrap; font-size: 12px;z-index: 8;">\n </dl>\n </div>`;
domId.innerHTML = html;
// domId.appendChild(dom);
//获取当前广告
function myClick() {
legp(parentElement, ".cy_datalist dl dd").that.forEach(function (item) {
item.onclick = function (e) {
if (!this || !this.attributes) {
return
}
let value = this.attributes.value.value;
targetValue = value
e.currentTarget.parentNode.previousElementSibling.value = value
// 为了触发绑定的事件处理器，我们可以手动创建一个事件并触发它
const event = new Event('input', { bubbles: true });
e.currentTarget.parentNode.previousElementSibling.dispatchEvent(event);
// if (id != '') {
// legp(".AD").that[0].innerHTML += "<a href=\"javascript:;\" class=\"label\"><span>" + this.innerHTML + "</span><input type=\"hidden\" name=\"" + name + "\" id=\"" + id + "\" value=\"" + id + "\"/><span class=\"close\">x</span></a>";
// legp(".AD").that[0].parentNode.style.cssText += "display:block;";
// for (var i = 0; i < tagData.length; i++) {
// if (tagData[i].id == id) {
// tagData.splice(i, 1);
// i = tagData.length;
// }
// }
// removeAdvertising();
// }
// legp(".cy_datalist dl").hide();
// legp(".cy_datalist input").that[0].value = '';
// e.stopPropagation();
};
});
}
//筛选
legp(parentElement, ".cy_datalist input").that[index].oninput = function (e) {
var val = this.value; //获取input值
legp(parentElement, ".cy_datalist dl").hide();
if (tagData.length > 0) {
legp(parentElement, ".cy_datalist dl").show();
var sear_1 = new RegExp(val);
var judge_1 = false;
legp(parentElement, ".cy_datalist dl").that[index].innerHTML = "";
tagData.forEach(function (item) {
if (sear_1.test(item.name)) {
judge_1 = true;
legp(parentElement, ".cy_datalist dl").that[index].innerHTML += "<dd class=\"" + ((targetValue === item.value) ? 'active' : '') + "\" style=\"margin: 0; padding: 5px 5px; color: #fff;cursor: pointer;\" value=\"" + item.value + "\">" + item.name + "</dd>";
}
});
if (!judge_1) {
legp(parentElement, ".cy_datalist dl").that[index].innerHTML = "<dd style=\"padding: 10px 20px; color: #fff;\">\u6682\u65E0\u6570\u636E</dd>";
}
myClick();
}
};
//显示没被选择的
legp(parentElement, ".cy_datalist input").that[index].onclick = function (e) {
legp(parentElement, ".cy_datalist dl").hide();
let num = e.srcElement.classList[1] * 1
num = num || 0
if (legp(parentElement, ".cy_datalist dl").that[num].style.display === 'none') {
if (tagData.length == 0) {
this.innerHTML = "暂无数据";
}
else {
legp(parentElement, ".cy_datalist dl").show(num);
}
legp(parentElement, ".cy_datalist dl").that[num].innerHTML = "";
tagData.forEach(function (item) {
legp(parentElement, ".cy_datalist dl").that[num].innerHTML += "<dd class=\"" + ((targetValue === item.value) ? 'active' : '') + "\" style=\"margin: 0; padding: 5px 5px; color: #fff;cursor: pointer;\" value=\"" + item.value + "\">" + item.name + "</dd>";
});
myClick();
}
e.stopPropagation();
};
// //封装
// function clickoutSide(nameClass, callback) {
// // 全局注册点击事件
// document.onclick = function (e) {
// //若点击元素为目标元素则返回
// if (e.target.className === nameClass) return
// //否则执行回调函数
// callback()
// }
// }
//隐藏
document.addEventListener('click', () => {
legp(parentElement, ".cy_datalist dl").hide();
// legp(parentElement, ".cy_datalist input").that[0].value = "";
})
},
legp_searchActive: function (value) {
targetValue = value
}
});
};
export { legp }

1038
src/Obj/Element/elm_html.js Normal file
View File

File diff suppressed because it is too large Load Diff

48
src/Obj/Element/fontSelect.js Normal file
View File

@ -0,0 +1,48 @@
let fontData = [
{
name: '黑体',
value: '黑体',
font: 'SimHei',
key: '0'
},
{
name: '思源黑体',
value: '思源黑体',
font: 'SourceHanSansTi',
key: '1'
},
{
name: '庞门正道标题体',
value: '庞门正道标题体',
font: 'PMZDBTTi',
key: '2'
},
{
name: '数黑体',
value: '数黑体',
font: 'AlimamaShuHeiTi',
key: '3'
}
]
function getFontList() {
return fontData
}
function getFontFamily(key) {
for (let i = 0; i < fontData.length; i++) {
if (fontData[i].key == key) {
return fontData[i].font;
}
}
}
function getFontFamilyName(key) {
for (let i = 0; i < fontData.length; i++) {
if (fontData[i].key == key) {
return fontData[i].name;
}
}
}
export { getFontList, getFontFamily, getFontFamilyName }

256
src/Obj/Element/richText.js Normal file
View File

@ -0,0 +1,256 @@
import { getHost, getToken } from "../../on";
class richText {
#customUploadVideo
#customUploadContent
#primaryCallBack
constructor() {
this.richTextBox = document.createElement('div');
this.richTextBox.className = 'richText-box'
this.richTextBox.style.position = 'absolute'
this.richTextBox.style.width = '60%'
this.richTextBox.style.height = '70%'
this.richTextBox.style.backgroundColor = '#ffffff'
this.richTextBox.style.zIndex = '999999'
this.richTextBox.style.left = '20%'
this.richTextBox.style.top = '15%'
this.richTextBox.style.display = 'flex'
this.richTextBox.style.flexDirection = 'column'
this.uploadImageServer
this.uploadVideoServer
}
// 打开
open(id, title = '', content = '') {
let _this = this;
this.title = title
this.objectId = id
if (document.body.getElementsByClassName('richText-box')[0]) {
document.body.removeChild(this.richTextBox)
}
this.editor = null
let html = `
<div class="richText-box-mask"></div>
<div class="richText-content">
<div class="richText-header">
<p>${title}</P>
<i class="close">&#10005</i>
</div>
<div id="toolbar-container"></div>
<div id="editor-container"></div>
<div class="richText-footer">
<button class="primary">确认</button>
<button class="cancel">取消</button>
</div>
</div>
`
// let elm = document.createRange().createContextualFragment(html)
this.richTextBox.innerHTML = html
document.body.appendChild(this.richTextBox)
const { createEditor, createToolbar } = window.wangEditor
const editorConfig = {
placeholder: '请输入正文...',
MENU_CONF: {
uploadImage: {
fieldName: 'file',
// maxFileSize: 50 * 1024 * 1024,
// base64LimitSize: 50 * 1024 * 1024, // 50M 以下插入 base64
server: this.uploadImageServer,
// // 上传之前触发
// onBeforeUpload(file) { // TS 语法
// // onBeforeUpload(file) { // JS 语法
// // file 选中的文件，格式如 { key: file }
// return file
// // 可以 return
// // 1. return file 或者 new 一个 file ，接下来将上传
// // 2. return false ，不上传这个 file
// },
// // 上传进度的回调函数
// onProgress(progress) { // TS 语法
// // onProgress(progress) { // JS 语法
// // progress 是 0-100 的数字
// console.log('progress', progress)
// },
// // 单个文件上传成功之后
// onSuccess(file, res) { // TS 语法
// // onSuccess(file, res) { // JS 语法
// console.log(`${file.name} 上传成功`, res)
// },
// // 单个文件上传失败
// onFailed(file, res) { // TS 语法
// // onFailed(file, res) { // JS 语法
// console.log(`${file.name} 上传失败`, res)
// },
// // 上传错误，或者触发 timeout 超时
// onError(file, err, res) { // TS 语法
// // onError(file, err, res) { // JS 语法
// console.log(`${file.name} 上传出错`, err, res)
// },
// 自定义上传
async customUpload(file, insertFn) { // TS 语法
// async customUpload(file, insertFn) { // JS 语法
// file 即选中的文件
// 自己实现上传，并得到图片 url alt href
// 最后插入图片
let url = await _this.upload(file)
insertFn((_this.host = _this.host || getHost()) + '/' + url)
}
},
uploadVideo: {
// maxFileSize: 500 * 1024 * 1024,
server: this.uploadVideoServer,
allowedFileTypes: ['video/mp4', 'video/mp3', 'video/ogg', 'video/webm', 'video/avi'],
// 自定义上传
async customUpload(file, insertFn) {
// async customUpload(file, insertFn) {
// file 即选中的文件
// 自己实现上传，并得到图片 url alt href
// 最后插入图片
let url = await _this.upload(file)
insertFn((_this.host = _this.host || getHost()) + '/' + url)
// if(_this.#customUploadVideo) {
// let url = await _this.#customUploadVideo(file)
// insertFn(url, file.name)
// }
}
}
},
onChange(editor) {
const html = editor.getHtml()
// 也可以同步到 <textarea>
}
}
this.editor = createEditor({
selector: '#editor-container',
html: '<p><br></p>',
config: editorConfig,
mode: 'default', // or 'simple'
})
const toolbarConfig = {
// 隐藏菜单
excludeKeys: [
'emotion', // 表情
'insertImage', // 网络图片
'insertVideo' // 网络视频
]
}
const toolbar = createToolbar({
editor: this.editor,
selector: '#toolbar-container',
config: toolbarConfig,
mode: 'default', // or 'simple'
})
this.editor.on('fullScreen', () => { console.log('fullScreen') })
this.editor.setHtml(content)
let closeElm = this.richTextBox.getElementsByClassName('close')[0]
let primaryBtnElm = this.richTextBox.getElementsByClassName('primary')[0]
let cancelBtnElm = this.richTextBox.getElementsByClassName('cancel')[0]
closeElm.addEventListener('click', () => {
this.close()
})
primaryBtnElm.addEventListener('click', () => {
const html = this.editor.getHtml()
this.primaryCallBack(html)
this.close()
// if(this.customUploadContent) {
// this.customUploadContent(this.objectId, html).then((url)=>{
// if(this.primaryCallBack) {
// this.primaryCallBack(url)
// }
// this.close()
// })
// }
})
cancelBtnElm.addEventListener('click', () => {
this.close()
})
}
// 关闭
close() {
if (document.body.getElementsByClassName('richText-box')[0]) {
document.body.removeChild(this.richTextBox)
}
this.editor = null
}
async upload(file) {
let url = ""
this.host = this.host || getHost()
if (this.host.endsWith("yjearth4.0")) {
url = this.host + '/api/v1/richText/upload'
}
else {
url = this.host + '/yjearth4.0/api/v1/richText/upload'
}
const formData = new FormData();
formData.append('file', file);
let response = await fetch(url, {
method: 'post',
body: formData,
headers: {
"token": getToken(),
"Authorization": "Bearer " + getToken(),
}
})
if (response.status === 200) {
let data = await response.json()
if (data.code === 200 || data.code === 0) {
return data.data.url
}
}
}
// // 设置上传图片服务地址
// setUploadImageServer(server) {
// this.uploadImageServer = server
// if(this.editor) {
// this.open(this.title)
// }
// }
// // 设置上传视频服务地址
// setUploadVideoServer(server) {
// this.uploadVideoServer = server
// if(this.editor) {
// this.open(this.title)
// }
// }
// 自定义上传视频
get customUploadVideo() {
return this.#customUploadVideo
}
set customUploadVideo(event) {
this.#customUploadVideo = event
}
// 自定义上传文本内容
get customUploadContent() {
return this.#customUploadContent
}
set customUploadContent(event) {
this.#customUploadContent = event
}
// 确认回调
get primaryCallBack() {
return this.#primaryCallBack
}
set primaryCallBack(event) {
this.#primaryCallBack = event
}
}
const _rich_text = new richText();
export default _rich_text;

26
src/Obj/Element/svg.js Normal file
View File

@ -0,0 +1,26 @@
let list = ['icon-py', 'icon-edit', 'icon-add', 'icon-add2', 'icon-minus', 'icon-play', 'icon-pause', 'icon-updateheight', 'icon-draw', 'icon-positions', 'icon-reset', 'icon-xj', 'icon-yj', 'icon-zj', 'icon-close', 'icon-query', 'icon-route', 'icon-copy', 'icon-load', 'icon-rubric', 'icon-pen', 'icon-cross', 'icom-confirm']
function setSvg() {
let svgElm = document.createElement('svg');
svgElm.xmlns = 'http://www.w3.org/2000/svg'
svgElm.style.width = 0
svgElm.style.height = 0
svgElm.style.position = 'absolute'
svgElm.style.overflow = 'hidden'
document.body.appendChild(svgElm)
const parser = new DOMParser()
for (let i = 0; i < list.length; i++) {
let name = list[i]
fetch(Cesium.buildModuleUrl(`../custom/img/${name}.svg`))
.then(r => r.text())
.then(b => {
const xmlDoc = parser.parseFromString(b, 'text/xml').getElementsByTagName('svg')[0]
if(xmlDoc) {
xmlDoc.id = 'yj-' + name
svgElm.appendChild(xmlDoc)
}
}
);
}
}
export { setSvg }

33
src/Obj/Element/theme.js Normal file
View File

@ -0,0 +1,33 @@
let theme = [
new Map(),
new Map(),
new Map(),
]
theme[0].set("--color-sdk-base-rgb", "0, 255, 255")
theme[0].set("--color-sdk-gradual", "rgb(0, 255, 255) 6.25%, rgb(0, 200, 255) 100%")
theme[0].set("--color-sdk-bg-gradual", "#00ffff33 0%, #00ffff00 100%")
theme[0].set("--color-sdk-text-shadow", "rgba(20, 118, 255, 1)")
theme[1].set("--color-sdk-base-rgb", "42, 200, 251")
theme[1].set("--color-sdk-gradual", "rgb(42, 200, 251) 6.25%, rgb(42, 145, 251) 100%")
theme[1].set("--color-sdk-bg-gradual", "#2ac8fb33 0%, #2ac8fb00 100%")
theme[1].set("--color-sdk-text-shadow", "rgba(20, 63, 255, 1)")
theme[2].set("--color-sdk-base-rgb", "187, 26, 41")
theme[2].set("--color-sdk-gradual", "rgb(187, 26, 41) 6.25%, rgb(236, 20, 20) 100%")
theme[2].set("--color-sdk-bg-gradual", "#bb1a2933 0%, #bb1a2900 100%")
theme[2].set("--color-sdk-text-shadow", "rgba(246, 8, 30, 1)")
function getTheme() {
return theme;
}
function setTheme(type=0) {
let colorVariable = Array.from(theme[type].keys())
colorVariable.forEach(key => {
document.documentElement.style.setProperty(key, theme[type].get(key));
})
}
export { getTheme, setTheme };

569
src/Obj/Element/yj-color-picker.js Normal file
View File

@ -0,0 +1,569 @@
class YJColorPicker {
constructor(options = {}) {
let _this = this
let RInput
let GInput
let BInput
let AInput
let config = {
el: options.el,
size: "mini",
isLog: false,
disabled: options.disabled || false, //是否禁止打开颜色选择器
alpha: false, //是否开启透明度
clickDefineColor: clickDefineColor,
hasClear: true,
openPickerAni: 'opacity',
defaultColor: options.defaultColor,
pickerInputChange: pickerInputChange,
startMainCallback: (t) => {
_this.colorPicker && (_this.colorPicker.picker.style.opacity = 0)
setTimeout(() => {
customizeStyle()
}, 0);
}
}
this.el = options.el
if (options.sure) {
config.sure = (color) => {
// this.colorPicker.config.defaultColor = this.colorPicker.pickerInput.value
let c = Cesium.Color.fromCssColorString(color)
if (AInput) {
c = c.withAlpha(AInput.value)
this.pickAlphaInputValue = AInput.value
}
color = c.toCssHexString()
if (typeof options.sure == 'function') {
options.sure(color)
}
customizeStyle()
}
}
if (options.clear) {
config.clear = () => {
if (AInput) {
AInput.value = this.pickAlphaInputValue = 1
}
this.colorPicker.config.defaultColor = ''
customizeStyle()
if (typeof options.clear == 'function') {
options.clear()
}
// setTimeout(() => {
// this.pickAlphaInputValue = 100
// this.colorPicker.$Dom.pickerInput.value = ''
// if (options.clear && typeof options.clear == 'function') {
// options.clear()
// }
// customizeStyle()
// }, this.colorPicker.config.pickerAnimationTime);
}
}
let CesiumColor
if (config.defaultColor) {
CesiumColor = Cesium.Color.fromCssColorString(config.defaultColor)
}
// if (options.predefineColor) {
// config.predefineColor = ['rgba(255, 255, 255, 1)', 'rgba(255, 0, 0, 1)', 'rgba(208, 132, 209, 1)', 'rgba(100, 182, 217, 1)', 'rgba(42, 130, 228, 1)', 'rgba(214, 36, 36, 1)', 'rgba(252, 222, 111, 1)', 'rgba(67, 207, 124, 1)', 'rgba(176, 243, 143, 1)', 'rgba(121, 72, 234, 1)', 'rgba(255, 195, 0, 1)', 'rgba(0, 186, 173, 1)', 'rgba(165, 214, 63, 1)', 'rgba(0, 0, 0, 1)', 'rgba(46, 47, 51, 1)', 'rgba(172, 51, 193, 1)', 'rgba(130, 21, 21, 1)', 'rgba(255, 87, 51, 1)', 'rgba(255, 140, 0, 1)', 'rgba(125, 191, 255, 1)']
// }
config.predefineColor = ['rgba(255, 255, 255, 1)', 'rgba(255, 0, 0, 1)', 'rgba(208, 132, 209, 1)', 'rgba(100, 182, 217, 1)', 'rgba(42, 130, 228, 1)', 'rgba(214, 36, 36, 1)', 'rgba(252, 222, 111, 1)', 'rgba(67, 207, 124, 1)', 'rgba(176, 243, 143, 1)', 'rgba(121, 72, 234, 1)', 'rgba(255, 195, 0, 1)', 'rgba(0, 186, 173, 1)', 'rgba(165, 214, 63, 1)', 'rgba(0, 0, 0, 1)', 'rgba(46, 47, 51, 1)', 'rgba(172, 51, 193, 1)', 'rgba(130, 21, 21, 1)', 'rgba(255, 87, 51, 1)', 'rgba(255, 140, 0, 1)', 'rgba(125, 191, 255, 1)']
this.colorPicker = new ewPlugins('colorpicker', config)
// window.colorPicker = this.colorPicker
customizeStyle()
function customizeStyle() {
if (!_this.colorPicker || !_this.colorPicker.picker) {
return
}
let isSubtract = false
let box = _this.colorPicker.box
let picker = _this.colorPicker.picker
let x = box.getBoundingClientRect().x
let y = box.getBoundingClientRect().y
let height = 0
// if (picker.style.display === 'none') {
// picker.style.display = 'block'
// height = picker.offsetHeight
// console.log('picker.style.display.opacity', picker.style.display.opacity)
// picker.style.display = 'none'
// }
// console.log('===========================================')
// console.log((y + box.offsetHeight + 4), height, window.innerHeight)
// if ((y + box.offsetHeight + 4) + height > window.innerHeight) {
// console.log(y, height)
// picker.style.top = y - height + 'px'
// }
// else {
// picker.style.top = (y + box.offsetHeight + 4) + 'px'
// }
picker.style.left = x + 'px'
picker.style.minWidth = '325px'
// let pickerContent = picker.getElementsByClassName('ew-color-picker-content')[0]
let pickAlphaSliderBar = picker.getElementsByClassName('ew-alpha-slider-bar')[0]
if (pickAlphaSliderBar) {
pickAlphaSliderBar.parentNode.style.width = '16px'
pickAlphaSliderBar.parentNode.removeChild(pickAlphaSliderBar)
}
let pickPen = document.createElement('div')
pickPen.className = 'icon-pen-box'
pickPen.innerHTML = '<svg class="icon-pen"><use xlink:href="#yj-icon-pen"></use></svg>'
/** 为完成、暂时隐藏 *///////
pickPen.style.display = 'none'
pickPen.style.cursor = 'unset'
let pickerInput = _this.colorPicker.pickerInput
pickerInput.parentNode.insertBefore(pickPen, pickerInput)
pickerInput.style.width = '188px'
pickerInput.style.display = 'none'
let colorInputBox = document.createElement('div')
let row1Elm = document.createElement('div')
row1Elm.className = 'row'
row1Elm.style.margin = '6px 0 0 0'
row1Elm.innerHTML = `
<div class="col">R</div>
<div class="col">G</div>
<div class="col">B</div>
<div class="col" style="flex: 0 0 92px;"></div>
`
let row2Elm = document.createElement('div')
row2Elm.className = 'row'
row2Elm.innerHTML = `
<div class="col">
<input type="number" step="1" min="0" max="255">
</div>
<div class="col">
<input type="number" step="1" min="0" max="255">
</div>
<div class="col">
<input type="number" step="1" min="0" max="255">
</div>
`
colorInputBox.appendChild(row1Elm)
colorInputBox.appendChild(row2Elm)
let Inputs = row2Elm.getElementsByTagName('input')
Inputs[0].style.width = '72px'
Inputs[1].style.width = '72px'
Inputs[2].style.width = '72px'
RInput = Inputs[0]
GInput = Inputs[1]
BInput = Inputs[2]
let dropbtns = picker.getElementsByClassName('ew-color-dropbtns')[0]
picker.insertBefore(colorInputBox, dropbtns)
RInput.addEventListener('blur', (e) => {
let value = e.target.value
if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) {
value = Number(value)
if ((e.target.max) && value > Number(e.target.max)) {
value = Number(e.target.max)
}
if ((e.target.min) && value < Number(e.target.min)) {
value = Number(e.target.min)
}
if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
value = Number(e.target.dataset.min)
}
RInput.value = parseInt(value)
_this.colorPicker.hsba = colorRgbaToHsba(`rgb(${RInput.value}, ${GInput.value}, ${BInput.value})`)
_this.colorPicker.changeColor(_this.colorPicker, _this.colorPicker.pickerPanel.offsetWidth,_this.colorPicker.pickerPanel.offsetHeight)
}
})
GInput.addEventListener('blur', (e) => {
let value = e.target.value
if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) {
value = Number(value)
if ((e.target.max) && value > Number(e.target.max)) {
value = Number(e.target.max)
}
if ((e.target.min) && value < Number(e.target.min)) {
value = Number(e.target.min)
}
if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
value = Number(e.target.dataset.min)
}
GInput.value = parseInt(value)
_this.colorPicker.hsba = colorRgbaToHsba(`rgb(${RInput.value}, ${GInput.value}, ${BInput.value})`)
_this.colorPicker.changeColor(_this.colorPicker, _this.colorPicker.pickerPanel.offsetWidth,_this.colorPicker.pickerPanel.offsetHeight)
}
})
BInput.addEventListener('blur', (e) => {
let value = e.target.value
if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) {
value = Number(value)
if ((e.target.max) && value > Number(e.target.max)) {
value = Number(e.target.max)
}
if ((e.target.min) && value < Number(e.target.min)) {
value = Number(e.target.min)
}
if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
value = Number(e.target.dataset.min)
}
BInput.value = parseInt(value)
_this.colorPicker.hsba = colorRgbaToHsba(`rgb(${RInput.value}, ${GInput.value}, ${BInput.value})`)
_this.colorPicker.changeColor(_this.colorPicker, _this.colorPicker.pickerPanel.offsetWidth,_this.colorPicker.pickerPanel.offsetHeight)
}
})
if (options.alpha) {
Inputs[0].style.width = '52px'
Inputs[1].style.width = '52px'
Inputs[2].style.width = '52px'
let pickAlpha = document.createElement('div')
pickAlpha.className = 'input-number input-number-unit color-alpha'
pickAlpha.innerHTML = `
<input class="input" type="number" title="" step="0.01" min="0" max="1">
<span class="arrow"></span>`
pickerInput.parentNode.insertBefore(pickAlpha, pickerInput.nextSibling)
pickAlpha.style.width = '66px'
pickAlpha.style.margin = '0 6px 0 0'
AInput = pickAlpha.getElementsByClassName('input')[0]
row1Elm.innerHTML = `
<div class="col">R</div>
<div class="col">G</div>
<div class="col">B</div>
<div class="col">A</div>
<div class="col" style="flex: 0 0 106px;"></div>
`
row2Elm.appendChild(pickAlpha)
AInput.addEventListener('blur', (e) => {
let value = e.target.value
if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) {
value = Number(value)
if ((e.target.max) && value > Number(e.target.max)) {
value = Number(e.target.max)
}
if ((e.target.min) && value < Number(e.target.min)) {
value = Number(e.target.min)
}
if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
value = Number(e.target.dataset.min)
}
AInput.value = parseInt(value * 100) / 100
}
})
if (_this.pickAlphaInputValue || _this.pickAlphaInputValue === 0 || _this.pickAlphaInputValue === '0') {
AInput.value = parseInt(_this.pickAlphaInputValue * 100) / 100
}
else {
AInput.value = CesiumColor ? parseInt(Number(CesiumColor.alpha.toFixed(2)) * 100) / 100 : 1
}
_this.pickAlphaInputValue = AInput.value
box.style.background = Cesium.Color.fromCssColorString(_this.colorPicker.config.defaultColor || '#ffffff').withAlpha(AInput.value).toCssColorString()
}
else {
CesiumColor = CesiumColor ? CesiumColor.withAlpha(1) : ''
box.style.background = Cesium.Color.fromCssColorString(_this.colorPicker.config.defaultColor || '#ffffff').toCssColorString()
}
let btngroup = picker.getElementsByClassName('ew-color-dropbtngroup')[0]
row2Elm.appendChild(btngroup)
let defineColorContainer = picker.getElementsByClassName('ew-pre-define-color-container')[0]
if (defineColorContainer) {
let colorList = localStorage.getItem('custom-color')
if (colorList) {
colorList = JSON.parse(colorList)
}
else {
colorList = {}
}
let customDivider2 = document.createElement('span')
customDivider2.className = 'custom-divider'
customDivider2.style.margin = '10px 0'
let customDivider3 = document.createElement('span')
customDivider3.className = 'custom-divider'
defineColorContainer.parentNode.insertBefore(customDivider2, defineColorContainer)
defineColorContainer.parentNode.insertBefore(customDivider3, defineColorContainer.nextSibling)
let collectColorContainer = document.createElement('div')
collectColorContainer.className = 'yj-pre-collect-color-container'
customDivider3.parentNode.insertBefore(collectColorContainer, customDivider3.nextSibling)
let addColorBtn = document.createElement('div')
addColorBtn.innerHTML = '<svg class="icon-add2"><use xlink:href="#yj-icon-add2"></use></svg>'
addColorBtn.className = 'yj-pre-collect-color add'
let subtractColorBtn = document.createElement('div')
subtractColorBtn.innerHTML = '<svg class="icon-minus" style="display: unset;"><use xlink:href="#yj-icon-minus"></use></svg><svg class="icon-confirm" style="display: none;"><use xlink:href="#yj-icom-confirm"></use></svg>'
subtractColorBtn.className = 'yj-pre-collect-color subtract'
let minusIcon = subtractColorBtn.getElementsByClassName('icon-minus')[0]
let confirmIcon = subtractColorBtn.getElementsByClassName('icon-confirm')[0]
collectColorContainer.appendChild(addColorBtn)
collectColorContainer.appendChild(subtractColorBtn)
let subtractElmList = []
for (let key in colorList) {
let colorElm = document.createElement('div')
colorElm.className = 'yj-pre-collect-color'
colorElm.setAttribute('tabindex', '0')
colorElm.setAttribute('color-box-id', _this.colorPicker.uid)
let colorItemElm = document.createElement('div')
colorItemElm.className = 'yj-pre-define-color-item'
colorElm.appendChild(colorItemElm)
colorItemElm.className = 'yj-pre-define-color-item'
let c = Cesium.Color.fromCssColorString(colorList[key])
let colorString = c.toCssHexString()
colorItemElm.style.backgroundColor = colorString
colorItemElm.addEventListener('click', (e) => {
_this.colorPicker.updateColor(e)
colorElm.className = 'yj-pre-collect-color yj-pre-collect-color-active'
clickDefineColor(colorString)
})
colorElm.addEventListener("blur", function (e) {
colorElm.className = 'yj-pre-collect-color'
})
let subtractElm = document.createElement('div')
subtractElm.className = 'yj-pre-define-color-item subtract-btn'
subtractElm.innerHTML = '<svg class="icon-cross"><use xlink:href="#yj-icon-cross"></use></svg>'
subtractElm.style.display = 'none'
colorElm.appendChild(subtractElm)
collectColorContainer.appendChild(colorElm)
subtractElm.addEventListener('click', () => {
delete colorList[key]
localStorage.setItem('custom-color', JSON.stringify(colorList))
collectColorContainer.removeChild(colorElm)
})
subtractElmList.push(subtractElm)
}
addColorBtn.addEventListener('click', () => {
if (isSubtract) {
isSubtract = false
for (let i = 0; i < subtractElmList.length; i++) {
subtractElmList[i].style.display = 'none'
}
}
let colorElm = document.createElement('div')
colorElm.className = 'yj-pre-collect-color'
colorElm.setAttribute('tabindex', '0')
colorElm.setAttribute('color-box-id', _this.colorPicker.uid)
let colorItemElm = document.createElement('div')
colorItemElm.className = 'yj-pre-define-color-item'
colorElm.appendChild(colorItemElm)
let color = colorRgbaToHex(colorHsbaToRgba(_this.colorPicker.hsba))
let c = Cesium.Color.fromCssColorString(color || '#ffffff')
if (AInput) {
c = c.withAlpha(AInput.value)
}
let colorString = c.toCssHexString()
colorItemElm.style.backgroundColor = colorString
colorItemElm.addEventListener('click', (e) => {
_this.colorPicker.updateColor(e)
colorElm.className = 'yj-pre-collect-color yj-pre-collect-color-active'
clickDefineColor(colorString)
})
colorElm.addEventListener("blur", function (e) {
colorElm.className = 'yj-pre-collect-color'
})
collectColorContainer.appendChild(colorElm)
let subtractElm = document.createElement('div')
subtractElm.className = 'yj-pre-define-color-item subtract-btn'
subtractElm.innerHTML = '<svg class="icon-cross"><use xlink:href="#yj-icon-cross"></use></svg>'
subtractElm.style.display = 'none'
colorElm.appendChild(subtractElm)
subtractElmList.push(subtractElm)
let key = Cesium.createGuid()
colorList[key] = colorString
localStorage.setItem('custom-color', JSON.stringify(colorList))
subtractElm.addEventListener('click', () => {
delete colorList[key]
localStorage.setItem('custom-color', JSON.stringify(colorList))
collectColorContainer.removeChild(colorElm)
})
})
subtractColorBtn.addEventListener('click', () => {
isSubtract = !isSubtract
if (isSubtract) {
minusIcon.style.display = 'none'
confirmIcon.style.display = 'unset'
for (let i = 0; i < subtractElmList.length; i++) {
subtractElmList[i].style.display = 'block'
}
}
else {
minusIcon.style.display = 'unset'
confirmIcon.style.display = 'none'
for (let i = 0; i < subtractElmList.length; i++) {
subtractElmList[i].style.display = 'none'
}
}
})
}
height = picker.offsetHeight
if (picker.style.display === 'none') {
picker.style.display = 'block'
height = picker.offsetHeight
picker.style.display = 'none'
}
if ((y + box.offsetHeight + 4) + height > window.innerHeight) {
picker.style.top = y - height + 'px'
}
else {
picker.style.top = (y + box.offsetHeight + 4) + 'px'
}
_this.colorPicker.pancelTop = parseFloat(picker.style.top) - 2
pickerInputChange(Cesium.Color.fromCssColorString(_this.colorPicker.config.defaultColor || '#ffffff').toCssHexString())
}
function clickDefineColor(color) {
if (AInput) {
let c = Cesium.Color.fromCssColorString(color)
AInput.value = parseInt(Number(c.alpha.toFixed(2)) * 100) / 100
}
}
function colorHsbaToRgba(e) {
var r, n, o, i = e.a, a = Math.round(e.h), s = Math.round(255 * e.s / 100), l = Math.round(255 * e.b / 100);
if (0 === s)
r = n = o = l;
else {
var c = (255 - s) * l / 255
, d = a % 60 * (l - c) / 60;
360 === a ? (r = l,
n = o = 0) : a < 60 ? (r = l,
n = c + d,
o = c) : a < 120 ? (r = l - d,
n = l,
o = c) : a < 180 ? (r = c,
n = l,
o = c + d) : a < 240 ? (r = c,
n = l - d,
o = l) : a < 300 ? (r = c + d,
n = c,
o = l) : a < 360 ? (r = l,
n = c,
o = l - d) : r = n = o = 0
}
return "rgba(" + Math.round(r) + "," + Math.round(n) + "," + Math.round(o) + "," + i + ")"
}
function colorRgbaToHex(e) {
var t = {
10: "A",
11: "B",
12: "C",
13: "D",
14: "E",
15: "F"
};
if (/rgba?/.test(e)) {
var r = e.replace(/rgba?\(/, "").replace(/\)/, "").replace(/[\s+]/g, "").split(",")
, n = "";
r[3];
return r.map(function (e, r) {
r <= 2 && (n += function (e) {
e = Math.min(Math.round(e), 255);
var r = Math.floor(e / 16)
, n = e % 16;
return "" + (t[r] || r) + (t[n] || n)
}(e))
}),
"#" + n
}
}
function colorHexToRgba(hex, alpha) {
let a = alpha || 1,
hColor = hex.toLowerCase(),
hLen = hex.length,
rgbaColor = [];
hColor = Cesium.Color.fromCssColorString(hColor).toCssHexString().substring(0, 7)
const colorRegExp = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
if (hex && colorRegExp.test(hColor)) {
//the hex length may be 4 or 7,contained the symbol of #
if (hLen === 4) {
let hSixColor = '#';
for (let i = 1; i < hLen; i++) {
let sColor = hColor.slice(i, i + 1);
hSixColor += sColor.concat(sColor);
}
hColor = hSixColor;
}
for (let j = 1, len = hColor.length; j < len; j += 2) {
rgbaColor.push(parseInt('0X' + hColor.slice(j, j + 2), 16));
}
// return "rgba(" + rgbaColor.join(",") + ',' + a + ")";
return rgbaColor;
} else {
return;
}
}
function colorRgbaToHsba(e) {
var t = e.slice(e.indexOf("(") + 1, e.lastIndexOf(")")).split(",")
, r = t.length < 4 ? 1 : Number(t[3])
, n = Number(t[0]) / 255
, o = Number(t[1]) / 255
, i = Number(t[2]) / 255
, a = void 0
, s = void 0
, l = void 0
, c = Math.min(n, o, i)
, d = l = Math.max(n, o, i)
, u = d - c;
if (d === c)
a = 0;
else {
switch (d) {
case n:
a = (o - i) / u + (o < i ? 6 : 0);
break;
case o:
a = 2 + (i - n) / u;
break;
case i:
a = 4 + (n - o) / u
}
a = Math.round(60 * a)
}
s = 0 === d ? 0 : 1 - c / d;
return s = Math.round(100 * s),
l = Math.round(100 * l),
{
h: a,
s: s,
b: l,
a: r
}
}
function pickerInputChange(v) {
if (_this.colorPicker && _this.colorPicker.pickerInput) {
let rgbaColor = colorHexToRgba(v || _this.colorPicker.pickerInput.value)
RInput.value = rgbaColor[0]
GInput.value = rgbaColor[1]
BInput.value = rgbaColor[2]
}
}
}
}
window.YJColorPicker = YJColorPicker
export default YJColorPicker