Skip to content

A
a-doc-editor
Commit 1aec68cb by ramdayalmunda
Options

css included

parent 5c44509d
Showing with 71 additions and 317 deletions
dist/assets/a-doc-editor.css
.a-doc-editor { .main {
position: relative;
display: flex; display: flex;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #858585;
flex-direction: column; flex-direction: column;
height: 520px; justify-content: flex-start;
}
.a-doc-editor canvas:focus-visible {
outline: auto rgb(0, 68, 255, 50%);
background: #fff;
} }
.header {
.a-doc-editor .header {
background-color: #f0f0f0;
padding: 3px;
cursor:default;
}
.a-doc-editor .dropdown-label {
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
}
.a-doc-editor .dropdown-list {
display: none;
position: absolute;
z-index: 100;
background-color: #f5f5f5;
border-radius: 5px;
max-height: 300px;
overflow: auto;
top: 100%;
}
.a-doc-editor .dropdown-list.show {
display: block;
width: max-content;
}
.a-doc-editor .dropdown-list .dropdown-option{
padding: 10px;
border-radius: 5px;
}
.a-doc-editor .dropdown-list .dropdown-option:hover{
background: #91d8bd;
}
.a-doc-editor .header .option-bar{
display:flex;
}
.a-doc-editor .header .option{
position: relative; position: relative;
border-bottom: 1px solid rgba(0, 0, 0, 0.137);
padding: 1px;
display: flex;
}
.a-doc-editor .header .option .list-label{
position: relative;
font-size: 0.5em;
border-bottom: 1px solid rgba(0, 0, 0, 0.137);
padding: 1px;
display: flex;
flex-direction: column;
width: 25px;
}
.a-doc-editor .header .option .thumbnail-options{
display: none;
position: absolute;
z-index: 100;
background-color: #f5f5f5;
border-radius: 5px;
max-height: 300px;
overflow: auto;
top: 100%;
}
.a-doc-editor .header .option .thumbnail-options.show {
display: block;
width: max-content;
}
.a-doc-editor .header button{
width: 25px;
}
.a-doc-editor .header .option-button{
width: 25px;
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
}
.a-doc-editor .header .option input{
width: 25px;
}
.a-doc-editor .header .option .font-color{
display: flex;
flex-direction: column;
text-align: center;
}
.a-doc-editor .header .option .color-bar{
display: block; display: block;
width: 20px;
height: 8px;
background-color: green;
}
.a-doc-editor .header .option .font-color input{
position: absolute;
width: 100%; width: 100%;
height: 100%; background-color: red;
opacity: 0;
}
.a-doc-editor .header .option:hover{
padding: 1px;
background-color: white;
cursor: pointer;
}
.a-doc-editor .header .option.selected{
padding: 1px;
background-color: #91d8bd;
cursor: pointer;
}
.a-doc-editor .footer {
overflow: auto;
background-color: #91d8bd;
} }
.a-doc-editor .body { .toolbar {
flex: 1;
position: relative; position: relative;
background-color: #ccc; width: 100%;
overflow: hidden; background: pink;
transition: 300ms;
}
.a-doc-editor .body .left-sidebar {
left: 0;
border-radius: 0 10px 10px 0;
box-shadow: 4px 0px 10px 4px rgba(0, 0, 0, 0.4);
display: flex; display: flex;
flex-direction: column; gap: 10px;
position: absolute;
padding: 8px;
width: 17%;
top: 0;
bottom: 0;
background-color: #8a9a9b;
transition: 300ms;
}
.a-doc-editor .body .left-sidebar.hide {
left: -16%;
transition: 300ms;
} }
.a-doc-editor .body .toggle-sidebar { .toolbar .item {
position: relative;
background: #408640;
border: 1px solid gray;
border-radius: 3px;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 4px;
padding-right: 4px;
margin: 4px;
cursor: pointer; cursor: pointer;
display: flex;
justify-content: space-between;
} }
.popover{
.a-doc-editor .body .right-sidebar {
right: 0;
border-radius: 10px 0 0 10px;
box-shadow: -4px 0px 10px 4px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
position: absolute; position: absolute;
padding: 8px; padding: 5px;
width: 17%; background-color: gray;
top: 0; border: 1px solid purple;
bottom: 0; opacity: 0;
background-color: #8a9a9b; pointer-events: none;
transition: 300ms;
} }
.popover.show{
.a-doc-editor .body .right-sidebar.hide { opacity: 1;
right: -16%; pointer-events: auto;
transition: 300ms; z-index: 10;
} }
.a-doc-editor .body .sidebar-body{ .toolbar .item:hover {
flex: 1; background: #5fad5f;
padding: 8px;
text-align: center;
overflow: auto;
display: flex;
flex-direction: column;
} }
.a-doc-editor .body .hide .sidebar-body{ [adc-type="popover"] {
overflow: hidden; pointer-events: none;
} }
.small-input {
.a-doc-editor .body .scrolling-area { width: 50px;
position: absolute;
padding: 8px;
left: 5%;
right: 5%;
top: 0;
bottom: 0;
text-align: center;
overflow: auto;
} }
.small-btn {
.a-doc-editor .body .scrolling-area canvas.page { width: 25px;
background: #f3f3f3;
margin-bottom: 10px;
width: 100%;
box-shadow: 4px 0px 10px 4px rgba(0, 0, 0, 0.4);
} }
.option {
.a-doc-editor .body .scrolling-area canvas.page:first-child { border: 1px solid black;
margin-top: 10px; padding: 5px;
margin: 5px;
border-radius: 4px;
} }
.option:hover {
.a-doc-editor ::-webkit-scrollbar { background-color: #f5c468;
width: 10px;
/* Set the width of the scrollbar */
} }
.page-list {
/* Thumb */ position: relative;
.a-doc-editor ::-webkit-scrollbar-thumb { display: block;
background-color: #888; overflow-y: auto;
/* Set the color of the scrollbar thumb */ overflow-x: auto;
border-radius: 5px; background: #858585;
/* Set border radius */ gap: 20px;
align-items: center;
} }
/* Track */ .page-list canvas {
.a-doc-editor ::-webkit-scrollbar-track { background-color: #fff;
background-color: #f0f0f0; width: 210mm;
/* Set the color of the scrollbar track */ height: auto;
border-radius: 5px; display: block;
/* Set border radius */ position: relative;
margin: 20px;
} }
.full-screen-overlay { .footer {
position: fixed; position: relative;
top: 0; display: block;
left: 0; width: 100%;
height: 100vh; background-color: red;
width: 100vw;
background-color: rgba(0, 0, 0, 0.7); /* Optional background color */
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: xx-large;
} }
\ No newline at end of file
dist/assets/a-doc-editor2.css deleted 100644 → 0
.main {
position: relative;
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;
}
.toolbar {
position: relative;
width: 100%;
background: pink;
display: flex;
gap: 10px;
}
.toolbar .item {
position: relative;
background: #408640;
border: 1px solid gray;
border-radius: 3px;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 4px;
padding-right: 4px;
margin: 4px;
cursor: pointer;
}
.popover{
position: absolute;
padding: 5px;
background-color: gray;
border: 1px solid purple;
opacity: 0;
pointer-events: none;
}
.popover.show{
opacity: 1;
pointer-events: auto;
z-index: 10;
}
.toolbar .item:hover {
background: #5fad5f;
}
[adc-type="popover"] {
pointer-events: none;
}
.small-input {
width: 50px;
}
.small-btn {
width: 25px;
}
.option {
border: 1px solid black;
padding: 5px;
margin: 5px;
border-radius: 4px;
}
.option:hover {
background-color: #f5c468;
}
.page-list {
position: relative;
display: block;
overflow-y: auto;
overflow-x: auto;
background: #858585;
gap: 20px;
align-items: center;
}
.page-list canvas {
background-color: #fff;
width: 210mm;
height: auto;
display: block;
position: relative;
margin: 20px;
}
.footer {
position: relative;
display: block;
width: 100%;
background-color: red;
}
\ No newline at end of file
dist/index.html
...@@ -4,10 +4,9 @@ ...@@ -4,10 +4,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Document Editor</title> <title>Custom Document Editor</title>
<link rel="stylesheet" href="./assets/a-doc-editor2.css">
<script src="./assets/fontkit.umd.min.js"></script> <script src="./assets/fontkit.umd.min.js"></script>
<script src="./assets/pdf-lib.min.js" ></script> <script src="./assets/pdf-lib.min.js" ></script>
<script src="./assets/a-doc-editor2.js"></script> <script src="./assets/a-doc-editor.js"></script>
<script src="./assets/html-docx.min.js"></script> <script src="./assets/html-docx.min.js"></script>
<link rel="icon" id="favicon" href="favicon.svg" type="image/png"> <link rel="icon" id="favicon" href="favicon.svg" type="image/png">
......
dist/script.js
...@@ -14,6 +14,7 @@ var editor = new ADocEditor({ ...@@ -14,6 +14,7 @@ var editor = new ADocEditor({
container: document.getElementById("user-container-for-editor") container: document.getElementById("user-container-for-editor")
}) })
var extractedData = null var extractedData = null
editor.focusOnPage()
function log() { function log() {
editor.log() editor.log()
......
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