diff options
Diffstat (limited to 'gerbonara/data/protoserve.html')
| -rw-r--r-- | gerbonara/data/protoserve.html | 384 |
1 files changed, 315 insertions, 69 deletions
diff --git a/gerbonara/data/protoserve.html b/gerbonara/data/protoserve.html index 757e292..1dba90a 100644 --- a/gerbonara/data/protoserve.html +++ b/gerbonara/data/protoserve.html @@ -32,7 +32,8 @@ body { user-select: none; display: grid; grid-template-columns: 10fr 1fr 1fr; - align-content: start + align-content: start; + overflow-y: scroll; } label { @@ -51,7 +52,7 @@ input { align-self: start; } -.group > h4 { +.group > h4, .group > h5 { text-align: center; margin: 5px; grid-column-start: 1; @@ -100,10 +101,40 @@ input { display: none; } -.group.proportional > div > .proportion { +.proportional > div > .proportion { display: grid; } +.split-sides .double-sided-only { + display: none; +} + +.split-sides > .placeholder .area-controls { + display: none; +} + +.board > .placeholder > .area-controls { + display: none; +} + +.area-controls .area-move { + display: none; +} + +.area-controls .area-move::before { + content: "/"; + padding: 0 5px 0 5px; +} + +.group.proportional > .group > .area-controls .area-move { + display: block; +} + +.content.area-controls { + flex-direction: row; + justify-content: center; +} + .field > input, .field > select { max-width: 5em; text-align: right; margin: 0 5px 0 5px; @@ -142,8 +173,15 @@ input { grid-column-end: span 3; } -a.drop-target { +.drop-target { + grid-column-start: 1; + grid-column-end: span 3; text-align: center; + display: none; +} + +.group.drop-enabled > .drop-target { + display: block; } .placeholder hr { @@ -151,11 +189,20 @@ a.drop-target { border: none; border-top: 1px solid hsl(0 0% 60%); } + +#controls.move-in-progress input { + background-color: hsl(0 0% 85%); +} + +#controls.move-in-progress { + color: hsl(0 0% 60%); +} + </style> </head> <body> <div id="controls"> - <div class="group"> + <div class="group board"> <h4>Board settings</h4> <label id="g-board-units">Units <select value="metric"> @@ -213,70 +260,7 @@ a.drop-target { </div> <h4>Content</h4> - <div class="group proportional"> - <h4>Proportional Layout</h4> - <label>Direction - <select name="direction" value="horizontal"> - <option value="h">horizontal</option> - <option value="v">vertical</option> - </select> - </label> - - <div class="group placeholder"> - <h4>Empty area</h4> - <label class="proportion">Proportion - <input type="text" name="layout_prop"> - </label> - <div class="content"> - <a href="#">Add Layout</a> - <hr/> - <a href="#">Add SMD area</a> - <a href="#">Add THT area</a> - <a href="#">Add Manhattan area</a> - <a href="#">Add THT Flower area</a> - </div> - </div> - - <div class="group smd-area"> - <h4>SMD area</h4> - <label class="proportion">Proportion - <input type="text" name="layout_prop"> - </label> - <label>Pitch X - <input type="text" name="pitch_x" placeholder="length"> - <span class="unit metric">mm</span> - <span class="unit us">mil</span> - </label> - <label>Pitch Y - <input type="text" name="pitch_y" placeholder="length"> - <span class="unit metric">mm</span> - <span class="unit us">mil</span> - </label> - <label>Clearance - <input type="text" name="clearance" placeholder="length"> - <span class="unit metric">mm</span> - <span class="unit us">mil</span> - </label> - <label>Pad shape - <select name="pad_shape" value="rect"> - <option value="rect">Rectangle</option> - <option value="circle">Circle</option> - <option value="obround">Obround</option> - </select> - </label> - <label>Pad width - <input type="text" name="pad_w" placeholder="length"> - <span class="unit metric">mm</span> - <span class="unit us">mil</span> - </label> - <label>Pad height - <input type="text" name="pad_h" placeholder="length"> - <span class="unit metric">mm</span> - <span class="unit us">mil</span> - </label> - </div> - <a class="content" href="#">Add element</a> - </div> + <div class="group placeholder"></div> </div> </div> <div id="preview"> @@ -293,6 +277,7 @@ a.drop-target { Gerbers </a> </div> + <template id="tpl-drop-target"> <a class="drop-target" href="#"> <svg viewBox="0 0 532 532" width="1em" xmlns="http://www.w3.org/2000/svg"> @@ -301,6 +286,161 @@ a.drop-target { </svg> </a> </template> + + <template id="tpl-g-layout"> + <div class="group proportional"> + <h4>Proportional Layout</h4> + <span class="content area-controls">(<a href="#" class="area-remove">Remove</a><a href="#" class="area-move">Move</a>)</span> + <label class="proportion">Proportion + <input type="text" name="layout_prop" value="1"> + </label> + + <h5>Layout settings</h4> + <label>Direction + <select name="direction" value="horizontal"> + <option value="h">horizontal</option> + <option value="v">vertical</option> + </select> + </label> + + <h5>Content</h4> + <div class="drop-target"></div> + <div class="placeholder"></div> + <div class="drop-target"></div> + <div class="placeholder"></div> + <div class="drop-target"></div> + <a class="content add-element" href="#">Add element</a> + </div> + </template> + + <template id="tpl-g-twoside"> + <div class="group split-sides"> + <h4>Split front and back</h4> + <span class="content area-controls">(<a href="#" class="area-remove">Remove</a><a href="#" class="area-move">Move</a>)</span> + <label class="proportion">Proportion + <input type="text" name="layout_prop" value="1"> + </label> + + <h5>Front</h5> + <div class="placeholder"></div> + <h5>Back</h5> + <div class="placeholder"></div> + </div> + </template> + + <template id="tpl-g-placeholder"> + <div class="group placeholder"> + <h4>Empty area</h4> + <span class="content area-controls">(<a href="#" class="area-remove">Remove</a><a href="#" class="area-move">Move</a>)</span> + <label class="proportion">Proportion + <input type="text" name="layout_prop" value="1"> + </label> + + <div class="content"> + <a href="#" data-placeholder="layout">Create Layout</a> + <a href="#" data-placeholder="twoside" class="double-sided-only">Split front and back</a> + <hr/> + <a href="#" data-placeholder="smd">SMD area</a> + <a href="#" data-placeholder="tht" class="double-sided-only">THT area</a> + <a href="#" data-placeholder="manhattan">Manhattan area</a> + <a href="#" data-placeholder="flower"class="double-sided-only">THT Flower area</a> + </div> + </div> + </template> + + <template id="tpl-g-smd"> + <div class="group smd"> + <h4>SMD area</h4> + <span class="content area-controls">(<a href="#" class="area-remove">Remove</a><a href="#" class="area-move">Move</a>)</span> + <label class="proportion">Proportion + <input type="text" name="layout_prop" value="1"> + </label> + + <h5>Area Settings</h5> + <label>Pitch X + <input type="text" name="pitch_x" placeholder="length"> + <span class="unit metric">mm</span> + <span class="unit us">mil</span> + </label> + <label>Pitch Y + <input type="text" name="pitch_y" placeholder="length"> + <span class="unit metric">mm</span> + <span class="unit us">mil</span> + </label> + <label>Clearance + <input type="text" name="clearance" placeholder="length"> + <span class="unit metric">mm</span> + <span class="unit us">mil</span> + </label> + <label>Pad shape + <select name="pad_shape" value="rect"> + <option value="rect">Rectangle</option> + <option value="circle">Circle</option> + <option value="obround">Obround</option> + </select> + </label> + <label>Pad width + <input type="text" name="pad_w" placeholder="length"> + <span class="unit metric">mm</span> + <span class="unit us">mil</span> + </label> + <label>Pad height + <input type="text" name="pad_h" placeholder="length"> + <span class="unit metric">mm</span> + <span class="unit us">mil</span> + </label> + </div> + </template> + + <template id="tpl-g-tht"> + <div class="group tht"> + <h4>THT area</h4> + <span class="content area-controls">(<a href="#" class="area-remove">Remove</a><a href="#" class="area-move">Move</a>)</span> + <label class="proportion">Proportion + <input type="text" name="layout_prop" value="1"> + </label> + + <h5>Area Settings</h5> + <label>Pitch X + <input type="text" name="pitch_x" placeholder="length"> + <span class="unit metric">mm</span> + <span class="unit us">mil</span> + </label> + <label>Pitch Y + <input type="text" name="pitch_y" placeholder="length"> + <span class="unit metric">mm</span> + <span class="unit us">mil</span> + </label> + <label>Clearance + <input type="text" name="clearance" placeholder="length"> + <span class="unit metric">mm</span> + <span class="unit us">mil</span> + </label> + <label>Pad shape + <select name="pad_shape" value="rect"> + <option value="rect">Rectangle</option> + <option value="circle">Circle</option> + <option value="obround">Obround</option> + </select> + </label> + <label>Pad width + <input type="text" name="pad_w" placeholder="length"> + <span class="unit metric">mm</span> + <span class="unit us">mil</span> + </label> + <label>Pad height + <input type="text" name="pad_h" placeholder="length"> + <span class="unit metric">mm</span> + <span class="unit us">mil</span> + </label> + <label class="shape-rect">Corner radius + <input type="text" name="pad_h" placeholder="length"> + <span class="unit metric">mm</span> + <span class="unit us">mil</span> + </label> + </div> + </template> + <script> document.querySelectorAll('.expand').forEach((elem) => { const checkbox = elem.querySelector(':first-child > input'); @@ -317,6 +457,112 @@ a.drop-target { elem.classList.add('collapsed'); } }); + + let g_dropElement = null; + + function hookupAreaRemove(node) { + for (const bt of node.querySelectorAll('a.area-remove')) { + bt.addEventListener('click', (evt) => { + console.log(evt); + let elem = evt.target.closest('.group'); + if (elem.parentElement && elem.parentElement.matches('.proportional')) { + let sibling = elem.previousElementSibling; + if (sibling.matches('.drop-target')) { + sibling.remove(); + } + elem.remove(); + } else { + elem.replaceWith(createPlaceholder()); + } + }); + } + } + + function createDropTarget() { + const node = document.querySelector('#tpl-drop-target').content.cloneNode(true); + node.querySelector('a').addEventListener('click', (evt) => { + if (g_dropElement != null) { + const target = evt.target.closest('a'); + + let sibling = g_dropElement.previousElementSibling; + if (sibling.matches('.drop-target')) { + if (sibling == target) { + return; + } + sibling.remove(); + } + g_dropElement.remove(); + g_dropElement.querySelector('a.area-move').innerText = "Move"; + + target.before(sibling); + target.before(g_dropElement); + + document.querySelector('#controls').classList.remove('move-in-progress'); + document.querySelector('.group.drop-enabled').classList.remove('drop-enabled'); + g_dropElement = null; + } + }); + return node; + } + + function hookupAreaMove(node) { + for (const bt of node.querySelectorAll('a.area-move')) { + bt.addEventListener('click', (evt) => { + const controls = document.querySelector('#controls'); + const group = evt.target.closest('.group'); + + if (g_dropElement == null) { + controls.classList.add('move-in-progress'); + group.parentElement.classList.add('drop-enabled'); + g_dropElement = group; + evt.target.innerText = "Cancel move"; + } else { + controls.classList.remove('move-in-progress'); + group.parentElement.classList.remove('drop-enabled'); + g_dropElement = null; + evt.target.innerText = "Move"; + } + }); + } + } + + function createPlaceholder() { + const node = document.querySelector('#tpl-g-placeholder').content.cloneNode(true); + + hookupAreaRemove(node); + hookupAreaMove(node); + + for (const bt of node.querySelectorAll('.placeholder a[data-placeholder]')) { + bt.addEventListener('click', (evt) => { + const template = document.querySelector(`#tpl-g-${evt.target.getAttribute('data-placeholder')}`); + const node = template.content.cloneNode(true); + + for (const elem of node.querySelectorAll('div.placeholder')) { + elem.replaceWith(createPlaceholder()); + } + + for (const elem of node.querySelectorAll('div.drop-target')) { + elem.replaceWith(createDropTarget()); + } + + hookupAreaRemove(node); + hookupAreaMove(node); + + for (const bt of node.querySelectorAll('a.add-element')) { + bt.addEventListener('click', (evt) => { + evt.target.before(createPlaceholder()); + evt.target.before(createDropTarget()); + }); + } + + evt.target.closest('.group').replaceWith(node); + }); + } + + return node; + } + + document.querySelector('div.placeholder').replaceWith(createPlaceholder()); </script> </body> </html> |