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 { .main {
position: relative; position: relative;
display: block; display: flex;
width: 100%; width: 100%;
height: 100%;
overflow: hidden;
background-color: #858585; 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 { .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; display: block;
width: 100mm; position: relative;
height: 100mm;
background: #b1b1b1;
} }
\ No newline at end of file
let isModule = (typeof module != 'undefined') ? true : false let isModule = (typeof module != 'undefined') ? true : false
if (!isModule) console.log('Browser Environment') if (!isModule) console.log('Browser Environment')
var ADocEditor = function (customConfig) { var ADocEditor = function (customConfig) {
var container, shadow, pxMmRatio, configuration, htmlStr, htmlTag; var container, shadow, pxMmRatio, configuration, htmlStr, htmlTag, htmlObj={};
var paperSizes = { var paperSizes = {
"A4": { mmWidth: 210, mmHeight: 297 }, "A4": { mmWidth: 210, mmHeight: 297 },
} }
...@@ -18,7 +18,15 @@ var ADocEditor = function (customConfig) { ...@@ -18,7 +18,15 @@ var ADocEditor = function (customConfig) {
htmlStr = /*html*/` htmlStr = /*html*/`
<div class="scale"></div> <div class="scale"></div>
<div class="header"> <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>
<div class="page-list"> <div class="page-list">
...@@ -40,7 +48,12 @@ var ADocEditor = function (customConfig) { ...@@ -40,7 +48,12 @@ var ADocEditor = function (customConfig) {
htmlTag.innerHTML = htmlStr htmlTag.innerHTML = htmlStr
shadow.append(htmlTag) shadow.append(htmlTag)
htmlObj = {
header: shadow.querySelector('.header'),
pageList: shadow.querySelector('page-list')
}
console.log('htmlObj', htmlObj)
reConfigure( customConfig ) reConfigure( customConfig )
createNewPage(0) createNewPage(0)
} }
...@@ -82,7 +95,8 @@ var ADocEditor = function (customConfig) { ...@@ -82,7 +95,8 @@ var ADocEditor = function (customConfig) {
pageObj.canvas.width = configuration.pageSetup.pxWidth pageObj.canvas.width = configuration.pageSetup.pxWidth
pageObj.canvas.height = configuration.pageSetup.pxHeight pageObj.canvas.height = configuration.pageSetup.pxHeight
pageList.push( pageObj ) 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) { ...@@ -90,6 +104,7 @@ var ADocEditor = function (customConfig) {
var returnObj = { var returnObj = {
} }
initialize() initialize()
return returnObj 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