client: Updates; support ircd.key state event; various.

modules/static/charybdis.css

@@ -456,7 +456,6 @@ body.loaded
 	text-shadow: 0px 0px #000000;
 }
 
-.ircd .selected,
 .ircd button.selected
 {
 	background-color: var(--pal-AC) !important;
@@ -924,47 +923,88 @@ body.loaded
  * Object explorer
  */
 
-.ircd .explore2.object,
+.ircd form.explore2
-.ircd .explore2 .object
 {
+	position: relative;
+	flex-flow: column nowrap;
+	justify-content: flex-start;
+	align-items: flex-start;
+	border-left: 0px;
+	border-radius: 0px 0px 0px 0px;
+}
+
+.ircd form.explore2.object,
+.ircd form.explore2 .object
+{
+	flex-grow: 1;
 	flex-flow: column nowrap;
 	align-items: stretch;
 	justify-content: center;
-	margin: 5px 0px 5px 0px;
+	box-sizing: border-box;
+	border-top: 0px solid var(--pal-AD);
+	border-bottom: 0px solid var(--pal-AD);
+	border-left: 0px solid var(--pal-AD);
+	border-radius: 0px 0px 0px 0px;
+	margin: 0px 0px 0px 0px;
 	padding: 0px 0px 0px 0px;
-	border-radius: 3px 0px 0px 0px;
-	border-left: 1px dotted var(--pal-AE);
 }
 
-.ircd .explore2 div.member
+.ircd form.explore2 div.member
 {
+	width: 100%;
 	flex-flow: row nowrap;
-	align-items: stretch;
+	align-items: center;
-	margin: 1px 0px 1px 0px;
+	justify-content: stretch;
+	box-sizing: border-box;
+	margin: 0px 0px 0px 0px;
+	padding: 1px 0px 0px 0px;
+	border-bottom: 1px solid var(--pal-AD);
 }
 
-.ircd .explore2 .key
+.ircd form.explore2 div.member
+:first-child
+{
+	margin-top: 0px;
+	padding-top: 0px;
+}
+
+.ircd form.explore2 div.member
+:last-child
+{
+	margin-bottom: 0px;
+	padding-bottom: 0px;
+}
+
+.ircd form.explore2 .key
 {
 	flex-grow: 1;
 	align-items: center;
 	justify-content: flex-start;
-	margin: 0px 20px 0px 5px;
+	margin: 0px 15px 0px 0px;
+	box-sizing: border-box;
+	font-size: calc(var(--fsF));
+	color: white;
 }
 
-.ircd .explore2 input.value
+.ircd form.explore2 input.value
 {
 	flex-grow: 0;
-	min-width: 48ch;
+	min-width: 96ch;
-	padding: 2px 5px 2px 5px;
+	align-self: stretch;
+	align-items: center;
+	justify-content: center;
+	line-height: 1em;
 	border-radius: 2px;
 	font-family: monospace;
 	font-size: calc(var(--fsE));
+	padding: 1px 1px 1px 1px;
+	margin: 1px 1px 0px 1px;
 }
 
 /*
  * Old explorer
  */
-
+/*
 .ircd div.object
 {
 	display: inline-flex;
@@ -1038,7 +1078,7 @@ body.loaded
 	font-family: FreeMono;
 	font-size: 18px;
 }
-
+*/
 
 /************************************************
  ************************************************
@@ -1213,7 +1253,7 @@ body.loaded
 	flex-flow: column nowrap;
 	align-items: center;
 	justify-content: center;
-	margin: 0px;
+	margin: 10px;
 	padding: 0px;
 }
 
@@ -1252,7 +1292,7 @@ body.loaded
 	align-self: flex-end;
 	align-items: baseline;
 	letter-spacing: -1px;
-	margin: 0px 10px 0px 10px;
+	margin: 0px 2px 0px 0px;
 }
 
 .ircd .login_ h3 b
@@ -1286,7 +1326,7 @@ body.loaded
 	box-sizing: border-box;
 	margin: 5px 0px 5px 0px;
 	padding: 0px 4px 0px 4px;
-	border-radius: 0px;
+	border-radius: 3px;
 }
 
 .ircd .login_ div.submit
@@ -1304,8 +1344,7 @@ body.loaded
 	justify-content: center;
 	margin: 5px 0px 5px 0px;
 	padding: 10px 15px 10px 15px;
-	border-top: 1px solid var(--pal-AD);
+	border: 1px solid var(--pal-AD);
-	border-bottom: 1px solid var(--pal-AD);
 	letter-spacing: 1px;
 	font-weight: bold;
 	font-size: 17px;
@@ -1314,10 +1353,12 @@ body.loaded
 
 .ircd .login_ .submit button[name=login_]
 {
+	margin-right: 5px;
 }
 
 .ircd .login_ .submit button[name=register]
 {
+	margin-left: 5px;
 }
 
 .ircd .login_ button.submit:hover
@@ -1781,7 +1822,7 @@ div.main > form.search
 	align-items: stretch;
 	justify-content: stretch;
 	margin: 0px 0px 0px 0px;
-	padding-top: 3px;
+	padding-top: 1px;
 	border-radius: 0px;
 	background-color: var(--pal-DE);
 	color: var(--pal-AC);
@@ -1790,7 +1831,7 @@ div.main > form.search
 .ircd .rooms
 div.main > form.search.selected
 {
-	background-color: var(--pal-AC);
+	background-color: var(--pal-DD);
 }
 
 .ircd .rooms
@@ -1803,6 +1844,12 @@ div.main > form.search input
 	font-size: 16px;
 }
 
+.ircd .rooms
+div.main > form.search.selected input
+{
+	border-top: 1px solid var(--pal-DA);
+}
+
 .ircd .rooms
 div.main > form.search label
 {
@@ -3212,69 +3259,11 @@ div.main > form.search label
 	border-bottom: 1px solid var(--pal-AD);
 }
 
-.ircd .room div.main div.event div.timeline div.info form
-{
-	position: relative;
-}
-
 .ircd .room div.main div.event div.timeline div.info form.event
 {
-	border-left: 0px;
+	position: relative;
-	border-radius: 0px 0px 0px 0px;
+	margin-top: 5px;
-}
+	margin-bottom: 5px;
-
-.ircd .room div.main div.event div.timeline div.info form.event div.object
-{
-	flex-grow: 1;
-	box-sizing: border-box;
-	border-top: 0px solid var(--pal-AD);
-	border-bottom: 0px solid var(--pal-AD);
-	border-left: 0px solid var(--pal-AD);
-	border-radius: 0px 0px 0px 0px;
-	margin: 0px 0px 0px 0px;
-	padding: 0px 0px 0px 0px;
-}
-
-.ircd .room div.main div.event div.timeline div.info form.event div.member
-{
-	box-sizing: border-box;
-	margin: 0px 0px 0px 0px;
-	padding: 0px 0px 1px 0px;
-}
-
-.ircd .room div.main div.event div.timeline div.info form.event div.member:first-child
-{
-	margin-top: 0px;
-	padding-top: 0px;
-}
-
-.ircd .room div.main div.event div.timeline div.info form.event div.member:last-child
-{
-	margin-bottom: 0px;
-	padding-bottom: 0px;
-}
-
-.ircd .room div.main div.event div.timeline div.info form.event .key
-{
-	box-sizing: border-box;
-	align-self: stretch;
-	align-items: center;
-	justify-content: flex-start;
-	border-bottom: 1px solid var(--pal-AD);
-	font-size: calc(var(--fsF));
-	color: white;
-	text-align: center;
-}
-
-.ircd .room div.main div.event div.timeline div.info form.event input.value
-{
-	box-sizing: border-box;
-	margin: 0px 1px 0px 1px;
-	padding: 0px 5px 0px 5px;
-	align-items: center;
-	justify-content: center;
-	font-family: courier;
-	font-size: calc(var(--fsE));
 }
 
 .ircd .room div.main div.event div.timeline div.info form.menu
@@ -3306,8 +3295,8 @@ div.main > form.search label
 {
 	flex-shrink: 0;
 	flex-flow: row nowrap;
-	align-self: first baseline;
+	align-self: stretch;
-	align-items: first baseline;
+	align-items: flex-start;
 	justify-content: flex-end;
 	font-size: 16px;
 	width: 20ch;
@@ -3565,6 +3554,12 @@ div.main > form.search label
 	text-shadow: 0px 0px var(--pal-AC);
 	text-align: center;
 	color: var(--pal-DE);
+	cursor: pointer;
+}
+
+.ircd .room .main div.event.state div.handler.selected div.changed h1
+{
+	background-color: var(--pal-AC) !important;
 }
 
 .ircd .room .main div.state.event div.handler.unhandled div.changed h1
@@ -3613,12 +3608,17 @@ div.main > form.search label
 	padding: 0px 0px 0px 0px;
 	margin: 0px 0px 0px 0px;
 	font-size: calc(var(--fsC));
-	border-top: 1px solid var(--pal-DD);
+	border-top: 1px solid var(--pal-DA);
 	border-right: 1px solid var(--pal-DD);
 	border-radius: 0px 3px 0px 0px;
 	color: black;
 }
 
+.ircd .room .main div.event.state div.handler.selected div.changed h4
+{
+	background-color: var(--pal-DD) !important;
+}
+
 .ircd .room .main div.state.event div.handler.unhandled div.changed h3
 {
 	color: var(--pal-CC);
@@ -3701,6 +3701,36 @@ div.main > form.search label
 	background-color: var(--pal-DD);
 }
 
+.ircd .room .main div.event.state div.ircd_key form.explore2
+{
+	position: relative;
+	margin-right: 5px;
+	margin-bottom: 5px;
+}
+
+.ircd .room .main div.event.state div.ircd_key form.explore2 div.object
+{
+}
+
+.ircd .room .main div.event.state div.ircd_key form.explore2 div.member
+{
+	padding-top: 0px;
+	border-left: 1px solid var(--pal-AD);
+}
+
+.ircd .room .main div.event.state div.ircd_key form.explore2 .key
+{
+}
+
+.ircd .room .main div.event.state div.ircd_key form.explore2 input.value
+{
+	max-width: 50vw;
+	border-radius: 0px;
+	margin-top: 0px;
+	padding-left: 5px;
+	padding-right: 5px;
+}
+
 .ircd .room .main div.event div.right
 {
 	position: absolute;

modules/static/charybdis/explore.js

@@ -0,0 +1,149 @@
+/*
+ * IRCd Charybdis 5/Matrix
+ *
+ * Copyright (C) 2017 Charybdis Development Team
+ * Copyright (C) 2017 Jason Volk (jason@zemos.net)
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice is present in all copies.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE AUTHOR ``AS IS'' AND ANY EXPRESS OR
+ * IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY DIRECT,
+ * INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+ * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
+ * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
+ * STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING
+ * IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+ * POSSIBILITY OF SUCH DAMAGE.
+ *
+ */
+
+'use strict';
+
+/**
+ * Object explorers
+ */
+
+/**
+ * Old JQuery Explorer
+ * (to be replaced with Angular)
+ * Recursive DOM object tree to represent JSON structure for recursive exploration.
+ */
+mc.explorer = function(state, elem, depth = 0)
+{
+	let key = (member) => $(member).children(".key");
+	let name_elem = (member) => key(member).children(".name");
+	let name = (member) => name_elem(member).text().trim();
+	let icon = (member) => key(member).children(".icon");
+	let value = (member) => $(member).children(".value");
+	let value_visible = (member) => value(member).is(":visible");
+	let value_empty = (member) => value(member).html().trim().length == 0;
+	let value_object = (member) => value(member).children(".object").length != 0;
+
+	let icon_toggle = (member, active) =>
+	{
+		icon(member).toggleClass("fa-minus-square", active);
+		icon(member).toggleClass("fa-plus-square", !active);
+	};
+
+	let value_toggle = (member) =>
+	{
+		let activate = !value_visible(member);
+		icon_toggle(member, activate);
+		value(member).toggle();
+	};
+
+	let value_clicked = (member) =>
+	{
+		if($(value(member)).text().length != 0)
+			$(value(member)).html("<input class='input' type='text' value='" + $(value(member)).text() + "' />");
+	};
+
+	let member_clicked = (member) =>
+	{
+		value_toggle(member);
+		if(value_empty(member))
+		{
+			let key = name(member);
+			member.child = new explorer(state[key], value(member), depth + 1); // recurse
+		}
+		else delete member.child;
+	};
+
+	let member_click = (member) =>
+	{
+		key(member).click((event) => member_clicked(member));
+	};
+
+	let value_click = (member) =>
+	{
+		//value(member).click((event) => value_clicked(member));
+	};
+
+	let member_add = (root, key) =>
+	{
+		$(root).prepend($("#json_member").html());        // DOM template
+		let member = $(root).children(".member").first();
+		name_elem(member).append(key);
+		icon(member).addClass("fa-plus-square");
+		value(member).hide();
+		member_click(member);
+		value_click(member);
+		return member;
+	};
+
+	let member_add_object = (root, key) =>
+	{
+		let member = member_add(root, key);
+		if(!state[key] || Object.keys(state[key]).length == 0)
+		{
+			icon_toggle(member, true);
+			icon(member).css("color", "#C8C8C8");
+		}
+	};
+
+	let member_add_value = (root, key) =>
+	{
+		let member = member_add(root, key);
+		value(member).text(state[key]);
+		value_toggle(member);
+	};
+
+	let add = (root, key) =>
+	{
+		switch(typeof(state[key]))
+		{
+			case "object":
+				member_add_object(root, key);
+				break;
+
+			case "boolean":
+			case "number":
+			case "string":
+				member_add_value(root, key);
+				break;
+		}
+	};
+
+	// Add the outer object div to the content element as the root object/div
+	$(elem).prepend($("#json_object").html());          // DOM template
+	let root = $(elem).children(".object").first();
+
+	// Add member divs for each member of the object
+	for(let key in state)
+		add(root, key);
+};
+
+/** Explorer replacement here
+ */
+mc.ng.app.controller('explore', class extends mc.ng.controller
+{
+	constructor($scope)
+	{
+		super("explore", $scope);
+	}
+});

modules/static/charybdis/room/controller.js

@@ -38,6 +38,7 @@ mc.ng.app.controller('room', class extends mc.ng.controller
 		$scope.should_show_avatar = this.should_show_avatar;
 		$scope.dots_to_underscores = this.dots_to_underscores;
 		$scope.handler_exists = this.handler_exists;
+		$scope.sender_is_server = this.sender_is_server;
 	}
 
 	destructor()
@@ -169,4 +170,14 @@ mc.ng.app.controller('room', class extends mc.ng.controller
 		let sel = "#ircd_room_event__" + this.dots_to_underscores(type);
 		return $(sel).length > 0;
 	}
+
+	//TODO: arbitrary
+	sender_is_server(event)
+	{
+		let sender = maybe(() => event.sender);
+		if(!sender)
+			return false;
+
+		return mc.m.sid(sender) == "ircd";
+	}
 });

modules/static/charybdis/room/sync.js

@@ -55,7 +55,10 @@ room.sync = function(data, action)
 		if(this.control.mode == "LIVE") try
 		{
 			this.scroll.to.bottom("fast");
-			this.receipt.send.current();
+
+			//TODO: riot's behavior is to only send the receipt when the
+			//TODO: user does something next ensuring they aren't AFK
+			//this.receipt.send.current();
 		}
 		catch(e)
 		{

modules/static/charybdis/ui.js

@@ -114,127 +114,6 @@ $(window).on("keyup", client.ctrl.keyup.bind(client.ctrl));
 $(window).on("keydown", client.ctrl.keydown.bind(client.ctrl));
 $(window).on("blur", client.ctrl.others.bind(client.ctrl));
 
-/**
- * Explorer
- * (to be replaced with Angular)
- * Recursive DOM object tree to represent JSON structure for recursive exploration.
- */
-let explorer = function(state, elem, depth = 0)
-{
-	let key = (member) => $(member).children(".key");
-	let name_elem = (member) => key(member).children(".name");
-	let name = (member) => name_elem(member).text().trim();
-	let icon = (member) => key(member).children(".icon");
-	let value = (member) => $(member).children(".value");
-	let value_visible = (member) => value(member).is(":visible");
-	let value_empty = (member) => value(member).html().trim().length == 0;
-	let value_object = (member) => value(member).children(".object").length != 0;
-
-	let icon_toggle = (member, active) =>
-	{
-		icon(member).toggleClass("fa-minus-square", active);
-		icon(member).toggleClass("fa-plus-square", !active);
-	};
-
-	let value_toggle = (member) =>
-	{
-		let activate = !value_visible(member);
-		icon_toggle(member, activate);
-		value(member).toggle();
-	};
-
-	let value_clicked = (member) =>
-	{
-		if($(value(member)).text().length != 0)
-			$(value(member)).html("<input class='input' type='text' value='" + $(value(member)).text() + "' />");
-	};
-
-	let member_clicked = (member) =>
-	{
-		value_toggle(member);
-		if(value_empty(member))
-		{
-			let key = name(member);
-			member.child = new explorer(state[key], value(member), depth + 1); // recurse
-		}
-		else delete member.child;
-	};
-
-	let member_click = (member) =>
-	{
-		key(member).click((event) => member_clicked(member));
-	};
-
-	let value_click = (member) =>
-	{
-		//value(member).click((event) => value_clicked(member));
-	};
-
-	let member_add = (root, key) =>
-	{
-		$(root).prepend($("#json_member").html());        // DOM template
-		let member = $(root).children(".member").first();
-		name_elem(member).append(key);
-		icon(member).addClass("fa-plus-square");
-		value(member).hide();
-		member_click(member);
-		value_click(member);
-		return member;
-	};
-
-	let member_add_object = (root, key) =>
-	{
-		let member = member_add(root, key);
-		if(!state[key] || Object.keys(state[key]).length == 0)
-		{
-			icon_toggle(member, true);
-			icon(member).css("color", "#C8C8C8");
-		}
-	};
-
-	let member_add_value = (root, key) =>
-	{
-		let member = member_add(root, key);
-		value(member).text(state[key]);
-		value_toggle(member);
-	};
-
-	let add = (root, key) =>
-	{
-		switch(typeof(state[key]))
-		{
-			case "object":
-				member_add_object(root, key);
-				break;
-
-			case "boolean":
-			case "number":
-			case "string":
-				member_add_value(root, key);
-				break;
-		}
-	};
-
-	// Add the outer object div to the content element as the root object/div
-	$(elem).prepend($("#json_object").html());          // DOM template
-	let root = $(elem).children(".object").first();
-
-	// Add member divs for each member of the object
-	for(let key in state)
-		add(root, key);
-};
-
-/** Explorer replacement here
- */
-mc.ng.app.controller('explore', class extends mc.ng.controller
-{
-	constructor($scope)
-	{
-		super("explore", $scope);
-	}
-});
-
-
 /**************************************
  * Misc util
  *

modules/static/index.html

@@ -1745,7 +1745,7 @@ type="text/ng-template"
 			selected: room.control.show_event_control,
 		}">
 			<i
-			class="members icon fa fa-gears pointer"
+			class="members icon fa fa-gear pointer"
 			aria-hidden="true"
 			>
 			</i>
@@ -1976,6 +1976,7 @@ type="text/ng-template"
 
 	<span
 	class="name"
+	ng-if="!this.sender_is_server(event)"
 	ng-class="
 	{
 		me: event.sender == mc.session.user_id,
@@ -2328,6 +2329,32 @@ type="text/ng-template"
 	</div>
 </script>
 
+<script
+id="ircd_room_event__ircd_key"
+type="text/ng-template"
+>
+	<div
+	class="changed"
+	>
+		<h1
+		ng-click="event.$mc$selected =! event.$mc$selected"
+		>
+			SERVER KEY
+		</h1>
+		<h4>
+			{{event.content.server_name}}
+		</h4>
+	</div>
+	<form
+	class="explore2"
+	ng-if="event.$mc$selected === true"
+	ng-include="'ircd_object'"
+	ng-init="object = event.content;"
+	ng-controller="explore"
+	>
+	</form>
+</script>
+
 <script
 id="ircd_room_event__m_room_message"
 type="text/ng-template"
@@ -2503,7 +2530,7 @@ type="text/ng-template"
 		grouping_start: events.is_grouping_start(event, $index),
 		grouping_end: events.is_grouping_end(event, $index),
 		show_info: room.control.show_event_info[event.event_id] !== undefined,
-		highlight: room.control.show_event_info[event.event_id] !== undefined,
+		highlight: room.control.show_event_timeline && room.control.show_event_info[event.event_id] !== undefined,
 	}">
 		<label
 		for="{{event.event_id}}"
@@ -2532,9 +2559,13 @@ type="text/ng-template"
 	
 		<div
 		class="handler"
-		ng-class="this.dots_to_underscores(event.type)"
 		ng-if="handler_exists(event.type)"
 		ng-include="'ircd_room_event__' + this.dots_to_underscores(event.type)"
+		ng-class="
+		{
+			selected: event.$mc$selected === true,
+			[this.dots_to_underscores(event.type)]: true,
+		}"
 		>
 		</div>
 
@@ -2950,6 +2981,7 @@ ircd-catch
 <script src="charybdis/datetime.js"></script>
 <script src="charybdis/random.js"></script>
 <script src="charybdis/ui.js"></script>
+<script src="charybdis/explore.js"></script>
 <script src="charybdis/scroll.js"></script>
 <script src="charybdis/menu.js"></script>
 <script src="charybdis/io.js"></script>