mirror of
https://github.com/evennia/evennia.git
synced 2026-03-26 17:56:32 +01:00
Add user selected names to each new pane and some CSS
This commit is contained in:
friarzen
parent
bd98809cf1
commit
7f8c5ea839
4 changed files with 86 additions and 54 deletions
|
|
@ -147,6 +147,19 @@ div {margin:0px;}
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: fit-content;
|
||||
padding: 1em;
|
||||
color: black;
|
||||
border: 1px solid black;
|
||||
background-color: darkgray;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.splitbutton:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#optionsbutton {
|
||||
width: 2rem;
|
||||
font-size: 2rem;
|
||||
|
|
@ -256,6 +269,10 @@ div {margin:0px;}
|
|||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.split-sub {
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
border: 1px solid #C0C0C0;
|
||||
box-shadow: inset 0 1px 2px #e4e4e4;
|
||||
|
|
|
|||
|
|
@ -1,50 +1,50 @@
|
|||
// Use split.js to create a basic ui
|
||||
var SplitHandler = (function () {
|
||||
var num_splits = 0;
|
||||
var split_panes = {};
|
||||
|
||||
var set_pane_types = function(splitpane, types) {
|
||||
split_panes[splitpane]['types'] = types;
|
||||
}
|
||||
|
||||
var dynamic_split = function(splitpane, direction, update_method1, update_method2) {
|
||||
var first = ++num_splits;
|
||||
var second = ++num_splits;
|
||||
|
||||
var first_div = $( '<div id="split_'+first +'" class="split split-'+direction+'" />' )
|
||||
var first_sub = $( '<div id="split_'+first +'-sub"/>' )
|
||||
var second_div = $( '<div id="split_'+second+'" class="split split-'+direction+'" />' )
|
||||
var second_sub = $( '<div id="split_'+second+'-sub"/>' )
|
||||
var dynamic_split = function(splitpane, direction, pane_name1, pane_name2, update_method1, update_method2, sizes) {
|
||||
// find the sub-div of the pane we are being asked to split
|
||||
splitpanesub = splitpane + '-sub';
|
||||
|
||||
// check to see if this pane contains the primary message window.
|
||||
contents = $('#'+splitpane).contents();
|
||||
// create the new div stack to replace the sub-div with.
|
||||
var first_div = $( '<div id="'+pane_name1+'" class="split split-'+direction+'" />' )
|
||||
var first_sub = $( '<div id="'+pane_name1+'-sub" class="split-sub" />' )
|
||||
var second_div = $( '<div id="'+pane_name2+'" class="split split-'+direction+'" />' )
|
||||
var second_sub = $( '<div id="'+pane_name2+'-sub" class="split-sub" />' )
|
||||
|
||||
// check to see if this sub-pane contains anything
|
||||
contents = $('#'+splitpanesub).contents();
|
||||
if( contents ) {
|
||||
// it does, so move it to the first new div (TODO -- selectable between first/second?)
|
||||
// it does, so move it to the first new div-sub (TODO -- selectable between first/second?)
|
||||
contents.appendTo(first_sub);
|
||||
}
|
||||
|
||||
first_div.append( first_sub );
|
||||
second_div.append( second_sub );
|
||||
|
||||
// update the split_panes array to remove this split
|
||||
// update the split_panes array to remove this pane name
|
||||
delete( split_panes[splitpane] );
|
||||
|
||||
// now vaporize the current split_N-sub placeholder and create two new panes.
|
||||
$('#'+splitpane).parent().append(first_div);
|
||||
$('#'+splitpane).parent().append(second_div);
|
||||
$('#'+splitpane).remove();
|
||||
$('#'+splitpane).append(first_div);
|
||||
$('#'+splitpane).append(second_div);
|
||||
$('#'+splitpane+'-sub').remove();
|
||||
|
||||
// And split
|
||||
Split(['#split_'+first,'#split_'+second], {
|
||||
Split(['#'+pane_name1,'#'+pane_name2], {
|
||||
direction: direction,
|
||||
sizes: [50,50],
|
||||
sizes: sizes,
|
||||
gutterSize: 4,
|
||||
minSize: [50,50],
|
||||
});
|
||||
|
||||
// store our new splits for future splits/uses by the main UI.
|
||||
split_panes['split_'+first +'-sub'] = { 'types': [], 'update_method': update_method1 };
|
||||
split_panes['split_'+second+'-sub'] = { 'types': [], 'update_method': update_method2 };
|
||||
// store our new split sub-divs for future splits/uses by the main UI.
|
||||
split_panes[pane_name1] = { 'types': [], 'update_method': update_method1 };
|
||||
split_panes[pane_name2] = { 'types': [], 'update_method': update_method2 };
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -63,7 +63,7 @@ var SplitHandler = (function () {
|
|||
minSize: [50,50],
|
||||
});
|
||||
|
||||
split_panes['main-sub'] = {'types': [], 'update_method': 'append'};
|
||||
split_panes['main'] = { 'types': [], 'update_method': 'append' };
|
||||
|
||||
var input_render = Mustache.render(input_template);
|
||||
$('[data-role-input]').html(input_render);
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
(function () {
|
||||
"use strict"
|
||||
|
||||
var num_splits = 0;
|
||||
|
||||
var options = {};
|
||||
|
||||
|
|
@ -167,7 +168,7 @@ function onKeydown (event) {
|
|||
return;
|
||||
}
|
||||
|
||||
inputfield.focus();
|
||||
//inputfield.focus();
|
||||
|
||||
if (code === 13) { // Enter key sends text
|
||||
doSendText();
|
||||
|
|
@ -245,31 +246,23 @@ function onText(args, kwargs) {
|
|||
known_types.push(msgtype);
|
||||
}
|
||||
|
||||
if ( msgtype == 'help' ) {
|
||||
if (("helppopup" in options) && (options["helppopup"])) {
|
||||
openPopup("#helpdialog", args[0]);
|
||||
return;
|
||||
}
|
||||
// fall through to the default output
|
||||
|
||||
} else {
|
||||
// pass this message to each pane that has this msgtype mapped
|
||||
if( SplitHandler ) {
|
||||
for ( var key in SplitHandler.split_panes) {
|
||||
var pane = SplitHandler.split_panes[key];
|
||||
// is this message type mapped to this pane?
|
||||
if ( (pane['types'].length > 0) && pane['types'].includes(msgtype) ) {
|
||||
// yes, so append/replace this pane's inner div with this message
|
||||
if ( pane['update_method'] == 'replace' ) {
|
||||
$('#'+key).html(args[0])
|
||||
} else {
|
||||
$('#'+key).append(args[0]);
|
||||
var scrollHeight = $('#'+key).parent().prop("scrollHeight");
|
||||
$('#'+key).parent().animate({ scrollTop: scrollHeight }, 0);
|
||||
}
|
||||
// record sending this message to a pane, no need to update the default div
|
||||
use_default_pane = false;
|
||||
// pass this message to each pane that has this msgtype mapped
|
||||
if( SplitHandler ) {
|
||||
for ( var key in SplitHandler.split_panes) {
|
||||
var pane = SplitHandler.split_panes[key];
|
||||
// is this message type mapped to this pane?
|
||||
if ( (pane['types'].length > 0) && pane['types'].includes(msgtype) ) {
|
||||
// yes, so append/replace this pane's inner div with this message
|
||||
var text_div = $('#'+key+'-sub');
|
||||
if ( pane['update_method'] == 'replace' ) {
|
||||
text_div.html(args[0])
|
||||
} else {
|
||||
text_div.append(args[0]);
|
||||
var scrollHeight = text_div.parent().prop("scrollHeight");
|
||||
text_div.parent().animate({ scrollTop: scrollHeight }, 0);
|
||||
}
|
||||
// record sending this message to a pane, no need to update the default div
|
||||
use_default_pane = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -441,19 +434,39 @@ function doStartDragDialog(event) {
|
|||
$(document).bind("mouseup", undrag);
|
||||
}
|
||||
|
||||
|
||||
function onSplitDialogClose() {
|
||||
var pane = $("input[name=pane]:checked").attr("value");
|
||||
var direction = $("input[name=direction]:checked").attr("value");
|
||||
var new_pane1 = $("input[name=new_pane1]").val();
|
||||
var new_pane2 = $("input[name=new_pane2]").val();
|
||||
var flow1 = $("input[name=flow1]:checked").attr("value");
|
||||
var flow2 = $("input[name=flow2]:checked").attr("value");
|
||||
|
||||
SplitHandler.dynamic_split( pane, direction, flow1, flow2 );
|
||||
if( new_pane1 == "" ) {
|
||||
new_pane1 = 'pane_'+num_splits;
|
||||
num_splits++;
|
||||
}
|
||||
|
||||
if( new_pane2 == "" ) {
|
||||
new_pane2 = 'pane_'+num_splits;
|
||||
num_splits++;
|
||||
}
|
||||
|
||||
if( document.getElementById(new_pane1) ) {
|
||||
alert('An element: "' + new_pane1 + '" already exists');
|
||||
return;
|
||||
}
|
||||
|
||||
if( document.getElementById(new_pane2) ) {
|
||||
alert('An element: "' + new_pane2 + '" already exists');
|
||||
return;
|
||||
}
|
||||
|
||||
SplitHandler.dynamic_split( pane, direction, new_pane1, new_pane2, flow1, flow2, [50,50] );
|
||||
|
||||
closePopup("#splitdialog");
|
||||
}
|
||||
|
||||
|
||||
function onSplitDialog() {
|
||||
var dialog = $("#splitdialogcontent");
|
||||
dialog.empty();
|
||||
|
|
@ -467,6 +480,10 @@ function onSplitDialog() {
|
|||
dialog.append('<input type="radio" name="pane" value="'+ pane +'">'+ pane +'<br />');
|
||||
}
|
||||
|
||||
dialog.append("<h3>New Pane Names</h3>");
|
||||
dialog.append('<input type="text" name="new_pane1" value="" />');
|
||||
dialog.append('<input type="text" name="new_pane2" value="" />');
|
||||
|
||||
dialog.append("<h3>New First Pane Flow</h3>");
|
||||
dialog.append('<input type="radio" name="flow1" value="append" checked>append<br />');
|
||||
dialog.append('<input type="radio" name="flow1" value="replace">replace<br />');
|
||||
|
|
|
|||
|
|
@ -16,14 +16,12 @@
|
|||
|
||||
<!-- The "Main" Content -->
|
||||
<div id="main" class="split split-vertical" data-role-default>
|
||||
<div id="main-sub">
|
||||
<div id="main-sub" class="split-sub">
|
||||
<div id="messagewindow"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- The "Input" Pane -->
|
||||
<div id="input" class="split split-vertical" data-role-input data-update-append>
|
||||
</div>
|
||||
<div id="input" class="split split-vertical" data-role-input data-update-append></div>
|
||||
|
||||
<!-- Basic UI Components -->
|
||||
<div id="splitdialog" class="dialog">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue