Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

[SugarCube 2.7.2] Creating A Panel Similar To The UI-Bar

Hello,
I'm looking to add a slim and stowable bar to the upper right portion of the screen. I feel that the information it would display would best be handled by a horizontal bar, as opposed to the UI-Bar on the left. It would need to appear in every passage (though hiding it during the game's intro would be an added bonus).

I know how to actually create the bar in HTML/CSS/JS, but I'm not sure about the proper way to add this bar using SugarCube.

I've looked through the documentation (and likely missed a well documented explanation), but I can't find anything about introducing new HTML elements. Is this something that can be done? Thank you.

Comments

  • The following is the code I use to add a Right Sidebar to a project i'm working on, you could modify it to display your own stow-able bar.

    1. The Javascript I use to add the HTML elements representing the right sidebar, it's toggle button, and it's body (which is the content of a StoryRightSidebar passage).
    /* Create the Right UI Bar. */
    var $rightUiBar = $('<div id="right-ui-bar"></div>').insertAfter("#ui-bar");
    
    var rightTray = $rightUiBar.append('<div id="right-ui-bar-tray"><button id="right-ui-bar-toggle" tabindex="0" title="Toggle the Right UI bar" aria-label="Toggle the Right UI bar" type="button"></button></div>');
    
    var rightBody = $rightUiBar.append('<div id="right-ui-bar-body"></div>');
    
    /* Attach the toggle button click. */
    $rightUiBar.find('#right-ui-bar-toggle').ariaClick({label : "Toggle the Right UI bar"}, () => $rightUiBar.toggleClass('stowed'));
    
    /* Automatically show the contents of the StoryRightSidebar passage in the right-ui-bar-body element. */
    postrender["Display Right Sidebar Contents"] = function (content, taskName) {
    	setPageElement('right-ui-bar-body', 'StoryRightSidebar');
    };
    
    2. The CSS I use to style the components of the right sidebar (including when it is stowed), and the adjustments to the main story/passage area. This CSS is heavily based upon SugarCube 2's own Sidebar.
    /* Styling and Colours of the Right UI Bar. */
    #right-ui-bar {
    	background-color: #222;
    	border-right: 1px solid #444;
    	text-align: center;
    }
    #right-ui-bar-toggle {
    	font-size: 1.2em;
    	line-height: inherit;
    	color: #eee;
    	background-color: transparent;
    	border: 1px solid #444;
    }
    #right-ui-bar-toggle:before {
    	font-family: tme-fa-icons;
    	font-style: normal;
    	font-weight: 400;
    	font-variant: normal;
    	text-transform: none;
    	line-height: 1;
    	speak: none;
    }
    
    /* Layout and Positioning of the Right UI Bar. */
    #right-ui-bar {
    	position: fixed;
    	z-index: 50;
    	top: 0;
    	right: 0;
    	width: 17.5em;
    	height: 100%;
    	margin: 0;
    	padding: 0;
    	-webkit-transition: right .2s ease-in;
    	-o-transition: right .2s ease-in;
    	transition: right .2s ease-in;
    }
    #right-ui-bar-tray {
    	position: absolute;
    	top: .2em;
    	left: 0;
    	right: 0;
    }
    #right-ui-bar-toggle {
    	display: block;
    	position: absolute;
    	top: 0;
    	left: 0;
    	border-left: none;
    	padding: .3em .45em .25em;
    	-webkit-user-select: none;
    }
    #right-ui-bar-toggle:before {
    	content: "\e81e";
    }
    #right-ui-bar-body {
    	height: 90%;
    	height: calc(100% - 2.5em);
    	margin: 2.5em 0;
    	padding: 0 1.5em;
    }
    #right-ui-bar-body {
    	line-height: 1.5;
    	overflow: auto;
    }
    
    #story {
    	margin-right: 20em;
    }
    
    /* Stowing of the Right UI Bar. */
    #right-ui-bar.stowed {
    	right: -15.5em;
    }
    #right-ui-bar.stowed #right-ui-bar-toggle {
    	padding: .3em .55em .25em .35em;
    }
    #right-ui-bar.stowed #right-ui-bar-toggle:before {
    	content: "\e81d";
    }
    #right-ui-bar.stowed #right-ui-bar-body {
    	visibility: hidden;
    	-webkit-transition: visibility .2s step-end;
    	-o-transition: visibility .2s step-end;
    	transition: visibility .2s step-end;
    }
    
    #right-ui-bar.stowed~#story {
    	margin-right: 4.5em;
    }
    
    3. A dummy StoryRightSidebar passage.
    var: $var
    

    Assign a value to $var within a normal passage (like Start) and the value should automatically appear in the right side bar.

    I would of modified the above to work with your own stow-able bar but you did not supply an example. *smile*
  • Perfect, thank you! With some CSS changes, that turned out exactly the way I needed it.
  • For anyone testing this code in Twine 2—via Test or Play—and wondering why it isn't working. It's the included ES6 syntax—don't use ES6 features in Twine 2.0.11 or earlier, you will be disappointed.

    The workaround is to replace the ES6 arrow function expression with a normal/pre-ES6 function expression.

    FIND:
    $rightUiBar.find('#right-ui-bar-toggle').ariaClick({label : "Toggle the Right UI bar"}, () => $rightUiBar.toggleClass('stowed'));
    
    REPLACE WITH:
    $rightUiBar
    	.find('#right-ui-bar-toggle')
    	.ariaClick({
    		label : "Toggle the Right UI bar"
    	}, function () {
    		$rightUiBar.toggleClass('stowed');
    	});
    
  • It's the included ES6 syntax
    Thank you, I should of checked and down-graded the example before posting it.

  • Thanks man. Works like a charm!
    Are anonymous functions going to be added at some point?
  • Disane wrote: »
    Are anonymous functions going to be added at some point?
    Added to what?
  • Apologies about the necropost, but is there any way to force the rightuibar to stow and unstow like the default uibar when using the UI.stow(); method? (using twine 1.4.2 and sugarcube 2.17)

  • edited April 2017
    Apologies about the necropost, but is there any way to force the rightuibar to stow and unstow like the default uibar when using the UI.stow(); method? (using twine 1.4.2 and sugarcube 2.17)

    I was able to work this out due to one of Greyelf's replies in another post which I stumbled across. So cheers a bunch :)
    <<addclass "#right-ui-bar" "stowed">>
    
    and
    <<removeclass "#right-ui-bar" "stowed">>
    
  • This is soooo useful! Thanks!

    Using this UI Bar on T1 Sugarcube2, how can you set it closed as the default?

    Thanks in advance.
  • ffs wrote: »
    Using this UI Bar on T1 Sugarcube2, how can you set it closed as the default?
    Change the first line of code from this:
    var $rightUiBar = $('<div id="right-ui-bar"></div>').insertAfter("#ui-bar");
    
    To something like the following:
    var $rightUiBar = $('<div id="right-ui-bar" class="stowed"></div>').insertAfter("#ui-bar");
    
  • Perfect! Cheers!
Sign In or Register to comment.