cpp
/
RmlUi
spegling av https://github.com/mikke89/RmlUi.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
							<rml>
<head>
<link type="text/template" href="../../../assets/window.rml"/>
<title>Data Binding Sample</title>
<style>
body.window
{
	left: 80dp;
	right: 80dp;
	top: 50dp;
	bottom: 50dp;
	min-width: 1040dp;
	min-height: 300dp;
	max-width: -1px;
	max-height: -1px;
}
div#title_bar div#icon
{
	display: none;
}
div#content
{ 
	position: relative; 
}
tabset
{
	display: block;
}
tabs
{
	display: block;
	position: fixed;
	clip: none;
	text-align: right;
	top: -47dp;
	left: 205dp;
	right: 10dp;
}
tab
{
	display: inline-block;
	width: 100dp;
	padding: 0 20dp;
	line-height: 40dp;
	
	font-size: 16dp;
	color: #ddd;
	text-align: center;
	
	decorator: tiled-horizontal( datagridheader-l, datagridheader-c, datagridheader-r );
	image-color: #cffc;
}
tab:hover
{
	image-color: #fffe;
	color: #fff;
}
tab:active, tab:selected
{
	image-color: #fff;
	color: #fff;
}
panels
{
	display: block;
}
panel
{
	display: block;
	padding: 30dp;
	margin-left: auto;
	margin-right: auto;
	max-width: 500dp;
}
h1
{
	margin: 1.4em 0 0.7em;
	font-size: 18dp;
}
p.title
{
	font-size: 35dp;
	color: #b33;
	font-effect: glow(2dp #ed5);
}
.center {
	text-align: center;
}
.clickable
{ 
	cursor: pointer;
}
.red {
	color: #e44;
}
.big {
	font-size: 1.8em;
}
.mouse_detector {
	width: 300dp;
	min-height: 2em;
	line-height: 30dp;
	background-color: #909090;
	border: 1dp #666;
	margin: 2em auto;
	cursor: pointer;
}


/***  Forms  ***/

form {
	display: block;
	text-align: left;
}
form input, form select {
	margin-left: 0;
}
form input.text, form input.password {
	width: 35%;
}
input.text.two-wide {
	width: 70%;
}
form h2 {
	display: block;
	font-size: 16dp;
	font-weight: bold;
	margin-top: 1em;
	margin-bottom: 0.3em;
}
#rating {
	display: inline-block;
	width: 40dp;
	padding-left: 1em;
}
#rating_emoji { 
	color: #ffd40f;
	font-size: 1.7em;
}
#controls textarea 
{
	font-size: 18dp;
	font-effect: outline(2dp #060);
	color: #ddd;
	caret-color: #060;
}
#controls textarea selection
{
	background-color: #aca;
	color: #999;
}
.picker p {
	cursor: pointer;
}
input:disabled {
	image-color: #aaac;
}
li {
	display: block;
	color: #eee;
	margin-left: 1em;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
}
</style>
</head>

<body template="window">
<tabset id="menu">
<tab>Basics</tab>
<panel data-model="basics">
	<h1>{{title}}</h1>
	<p data-if="show_text">The quick brown fox jumps over the lazy {{animal}}.</p>
	<input type="text" data-value="animal"/>
</panel>
<tab>Events</tab>
<panel id="welcome" data-model="events">
	<p class="title" style="margin-top: 1.8em;">{{hello_world}}<span style="color: blue;"> Rated: {{rating}}</span></p>
	<p>Data binding demo. We rate this a good old {{rating}}!</p>
	<input type="range" name="rating" min="0" max="100" step="1" value="50" data-value="rating"/>
	<div data-visible="rating > 50">Thanks for the <span data-if="rating < 80">good</span><span data-if="rating >= 80">awesome</span> rating!</div>
	<div class="mouse_detector" style="height: 70dp;"
		data-event-mousemove="mouse_detector = 'x: ' + ev.mouse_x + '<br/>y: ' + ev.mouse_y"
		data-event-click="add_mouse_pos(); hello_world = 'Hello click!'"
		data-rml="mouse_detector">
	</div>
	<div class="mouse_detector" data-if="positions.size > 0" data-event-click="clear_positions">
		Recorded mouse positions.<br/>
		<span data-for="pos : positions"> x: {{ pos.x }}, y: {{ pos.y }}<br/></span>
	</div>
	<img sprite="icon-invader" data-style-image-color="rating < 80 ? 'black' : 'green'"/>
	<p>
		For loop with data expressions:<br/>
		<span style="padding-left: 1em;" data-for="i : list"> {{ i * 2 + (!(i < 10) ? ' wow!' | to_upper : '') }}</span>
	</p>
</panel>
<tab>Invaders</tab>
<panel id="invaders" data-model="invaders">
	<p>
		Incoming invaders:
		<input type="range" name="rating" min="0" max="20" step="5" data-value="incoming_invaders_rate"/>
		{{ incoming_invaders_rate }} / min.
	</p>
	<button data-event-click="launch_weapons">Launch weapons!</button>
	<div data-for="invader : invaders">
		<h1 data-class-red="invader.danger_rating > 70">{{invader.name}}</h1>
		<p>Invader {{it_index + 1}} of {{ invaders.size }}.</p>
		<img data-attr-sprite="invader.sprite" data-style-image-color="invader.color"/>
		<p>
			Shots fired (damage): <span data-for="invader.damage"> {{it}} </span>
		</p>
	</div>
	<h1 data-if="invaders.size == 0">It's all safe and sound, sir!</h1>
</panel>
<tab>Forms</tab>
<panel id="controls" data-model="forms">
	<form onsubmit="submit_form">
		<h2>Full name</h2>
		<div>
			<input class="two-wide" type="text" name="name"/>
		</div>
		<h2>Email and password</h2>
		<div>
			<input type="text" name="email"/>
			<input type="password" name="password"/>
		</div>
		<h2>Rating</h2>
		<div>
			<input type="range" name="rating" min="0" max="100" step="1" value="50" onchange="rating" data-value="rating"/> <span id="rating">{{rating}}</span><span id="rating_emoji">&nbsp;</span>
		</div>
		<h2>Favorite animal: {{ animal }}</h2>
		<div>
			<label><input type="radio" name="animal" value="dog" data-checked="animal"/> Dog </label>
			<label><input type="radio" name="animal" value="cat" data-checked="animal"/> Cat </label>
			<label><input type="radio" name="animal" value="narwhal" data-checked="animal"/> Narwhal </label>
			<label><input type="radio" name="animal" value="no" data-checked="animal"/> I don't like animals </label>
		</div>
		<h2>Favorite meals</h2>
		<div>
			<label><input type="checkbox" name="meals" value="pizza" data-checked="pizza" data-attrif-disabled="rating < 70"/> Pizza </label>
			<label><input type="checkbox" name="meals" value="pasta" data-checked="pasta"/> Pasta </label>
			<label><input type="checkbox" name="meals" value="lasagne" data-checked="lasagne"/> Lasagne </label>
			<li style="color: red;" data-if="pizza && rating < 70">• You can only have pizza if the rating is satisfactory.</li>
			<li data-if="pizza && rating >= 70">• Pizza is life!</li>
			<li data-if="pasta">• Pasta is squiggly good!</li>
			<li data-if="lasagne">• Lasagne is delicous!</li>
		</div>
		<h2>Subject</h2>
		<div>
			<!--<select name="subject" data-value="selected_subject">
                <option data-for="s : subjects" data-value="it_index">{{s}}</option>
            </select>-->
            <select name="subject" data-value="selected_subject">
                <option value="0">Choose your subject</option>
                <option value="1">Feature request</option>
                <option value="2">Bug report</option>
                <option value="3">Praise</option>
                <option value="4">Criticism</option>
            </select>
			<div class="picker">
				<p data-for="s : subjects" data-style-color="it_index == selected_subject ? 'red' : 'black'" data-event-click="selected_subject = it_index">{{it_index + 1 + ': ' + s}}</p>
			</div>
			<p>
				Selected subject index:<br/>
				<input type="range" name="rating" min="0" max="0" data-attr-max="subjects.size - 1" step="1" value="0" data-value="selected_subject"/> {{selected_subject + 1}}
			</p>
		</div>
		<h2>Message</h2>
		<div>
			<textarea cols="25" rows="4" wrap="nowrap" name="message">😍 Hello 🌐 World! 😎</textarea>
		</div>
		<div style="margin-bottom: 15dp;">
			<input type="submit">Submit</input>
		</div>
	</form>
</panel>
</tabset>
</body>
</rml>