changeset 47:7ef9222474e2

add more button
author Franklin Schmidt <fschmidt@gmail.com>
date Mon, 14 Nov 2022 23:01:29 -0700
parents 289718f121e4
children 4e1a01db19ec
files src/bbcode/bbcode.css src/bbcode/bbcode.js src/bbcode/icons/more_horiz.svg
diffstat 3 files changed, 32 insertions(+), 2 deletions(-) [+]
line wrap: on
line diff
--- a/src/bbcode/bbcode.css	Mon Nov 14 18:43:38 2022 -0700
+++ b/src/bbcode/bbcode.css	Mon Nov 14 23:01:29 2022 -0700
@@ -23,6 +23,13 @@
 div[bbcode] div[buttons] button {
 	border: 0;
 	background-color: transparent;
+	border-radius: 4px;
+}
+div[bbcode] div[buttons] button:hover {
+	background-color: lightgrey;
+}
+div[bbcode] div[buttons] button[checked] {
+	background-color: lightblue;
 }
 div[bbcode] div[buttons] img {
 	height: 24px;
--- a/src/bbcode/bbcode.js	Mon Nov 14 18:43:38 2022 -0700
+++ b/src/bbcode/bbcode.js	Mon Nov 14 23:01:29 2022 -0700
@@ -39,7 +39,7 @@
 	request.send(formData);
 }
 
-function bb_getDiv(node) {
+function bb_getDivBbcode(node) {
 	do {
 		//console.log(node);
 		if( node.getAttribute('bbcode') !== null )
@@ -48,7 +48,7 @@
 }
 
 function bb_getTextarea(node) {
-	return bb_getDiv(node).querySelector('textarea');
+	return bb_getDivBbcode(node).querySelector('textarea');
 }
 
 function bb_uploaded(input,url,filename) {
@@ -68,6 +68,26 @@
 	textarea.focus();
 }
 
+function bb_more(button) {
+	let checked = button.getAttribute('checked') !== null;
+	let buttons = button.parentNode.querySelectorAll('button');
+	if( checked ) {
+		button.removeAttribute('checked');
+		for( let b of buttons ) {
+			if( b === button )
+				break;
+			b.setAttribute('hidden','');
+		}
+	} else {
+		button.setAttribute('checked','');
+		for( let b of buttons ) {
+			if( b === button )
+				break;
+			b.removeAttribute('hidden');
+		}
+	}
+}
+
 function bbcodeCreate(div,options) {
 	if( typeof(div) === 'string' ) {
 		div = document.querySelector(div);
@@ -87,6 +107,7 @@
 				<button type=button onclick="bb_add(this,'[s]','[/s]')" title="Strikethrough"><img src="/bbcode/icons/format_strikethrough.svg"></button>
 				<button type=button onclick="bb_add(this,'[sub]','[/sub]')" title="Subscript"><img src="/bbcode/icons/subscript.svg"></button>
 				<button type=button onclick="bb_add(this,'[sup]','[/sup]')" title="Superscript"><img src="/bbcode/icons/superscript.svg"></button>
+				<button more checked type=button onclick="bb_more(this)" title="More..."><img src="/bbcode/icons/more_horiz.svg"></button>
 				<input type=file onchange="bb_upload(this,bb_uploaded)">
 				<button type=button onclick="bb_fileButtonClick(this)" title="Upload File"><img src="/bbcode/icons/file_upload.svg"></button>
 `	;
@@ -111,4 +132,5 @@
 		div.querySelector('button[cancel]').addEventListener('click',cancel);
 	let textarea = div.querySelector('textarea')
 	bb_fixTextarea(textarea);
+	bb_more( div.querySelector('button[more]') );
 }
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/bbcode/icons/more_horiz.svg	Mon Nov 14 23:01:29 2022 -0700
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M10.4 26.4q-1 0-1.7-.7T8 24q0-1 .7-1.7t1.7-.7q1 0 1.7.7t.7 1.7q0 1-.7 1.7t-1.7.7Zm13.6 0q-1 0-1.7-.7t-.7-1.7q0-1 .7-1.7t1.7-.7q1 0 1.7.7t.7 1.7q0 1-.7 1.7t-1.7.7Zm13.6 0q-1 0-1.7-.7t-.7-1.7q0-1 .7-1.7t1.7-.7q1 0 1.7.7T40 24q0 1-.7 1.7t-1.7.7Z"/></svg>
\ No newline at end of file