sbrl-github/Pepperminty-Wiki
sbrl-github/Pepperminty-Wiki
1
0
Fork 0
mirror of https://github.com/sbrl/Pepperminty-Wiki.git synced 2024-11-22 04:23:01 +00:00
Code Activity

Make editing textarea automatically expand with it's contents!

Browse source
This commit is contained in:
Starbeamrainbowlabs 2017-03-05 16:15:50 +00:00
parent e4c5250d47
commit 191d5370e0
4 changed files with 56 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
build/index.php
View file

@ -267,15 +267,17 @@ a.redlink:visited { color: rgb(130, 15, 15); /*#8b1a1a*/ }
.search-context { max-height: 20em; overflow: hidden; } .search-context { max-height: 20em; overflow: hidden; }
.search-context::after { content: ""; position: absolute; bottom: 0; width: 100%; height: 3em; display: block; background: linear-gradient(to bottom, transparent, #faf8fb); pointer-events: none; } .search-context::after { content: ""; position: absolute; bottom: 0; width: 100%; height: 3em; display: block; background: linear-gradient(to bottom, transparent, #faf8fb); pointer-events: none; }
textarea[name=content] { height: 30em; } textarea[name=content] { resize: none; }
.fit-text-mirror { position: absolute; left: -10000vw; word-wrap: break-word; white-space: pre-wrap; }
main label:not(.link-display-label) { display: inline-block; min-width: 16rem; } main label:not(.link-display-label) { display: inline-block; min-width: 16rem; }
input[type=text]:not(.link-display), input[type=password], input[type=url], input[type=email], input[type=number], textarea { margin: 0.5rem 0; } input[type=text]:not(.link-display), input[type=password], input[type=url], input[type=email], input[type=number], textarea { margin: 0.5rem 0; }
input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea, #search-box { padding: 0.5rem 0.8rem; background: #d5cbf9; border: 0; border-radius: 0.3rem; font-size: 1rem; color: #442772; } input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea, textarea[name=content] + pre, #search-box { padding: 0.5rem 0.8rem; background: #d5cbf9; border: 0; border-radius: 0.3rem; font-size: 1rem; color: #442772; }
textarea { min-height: 10em; line-height: 1.3em; font-size: 1.25rem; } textarea { min-height: 10em; line-height: 1.3em; font-size: 1.25rem; }
textarea, textarea ~ input[type=submit], #search-box { width: calc(100% - 0.3rem); box-sizing: border-box; } textarea, textarea[name=content] + pre, textarea ~ input[type=submit], #search-box { width: calc(100% - 0.3rem); box-sizing: border-box; }
textarea ~ input[type=submit] { margin: 0.5rem 0; padding: 0.5rem; font-weight: bolder; } textarea ~ input[type=submit] { margin: 0.5rem 0; padding: 0.5rem; font-weight: bolder; }
.editform input[type=text] { width: calc(100% - 0.3rem); box-sizing: border-box; } .editform input[type=text] { width: calc(100% - 0.3rem); box-sizing: border-box; }
.editfor textarea { min-height: 35rem; }
.file-gallery { margin: 0.5em; padding: 0.5em; list-style-type: none; } .file-gallery { margin: 0.5em; padding: 0.5em; list-style-type: none; }
.file-gallery > li { display: inline-block; min-width: attr(data-gallery-width); padding: 1em; text-align: center; } .file-gallery > li { display: inline-block; min-width: attr(data-gallery-width); padding: 1em; text-align: center; }
@ -4405,6 +4407,7 @@ register_module([
$content .= "<form method='post' action='index.php?action=save&page=" . rawurlencode($page) . "&action=save' class='editform'> $content .= "<form method='post' action='index.php?action=save&page=" . rawurlencode($page) . "&action=save' class='editform'>
<input type='hidden' name='prev-content-hash' value='" . sha1($pagetext) . "' /> <input type='hidden' name='prev-content-hash' value='" . sha1($pagetext) . "' />
<textarea name='content' autofocus tabindex='1'>$pagetext</textarea> <textarea name='content' autofocus tabindex='1'>$pagetext</textarea>
<pre class='fit-text-mirror'></pre>
<input type='text' name='tags' value='$page_tags' placeholder='Enter some tags for the page here. Separate them with commas.' title='Enter some tags for the page here. Separate them with commas.' tabindex='2' /> <input type='text' name='tags' value='$page_tags' placeholder='Enter some tags for the page here. Separate them with commas.' title='Enter some tags for the page here. Separate them with commas.' tabindex='2' />
<p class='editing-message'>$settings->editing_message</p> <p class='editing-message'>$settings->editing_message</p>
<input name='submit-edit' type='submit' value='Save Page' tabindex='3' /> <input name='submit-edit' type='submit' value='Save Page' tabindex='3' />
@ -4422,6 +4425,25 @@ register_module([
}); });
});"); });");
// Utilise the mirror to automatically resize the textarea to fit it's content
page_renderer::AddJSSnippet('function updateTextSize(textarea, mirror, event) {
let textareaFontSize = parseFloat(getComputedStyle(textarea).fontSize);
let textareaWidth = textarea.getBoundingClientRect().width;// - parseInt(textarea.style.padding);
mirror.style.width = `${textareaWidth}px`;
mirror.innerText = textarea.value;
textarea.style.height = `${mirror.offsetHeight + (textareaFontSize * 5)}px`;
}
function trackTextSize(textarea) {
let mirror = textarea.nextElementSibling;
textarea.addEventListener("input", updateTextSize.bind(null, textarea, mirror));
updateTextSize(textarea, mirror, null);
}
window.addEventListener("load", function(event) {
trackTextSize(document.querySelector("textarea[name=content]"));
});
');
// ~ // ~
/// ~~~ Smart saving ~~~ /// /// ~~~ Smart saving ~~~ ///
@ -5653,7 +5675,7 @@ register_module([
register_module([ register_module([
"name" => "Parsedown", "name" => "Parsedown",
"version" => "0.9.7", "version" => "0.9.8",
"author" => "Emanuil Rusev & Starbeamrainbowlabs", "author" => "Emanuil Rusev & Starbeamrainbowlabs",
"description" => "An upgraded (now default!) parser based on Emanuil Rusev's Parsedown Extra PHP library (https://github.com/erusev/parsedown-extra), which is licensed MIT. Please be careful, as this module adds some weight to your installation, and also *requires* write access to the disk on first load.", "description" => "An upgraded (now default!) parser based on Emanuil Rusev's Parsedown Extra PHP library (https://github.com/erusev/parsedown-extra), which is licensed MIT. Please be careful, as this module adds some weight to your installation, and also *requires* write access to the disk on first load.",
"id" => "parser-parsedown", "id" => "parser-parsedown",

6
module_index.json
View file

@ -140,7 +140,7 @@
"author": "Starbeamrainbowlabs", "author": "Starbeamrainbowlabs",
"description": "Allows you to edit pages by adding the edit and save actions. You should probably include this one.", "description": "Allows you to edit pages by adding the edit and save actions. You should probably include this one.",
"id": "page-edit", "id": "page-edit",
"lastupdate": 1487451276, "lastupdate": 1488730217,
"optional": false "optional": false
}, },
{ {
@ -235,11 +235,11 @@
}, },
{ {
"name": "Parsedown", "name": "Parsedown",
"version": "0.9.7", "version": "0.9.8",
"author": "Emanuil Rusev & Starbeamrainbowlabs", "author": "Emanuil Rusev & Starbeamrainbowlabs",
"description": "An upgraded (now default!) parser based on Emanuil Rusev's Parsedown Extra PHP library (https:\/\/github.com\/erusev\/parsedown-extra), which is licensed MIT. Please be careful, as this module adds some weight to your installation, and also *requires* write access to the disk on first load.", "description": "An upgraded (now default!) parser based on Emanuil Rusev's Parsedown Extra PHP library (https:\/\/github.com\/erusev\/parsedown-extra), which is licensed MIT. Please be careful, as this module adds some weight to your installation, and also *requires* write access to the disk on first load.",
"id": "parser-parsedown", "id": "parser-parsedown",
"lastupdate": 1488019684, "lastupdate": 1488019975,
"optional": false "optional": false
} }
] ]

20
modules/page-edit.php
View file

@ -111,6 +111,7 @@ register_module([
$content .= "<form method='post' action='index.php?action=save&page=" . rawurlencode($page) . "&action=save' class='editform'> $content .= "<form method='post' action='index.php?action=save&page=" . rawurlencode($page) . "&action=save' class='editform'>
<input type='hidden' name='prev-content-hash' value='" . sha1($pagetext) . "' /> <input type='hidden' name='prev-content-hash' value='" . sha1($pagetext) . "' />
<textarea name='content' autofocus tabindex='1'>$pagetext</textarea> <textarea name='content' autofocus tabindex='1'>$pagetext</textarea>
<pre class='fit-text-mirror'></pre>
<input type='text' name='tags' value='$page_tags' placeholder='Enter some tags for the page here. Separate them with commas.' title='Enter some tags for the page here. Separate them with commas.' tabindex='2' /> <input type='text' name='tags' value='$page_tags' placeholder='Enter some tags for the page here. Separate them with commas.' title='Enter some tags for the page here. Separate them with commas.' tabindex='2' />
<p class='editing-message'>$settings->editing_message</p> <p class='editing-message'>$settings->editing_message</p>
<input name='submit-edit' type='submit' value='Save Page' tabindex='3' /> <input name='submit-edit' type='submit' value='Save Page' tabindex='3' />
@ -128,6 +129,25 @@ register_module([
}); });
});"); });");
// Utilise the mirror to automatically resize the textarea to fit it's content
page_renderer::AddJSSnippet('function updateTextSize(textarea, mirror, event) {
let textareaFontSize = parseFloat(getComputedStyle(textarea).fontSize);
let textareaWidth = textarea.getBoundingClientRect().width;// - parseInt(textarea.style.padding);
mirror.style.width = `${textareaWidth}px`;
mirror.innerText = textarea.value;
textarea.style.height = `${mirror.offsetHeight + (textareaFontSize * 5)}px`;
}
function trackTextSize(textarea) {
let mirror = textarea.nextElementSibling;
textarea.addEventListener("input", updateTextSize.bind(null, textarea, mirror));
updateTextSize(textarea, mirror, null);
}
window.addEventListener("load", function(event) {
trackTextSize(document.querySelector("textarea[name=content]"));
});
');
// ~ // ~
/// ~~~ Smart saving ~~~ /// /// ~~~ Smart saving ~~~ ///

