Commit d9793b11 by ramdayalmunda

some minor style

parent 4aedb27e
.scale{
position: absolute;
display: block;
width: 100mm;
height: 100mm;
z-index: -1;
opacity: 0;
pointer-events: none;
}
.main {
position: relative;
display: block;
display: flex;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #858585;
flex-direction: column;
justify-content: flex-start;
}
.header {
position: relative;
display: block;
width: 100%;
background-color: red;
}
.header .toolbar{
position: relative;
width: 100%;
background: pink;
display: flex;
gap: 10px;
}
.header .toolbar .item {
position: relative;
background: green;
border: 1px solid yelow;
border-radius: 3px;
padding: 2px;
margin: 4px;
}
.page-list {
position: relative;
display: block;
overflow-y: auto;
overflow-x: auto;
background: blue;
}
.page-list canvas {
background-color: #fff;
width: 210mm;
height: auto;
display: block;
width: 100mm;
height: 100mm;
background: #b1b1b1;
position: relative;
}
\ No newline at end of file
let isModule = (typeof module != 'undefined') ? true : false
if (!isModule) console.log('Browser Environment')
var ADocEditor = function (customConfig) {
var container, shadow, pxMmRatio, configuration, htmlStr, htmlTag;
var container, shadow, pxMmRatio, configuration, htmlStr, htmlTag, htmlObj={};
var paperSizes = {
"A4": { mmWidth: 210, mmHeight: 297 },
}
......@@ -18,7 +18,15 @@ var ADocEditor = function (customConfig) {
htmlStr = /*html*/`
<div class="scale"></div>
<div class="header">
<div class="toolbar">
<select class="item">
<option value="item">item 1</option>
<option value="item">item 1</option>
<option value="item">item 1</option>
<option value="item">item 1</option>
<option value="item">item 1</option>
</select>
</div>
</div>
<div class="page-list">
......@@ -40,7 +48,12 @@ var ADocEditor = function (customConfig) {
htmlTag.innerHTML = htmlStr
shadow.append(htmlTag)
htmlObj = {
header: shadow.querySelector('.header'),
pageList: shadow.querySelector('page-list')
}
console.log('htmlObj', htmlObj)
reConfigure( customConfig )
createNewPage(0)
}
......@@ -63,7 +76,7 @@ var ADocEditor = function (customConfig) {
let scale = shadow.querySelector('.scale')
scale.setAttribute('style', `position: absolute; display: block; width: 100mm; height: 100mm; z-index: -1; opacity: 0; pointer-events: none;`)
let rect = scale.getBoundingClientRect()
pxMmRatio = rect.width/100;
pxMmRatio = rect.width/100;
return configuration
}
......@@ -82,7 +95,8 @@ var ADocEditor = function (customConfig) {
pageObj.canvas.width = configuration.pageSetup.pxWidth
pageObj.canvas.height = configuration.pageSetup.pxHeight
pageList.push( pageObj )
console.log('container', container.querySelector('[adc="pages"]'))
pageObj.canvas.style.width = `${configuration.pageSetup.mmWidth}mm`
shadow.querySelector('.page-list').append( pageObj.canvas )
}
}
......@@ -90,6 +104,7 @@ var ADocEditor = function (customConfig) {
var returnObj = {
}
initialize()
return returnObj
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment