Skip to content

Commit 96f169b

Browse files
MikaelMayerMikaelMayer
committed
Preview of text elements
1 parent af297b6 commit 96f169b

File tree

1 file changed

+61
-29
lines changed

1 file changed

+61
-29
lines changed

‎server.elm‎

Lines changed: 61 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -302,9 +302,7 @@ boolToCheck = Update.bijection (case of "true" -> [["checked", ""]]; _ -> []) (c
302302

303303
-- Everything inside the modify menu is generated and is not visible to Editor
304304
editionmenu thesource = [
305-
<div id="modify-menu" list-ghost-attributes="style class" sourcecontent=@thesource contenteditable="false">
306-
<div class="information" children-are-ghosts="true"></div>
307-
</div>,
305+
<div id="modify-menu" list-ghost-attributes="style class" sourcecontent=@thesource contenteditable="false" children-are-ghosts="true"></div>,
308306
<div id="context-menu" children-are-ghosts="true" list-ghost-attributes="style class" contenteditable="false"></div>,
309307
<menu id="themenu" ignore-modifications="true" class="edittoolbar" contenteditable="false">
310308
@(if iscloseable then [] else closeEditBox)
@@ -519,8 +517,14 @@ div#modify-menu {
519517
.modify-menu-icon:hover {
520518
background-color: var(--context-button-color-hover);
521519
}
522-
div#modify-menu {
523-
overflow-y: scroll;
520+
div#modify-menu > div.modify-menu-icons {
521+
height: var(--context-menu-height);
522+
width: 100%;
523+
overflow-x: auto;
524+
}
525+
div#modify-menu > div.information {
526+
overflow-y: auto;
527+
max-height: calc(100% - var(--context-menu-height));
524528
}
525529
div#modify-menu.visible {
526530
transform: translate(0%, 0%);
@@ -550,8 +554,18 @@ div#modify-menu div.keyvalues > div.keyvalueadder:hover {
550554
}
551555
div#modify-menu input {
552556
padding: 4px;
553-
width: 100%;
554-
font-size: 1em;
557+
}
558+
div#modify-menu #newTagName {
559+
width: 50%;
560+
font-size: 1em;
561+
}
562+
div#modify-menu .tagname-info {
563+
color: #d4d4d4;
564+
display: inline-block;
565+
width: 50%;
566+
white-space: nowrap;
567+
overflow: hidden;
568+
text-overflow: ellipsis;
555569
}
556570
div#modify-menu input[type=radio] {
557571
width: initial;
@@ -663,6 +677,7 @@ div#context-menu .context-menu-button.inert:hover, div#modify-menu .modify-menu-
663677
right: initial;
664678
height: 30%;
665679
width: 100%;
680+
min-height: 350px;
666681
transform: translate(0px, 100%);
667682
}
668683
div.bottom-placeholder {
@@ -1549,8 +1564,8 @@ editionscript = """
15491564
let model = editor_model;
15501565
var clickedElem = model.clickedElem;
15511566
var contextMenu = document.querySelector("#context-menu");
1552-
var interactionDiv = document.querySelector("#modify-menu > .information");
1553-
if(!interactionDiv || !contextMenu) return;
1567+
var modifyMenuDiv = document.querySelector("#modify-menu");
1568+
if(!modifyMenuDiv || !contextMenu) return;
15541569
document.querySelectorAll("[ghost-clicked=true]").forEach(e => e.removeAttribute("ghost-clicked"));
15551570
if(clickedElem && clickedElem.nodeType === 1) {
15561571
clickedElem.setAttribute("ghost-clicked", "true");
@@ -1570,24 +1585,39 @@ editionscript = """
15701585
if(!f || f.startOffset !== f.endOffset && f.startContainer !== f.endContainer) return;
15711586
return f;
15721587
})();
1573-
1574-
function summary(element) {
1588+
function textPreview(element, maxLength) {
1589+
let x = element.innerText;
1590+
let result = "'" + x + "'";
1591+
if(typeof maxLength !== "undefined" && result.length > maxLength) {
1592+
return result.substring(0, maxLength) + "...'";
1593+
}
1594+
return result;
1595+
}
1596+
function summary(element, idAndClasses, maxLength) {
15751597
var summary = element.tagName.toLowerCase();
1576-
if(element.getAttribute("id")) {
1598+
if(idAndClasses && element.getAttribute("id")) {
15771599
summary += "#" + element.getAttribute("id");
15781600
}
1579-
if(element.getAttribute("class") && element.getAttribute("class").trim().length) {
1580-
summary += "." + element.getAttribute("class").split(".");
1601+
var elemClass = element.getAttribute("class");
1602+
if(idAndClasses && elemClass && elemClass.trim().length) {
1603+
summary += "." + elemClass.split(/\s+/g).join(".");
15811604
}
1605+
summary += " " + textPreview(element);
1606+
maxLength = maxLength || 80;
1607+
summary = summary.substring(0, maxLength || 80) + (summary.length > 80 ? "..." : "");
15821608
return summary;
15831609
}
1584-
let addInteractionDivButton = function(innerHTML, attributes, properties) {
1610+
modifyMenuDiv.innerHTML = "";
1611+
let modifyMenuIconsDiv = el("div", {"class":"modify-menu-icons"});
1612+
let interactionDiv = el("div", {"class": "information"});
1613+
modifyMenuDiv.append(modifyMenuIconsDiv);
1614+
modifyMenuDiv.append(interactionDiv);
1615+
let addModifyMenuIcon = function(innerHTML, attributes, properties) {
15851616
let button = el("div", attributes, [], properties);
15861617
button.classList.add("modify-menu-button");
15871618
button.innerHTML = innerHTML;
1588-
interactionDiv.append(button);
1619+
modifyMenuIconsDiv.append(button);
15891620
}
1590-
interactionDiv.innerHTML = "";
15911621
var panelOpenCloseIcon = function() {
15921622
return document.querySelector("#modify-menu").classList.contains("visible") ?
15931623
onMobile() ? closeBottomSVG : closeRightSVG
@@ -1601,15 +1631,15 @@ editionscript = """
16011631
alwaysVisibleButtonIndex++;
16021632
return result;
16031633
}
1604-
addInteractionDivButton(
1634+
addModifyMenuIcon(
16051635
panelOpenCloseIcon(),
16061636
{title: "Open/close settings tab", "class": "inert", style: nextVisibleBarButtonPosStyle() },
16071637
{onclick: (contextMenu => function(event) {
16081638
document.querySelector("#modify-menu").classList.toggle("visible");
16091639
this.innerHTML = panelOpenCloseIcon();
16101640
})(contextMenu)
16111641
});
1612-
addInteractionDivButton(
1642+
addModifyMenuIcon(
16131643
gearSVG,
16141644
{title: "Advanced", "class": "inert" + (editor_model.advanced ? " active": ""),
16151645
style: nextVisibleBarButtonPosStyle()
@@ -1620,7 +1650,7 @@ editionscript = """
16201650
updateInteractionDiv();
16211651
})(clickedElem)}
16221652
)
1623-
addInteractionDivButton(saveSVG,
1653+
addModifyMenuIcon(saveSVG,
16241654
{title: "Save", "class": "saveButton" + (editor_model.canSave ? "" : " disabled"),
16251655
style: nextVisibleBarButtonPosStyle()
16261656
},
@@ -1638,15 +1668,15 @@ editionscript = """
16381668
// TODO: Source code (expandable - can use Ace Editor)
16391669
// TODO: Options: Ask questions, Autosave.
16401670
// TODO: Report issue. About.
1641-
addInteractionDivButton(sourceSVG,
1671+
addModifyMenuIcon(sourceSVG,
16421672
{"class": "tagName", title: model.displaySource ? "Hide source" : "Show Source"},
16431673
{onclick: function(event) { editor_model.displaySource = !editor_model.displaySource; updateInteractionDiv() } }
16441674
);
1645-
addInteractionDivButton(reloadSVG,
1675+
addModifyMenuIcon(reloadSVG,
16461676
{"class": "tagName", title: "Reload the current page"},
16471677
{onclick: function(event) { reloadPage() } }
16481678
);
1649-
addInteractionDivButton(folderSVG,
1679+
addModifyMenuIcon(folderSVG,
16501680
{"class": "tagName", title: "List files in current directory"},
16511681
{onclick: function(event) {
16521682
let u = new URL(location.href);
@@ -1784,7 +1814,7 @@ editionscript = """
17841814
if(clickedElem && clickedElem.parentElement) {
17851815
let parent = selectionRange ? clickedElem : clickedElem.parentElement;
17861816
if(parent.tagName === "TBODY" && parent.parentElement && parent.parentElement.tagName === "TABLE") parent = parent.parentElement;
1787-
addInteractionDivButton(`<svg class="context-menu-icon" width="40" height="30">
1817+
addModifyMenuIcon(`<svg class="context-menu-icon" width="40" height="30">
17881818
<path d="M 8,19 8,22 11,22 M 12,18 8,22 M 8,10 8,7 11,7 M 12,10 8,7 M 27,7 30,7 30,10 M 26,10 30,7 M 31,19 31,22 28,22 M 26,18 31,22 M 12,12 12,10 M 12,16 12,14 M 14,18 12,18 M 18,18 16,18 M 22,18 20,18 M 26,18 24,18 M 26,14 26,16 M 26,10 26,12 M 22,10 24,10 M 18,10 20,10 M 14,10 16,10 M 5,5 35,5 35,25 5,25 Z"/></svg>`,
17891819
{title: "Select parent (" + summary(parent) + ")", "class": "inert"},
17901820
{onclick: ((c, parent) => event => {
@@ -1798,7 +1828,7 @@ editionscript = """
17981828
);
17991829
}
18001830
if(!selectionRange && clickedElem && clickedElem.previousElementSibling) {
1801-
addInteractionDivButton(`<svg class="context-menu-icon fill" width="40" height="30">
1831+
addModifyMenuIcon(`<svg class="context-menu-icon fill" width="40" height="30">
18021832
<path d="m 10,14 3,3 4,-4 0,14 6,0 0,-14 4,4 3,-3 L 20,4 Z"/></svg>`,
18031833
{title: "Select previous sibling (" + summary(clickedElem.previousElementSibling) + ")", class: "inert"},
18041834
{onclick: ((c, contextMenu) => (event) => {
@@ -1811,7 +1841,7 @@ editionscript = """
18111841
});
18121842
}
18131843
if(!selectionRange && clickedElem && clickedElem.nextElementSibling) {
1814-
addInteractionDivButton(`<svg class="context-menu-icon fill" width="40" height="30">
1844+
addModifyMenuIcon(`<svg class="context-menu-icon fill" width="40" height="30">
18151845
<path d="m 10,17 3,-3 4,4 0,-14 6,0 0,14 4,-4 3,3 -10,10 z"/></svg>`,
18161846
{title: "Select next sibling (" + summary(clickedElem.nextElementSibling) + ")", class: "inert"},
18171847
{onclick: ((c, contextMenu) => (event) => {
@@ -1824,7 +1854,7 @@ editionscript = """
18241854
});
18251855
}
18261856
if(!selectionRange && clickedElem && clickedElem.children && clickedElem.children.length > 0) {
1827-
addInteractionDivButton(`<svg class="context-menu-icon" width="40" height="30">
1857+
addModifyMenuIcon(`<svg class="context-menu-icon" width="40" height="30">
18281858
<path d="M 28,22 27,19 30,19 M 33,23 27,19 M 8,20 11,19 11,22 M 7,24 11,19 M 10,6 11,9 8,10 M 28,6 27,9 30,10 M 33,6 27,9 M 6,6 11,9 M 5,15 5,10 M 5,25 5,20 M 15,25 10,25 M 25,25 20,25 M 35,25 30,25 M 35,15 35,20 M 35,5 35,10 M 25,5 30,5 M 15,5 20,5 M 5,5 10,5 M 12,10 26,10 26,18 12,18 Z"/></svg>`,
18291859
{title: "Select first child (" + summary(clickedElem.children[0]) + ")", "class": "inert"},
18301860
{onclick: (c => event => {
@@ -1840,10 +1870,12 @@ editionscript = """
18401870
}
18411871
interactionDiv.append(el("br"));
18421872
if(clickedElem) {
1843-
interactionDiv.append(
1873+
interactionDiv.append(el("div", {"class": "tagname-summary"}, [
18441874
el("input", {"id":"newTagName", "class": "inline-input", "type":"text", value: clickedElem.tagName.toLowerCase(), title:"This element's tag name"}, [], { onkeyup() {
18451875
document.querySelector("#applyNewTagName").classList.toggle("visible", this.value !== this.getAttribute("value") && this.value.match(/^\w+$/));
1846-
}}));
1876+
}}),
1877+
el("span", {"class": "tagname-info"}, textPreview(clickedElem, 50))
1878+
]));
18471879
}
18481880
interactionDiv.append(el("input", {"type": "button", id: "applyNewTagName", value: "Apply new tag name"}, [], {onclick() {
18491881
let newel = el(document.querySelector("#newTagName").value);

0 commit comments

Comments
 (0)