10
theme_default.css
View file

@ -61,15 +61,17 @@ a.redlink:visited { color: rgb(130, 15, 15); /*#8b1a1a*/ }
.search-context { max-height: 20em; overflow: hidden; } .search-context { max-height: 20em; overflow: hidden; }
.search-context::after { content: ""; position: absolute; bottom: 0; width: 100%; height: 3em; display: block; background: linear-gradient(to bottom, transparent, #faf8fb); pointer-events: none; } .search-context::after { content: ""; position: absolute; bottom: 0; width: 100%; height: 3em; display: block; background: linear-gradient(to bottom, transparent, #faf8fb); pointer-events: none; }
textarea[name=content] { height: 30em; } textarea[name=content] { resize: none; }
.fit-text-mirror { position: absolute; left: -10000vw; word-wrap: break-word; white-space: pre-wrap; }
main label:not(.link-display-label) { display: inline-block; min-width: 16rem; } main label:not(.link-display-label) { display: inline-block; min-width: 16rem; }
input[type=text]:not(.link-display), input[type=password], input[type=url], input[type=email], input[type=number], textarea { margin: 0.5rem 0; } input[type=text]:not(.link-display), input[type=password], input[type=url], input[type=email], input[type=number], textarea { margin: 0.5rem 0; }
input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea, #search-box { padding: 0.5rem 0.8rem; background: #d5cbf9; border: 0; border-radius: 0.3rem; font-size: 1rem; color: #442772; } input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea, textarea[name=content] + pre, #search-box { padding: 0.5rem 0.8rem; background: #d5cbf9; border: 0; border-radius: 0.3rem; font-size: 1rem; color: #442772; }
textarea { min-height: 10em; line-height: 1.3em; font-size: 1.25rem; } textarea { min-height: 10em; line-height: 1.3em; font-size: 1.25rem; }
textarea, textarea ~ input[type=submit], #search-box { width: calc(100% - 0.3rem); box-sizing: border-box; } textarea, textarea[name=content] + pre, textarea ~ input[type=submit], #search-box { width: calc(100% - 0.3rem); box-sizing: border-box; }
textarea ~ input[type=submit] { margin: 0.5rem 0; padding: 0.5rem; font-weight: bolder; } textarea ~ input[type=submit] { margin: 0.5rem 0; padding: 0.5rem; font-weight: bolder; }
.editform input[type=text] { width: calc(100% - 0.3rem); box-sizing: border-box; } .editform input[type=text] { width: calc(100% - 0.3rem); box-sizing: border-box; }
.editfor textarea { min-height: 35rem; }
.file-gallery { margin: 0.5em; padding: 0.5em; list-style-type: none; } .file-gallery { margin: 0.5em; padding: 0.5em; list-style-type: none; }
.file-gallery > li { display: inline-block; min-width: attr(data-gallery-width); padding: 1em; text-align: center; } .file-gallery > li { display: inline-block; min-width: attr(data-gallery-width); padding: 1em; text-align: center; }