cpp
/
RmlUi
miroir de https://github.com/mikke89/RmlUi.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691
							<rml>
<head>
<link type="text/template" href="../../../assets/window.rml"/>
<title>Demo Sample</title>
<style>
@spritesheet demo-sheet
{
	src: ../../../assets/invader.tga;
	
	window-outer: 0px 0px 144px 151px;
	
	demo-radio-t: 407px  0px 30px 14px;
	demo-radio-c: 407px 14px 30px  2px;
	demo-radio-b: 407px 16px 30px 14px;
	
	demo-radio-l: 407px 0px 14px 30px;
	demo-radio-m: 421px 0px  2px 30px;
	demo-radio-r: 423px 0px 14px 30px;
	
	demo-checkbox-t: 407px 60px 30px 14px;
	demo-checkbox-c: 407px 74px 30px  2px;
	demo-checkbox-b: 407px 76px 30px 14px;
	
	demo-checkbox-l: 407px 60px 14px 30px;
	demo-checkbox-m: 421px 60px  2px 30px;
	demo-checkbox-r: 423px 60px 14px 30px;
	
	demo-checked-t: 407px  90px 30px  8px;
	demo-checked-c: 407px  98px 30px 14px;
	demo-checked-b: 407px 112px 30px  8px;
	
	demo-help-t:    128px 152px 51px  6px;
	demo-help-c:    128px 158px 51px 21px;
	demo-help-b:    128px 179px 51px 12px;
	
	demo-title-bar: 147px 0px 96px 85px;
}

body.window
{
	width: 1300px;
	height: 750px;
	min-width: 940px;
	min-height: 300px;
	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;
	width: 100%;
	clip: none;
	pointer-events: none;
	text-align: right;
	padding-right: 10px;
}
tab
{
	position: relative;
    width: 100px;
	pointer-events: auto;
	padding: 0px 20px;
	line-height: 40px;
	top: -47px;
	z-index: 2;
	
	font-size: 16px;
	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: 30px;
	margin-left: auto;
	margin-right: auto;
	max-width: 500px;
}
h1
{
	margin: 1.4em 0 0.7em;
	font-size: 18px;
}
p.title
{
	font-size: 35px;
	color: #b33;
}
.center {
	text-align: center;
}
.clickable
{ 
	cursor: pointer;
}


/***  Decorators  ***/
#decorators {
	text-align: left;
}
#decorators p
{
	margin: 0.5em 0;
}
#decorators button.gradient
{
	decorator: gradient( vertical #415857 #5990A3 );
	border: 2px #415857;
	margin-right: 12px;
}
#decorators button.gradient.horizontal
{
	decorator: gradient( horizontal #DB6565 #F1B58A );
	border: 2px #DB6565;
}
#decorators button.gradient:hover
{
	border-color: #F9EFA3;
}

#decorators .image-alien
{
	width: 64px;
	height: 64px;
	decorator: image( /assets/high_scores_alien_1.tga );
}
#decorators .image-invader
{
	width: 51px;
	height: 39px;
	decorator: image( icon-invader );
}
.side-by-side
{
	display: inline-block;
	width: 120px;
	vertical-align: middle;
	text-align: center;
}
.tiled-box
{
	height: 200px;
	decorator: tiled-box(
		window-tl, window-t, window-tr, 
		window-l, window-c, window-r,
		window-bl, window-b, window-br
	);
}
.image-mode
{
	text-align: center;
	margin-top: 30px;
}
.image-mode > div
{
	display: inline-block;
	width: 120px;
	height: 50px;
	padding: 5px 10px;
	margin: 10px 10px;
	background-color: #c662;
	border: 1px #777;
	font-effect: shadow( 1px 1px #333 );
}
#decorators .image-mode > div > p
{
	margin: -2em 0 0 0;
	text-align: center;
}
.image-mode.small { margin-top: -20px; }
.image-mode.small > div
{
	width: 40px;
	height: 20px;
	padding: 0;
	margin-left: 60px;
	margin-right: 60px;
}
.align-default     { decorator: image( icon-invader scale-none             ); }
.align-right       { decorator: image( icon-invader scale-none right       ); }
.align-left-bottom { decorator: image( icon-invader scale-none left bottom ); }
.align-percent     { decorator: image( icon-invader scale-none 70% 30%     ); }
.align-pixel       { decorator: image( icon-invader scale-none 100px -15px ); }
.fit-fill       { decorator: image( icon-invader fill       ); }
.fit-contain    { decorator: image( icon-invader contain    ); }
.fit-cover      { decorator: image( icon-invader cover      ); }
.fit-scale-none { decorator: image( icon-invader scale-none ); }
.fit-scale-down { decorator: image( icon-invader scale-down ); }
.orientation-vertical   { decorator: image( icon-invader flip-vertical   scale-none ); }
.orientation-horizontal { decorator: image( icon-invader flip-horizontal scale-none ); }
.orientation-rotate     { decorator: image( icon-invader rotate-180      scale-none ); }


/***  Animations  ***/

#tweening_area
{
	position: relative;
	margin: 30px auto;
	width: 400px;
	height: 250px;
	border: 1px #777;
	background-color: #ccc2;
	cursor: cross;
}
#tweening_area img
{
	position: absolute;
	cursor: pointer;
	transform: translate(190px, 100px);
}

#transition
{
	margin: 20px auto 30px;
	width: 400px;
	height: 250px;
	border: 1px #777;
	background-color: #ccc2;
	position: relative;
	overflow: hidden;
}
#transition > img
{
	position: absolute;
	top: -50px;
	left: 50%;
	margin-left: -32px;
	transition: top left 0.6s back-out, opacity 0.4s, image-color 0.4s 0.3s quadratic-out;
	opacity: 0;
	image-color: #fff;
}
#transition:hover > img
{
	top: 50px;
	opacity: 1;
	image-color: #f61;
}
#transition:hover .alien1 { left: 30%; top: 75px; }
#transition:hover .alien3 { left: 70%; top: 75px; }
#transition .defender
{ 
	transition: image-color 0.3s 0.0s quadratic-out;
	position: absolute;
	left: -44px;
	top: 150px; opacity: 1; 
}
#transition:hover .defender { image-color: #acf;  }
#transition .ray { 
	transition: top 0.4s back-out, opacity 0.4s cubic-in;
	position: absolute;
	top: -130px;
	left: 50%;
	opacity: 0;
	margin-left: -20px;
	width: 40px;
	height: 200px;
	decorator: gradient( vertical #daf0 #fef6 );
}
#transition:hover .ray
{
	opacity: 1;
	top: 0px;
}

@keyframes cube-rotate {
	from { transform: rotate3d(1, -1, 0.3, 0deg);	}
	to { transform: rotate3d(1, -1, 0.3, 360deg);	}
}

.cube_container {
	width: 200px;
	height: 200px;
	margin: 20px auto;
	perspective: 500px;
}
.cube {
	width: 100%;
	height: 100%;
	position: relative;
	animation: 3s cube-rotate infinite back-in-out;
}
.face {
	left: 50px; top: 50px;
	display: block;
	position: absolute;
	width: 100px;
	height: 100px;
	line-height: 100px;
	font-size: 60px;
	color: white;
	text-align: center;
}
/* Define each face based on direction */
.face.front {
	background: rgba(0, 0, 0, 160);
	transform: translateZ(50px);
}
.face.front:hover {
	background: rgba(255, 255, 0, 120);
}
.face.back {
	background: rgba(0, 255, 0, 255);
	color: black;
	transform: rotateY(180deg) translateZ(50px);
}
.face.right {
	background: rgba(196, 0, 0, 200);
	transform: rotateY(90deg) translateZ(50px);
}
.face.left {
	background: rgba(0, 0, 196, 200);
	transform: rotateY(-90deg) translateZ(50px);
}
.face.top {
	background: rgba(196, 196, 0, 200);
	transform: rotateX(90deg) translateZ(50px);
}
.face.bottom {
	background: rgba(196, 0, 196, 200);
	transform: rotateX(-90deg) translateZ(50px);
}


/***  Forms  ***/

form
{
	display: block;
	text-align: left;
}
form input, form select { margin-left: 0; }
form h2 
{
	display: block;
	font-size: 16px;
	font-weight: bold;
	margin-top: 8px;
}
#rating {
	display: inline-block;
	width: 40px;
	padding-left: 1em;
}
#rating_emoji { 
	color: #ffd40f;
	font-size: 1.7em;
}
#form_output 
{
	border: 1px #666;
	font-size: 0.9em;
	background-color: #ddd;
	min-height: 30px;
	margin-top: 10px;
	padding: 5px 8px;
	color: #222;
	white-space: pre-wrap;
	overflow: hidden auto;
}

#controls textarea 
{
	font-size: 18px;
	font-effect: outline(2px #006600);
	color: #ddd;
}


/***  Sandbox  ***/

#sandbox
{
	position: absolute;
	top: 20px;
	right: 30px;
	bottom: 20px;
	left: 30px;
	padding: 0;
}
#sandbox textarea
{
	font-size: 13px;
	color: #222;
	font-family: rmlui-debugger-font;
	width: 50%;
	height: 40%;
}
#sandbox_target 
{
	background-color: #fff;
	border: 1px #000;
	height: 55%;
	margin-top: 15px;
	color: #000;
	text-align: left;
	position: relative;
}
#sandbox_rml_source { margin-left: -5px; }
#sandbox_rcss_source { margin-left: 5px; }
</style>
</head>

<body template="window">

<tabset id="menu">
<tab>Welcome</tab>
<panel id="welcome">
	<p class="title" style="margin-top: 1.8em;">RmlUi 😍</p>
	<p>Have fun fiddling about in this demo.</p>
	<p>Press 'F8' to open up the debugger.</p>
	<p class="title" style="margin-top: 1em;">🎉</p>
</panel>
<tab>Decorators</tab>
<panel id="decorators">
	<h1>Gradient decorator</h1>
	<p>The 'gradient' decorator renders a color gradient in the vertical or horizontal direction.</p>
	<div class="center">
		<button class="gradient">Gradient</button>
		<button class="gradient horizontal">Gradient</button>
	</div>
	
	<h1>Image decorator</h1>
	<p>The 'image' decorator applies an image to the background of an element. By default it stretches the image to the size of the element, but this behavior can be controlled as seen later on.</p>
	<div class="center">
		<div class="side-by-side">
			<div class="image-alien clickable" onclick="change_color"/>
		</div>
		<div class="side-by-side">
			<div class="image-invader"/>
		</div>
		<div class="side-by-side">
			<button>Button</button>
		</div>
	</div>
	
	<h1>Tiled-horizontal decorator</h1>
	<p>The 'tiled-horizontal' decorator separates an image into three parts, with the edges displayed at their native size while the middle part is stretched to cover the remaining width of the element. In each of the following examples an image is displayed at its native size first, and then the decorator is applied to it with its element stretched horizontally.</p>
	<div class="side-by-side">
		<div style="width: 30px; height: 30px; decorator: image( radio );"/>
		<div style="width: 120px; height: 30px; decorator: tiled-horizontal( demo-radio-l, demo-radio-m, demo-radio-r );"/>
	</div>
	<div class="side-by-side">
		<div style="width: 30px; height: 30px; decorator: image( checkbox );"/>
		<div style="width: 120px; height: 30px; decorator: tiled-horizontal( demo-checkbox-l, demo-checkbox-m, demo-checkbox-r );"/>
	</div>
	<div class="side-by-side" width="250px;">
		<div style="width: 96px; height: 85px; decorator: image( demo-title-bar );"/>
		<div style="width: 250px; height: 85px; decorator: tiled-horizontal( title-bar-l, title-bar-c, title-bar-r );"/>
	</div>
	<p>In the third example we show the same title bar that is used to style the sample windows.</p>
	

	<h1>Tiled-vertical decorator</h1>
	<p>The 'tiled-vertical' decorator behaves like tiled-horizontal, but this time it is stretched vertically.</p>
	<div class="side-by-side">
		<div style="width: 30px; height: 30px; decorator: image( radio );"/>
		<div style="width: 30px; height: 80px; decorator: tiled-vertical( demo-radio-t, demo-radio-c, demo-radio-b );"/>
	</div>
	<div class="side-by-side">
		<div style="width: 30px; height: 30px; decorator: image( checkbox );"/>
		<div style="width: 30px; height: 80px; decorator: tiled-vertical( demo-checkbox-t, demo-checkbox-c, demo-checkbox-b );"/>
	</div>
	<div class="side-by-side">
		<div style="width: 30px; height: 30px; decorator: image( checkbox-checked );"/>
		<div style="width: 30px; height: 80px; decorator: tiled-vertical( demo-checked-t, demo-checked-c, demo-checked-b );"/>
	</div>
	<div class="side-by-side">
		<div style="width: 51px; height: 39px; decorator: image( icon-help );"/>
		<div style="width: 51px; height: 80px; decorator: tiled-vertical( demo-help-t, demo-help-c, demo-help-b );"/>
	</div>
	<p>Clearly, not all images are designed to stretch like this. However, one can certainly envision a usage for the first two examples.</p>
	
	<h1>Tiled-box decorator</h1>
	<p>The 'tiled-box' decorator lays out a 3x3 grid within the element, each of the nine parts being filled with a separate sprite or image. The corners stay fixed in size, while the center and edges are stretched to fill the remaining size of the element.</p>
	<p>The following image displays the region used to define the background of the window in this sample.</p>
	<img sprite="window-outer"/>
	<p>The decorator's element can then gracefully be sized in any direction, keeping the corners and edges at a proper size.</p>
	<div class="tiled-box"/>
	
	<h1>Ninepatch decorator</h1>
	<p>The 'ninepatch' decorator is similar to the tiled-box decorator in that it splits the image into nine parts. However, only two sprites are used to define all nine tiles, an outer sprite and an inner sprite.</p>
	
	<p>Let us define the outer sprite by the following image, and the inner sprite as the part within the displayed border.</p>
	<div style="position: relative; text-align: left; width: 145px;">
		<img sprite="textarea"/><img sprite="textarea-inner" style="position: absolute; left: 10px; top: 13px; border: 1px #f0f;"/>
	</div>
	
	<p>When the ninepatch decorator is applied and the element is stretched, the following is rendered.</p>
	<div style="width: 240px; height: 50px; decorator: ninepatch(textarea, textarea-inner);"/>
	<p>Notice that the corners stay fixed, and the inner sprite is stretched. We can also control the rendered size of the edges, here the left edge is displayed at its native size and the others at half their size.</p>
	<div style="width: 240px; height: 50px; decorator: ninepatch(textarea, textarea-inner, .5 .5 .5 1);"/>
	
	<p>If we instead compare this to the image decorator, we see the following.</p>
	<div style="width: 240px; height: 50px; decorator: image(textarea);"/>
	<p>With the image decorator it looks blurry and its borders are stretched.</p>
	
	<div style="width: 850px; margin-left: -175px;">
		<h1>Image decorator fit modes</h1>
		<div class="image-mode">
			<div class="fit-fill"><p>fill</p></div>
			<div class="fit-contain"><p>contain</p></div>
			<div class="fit-cover"><p>cover</p></div>
			<div class="fit-scale-none"><p>scale-none</p></div>
			<div class="fit-scale-down"><p>scale-down</p></div>
		</div>
		<div class="image-mode small">
			<div class="fit-fill"></div>
			<div class="fit-contain"></div>
			<div class="fit-cover"></div>
			<div class="fit-scale-none"></div>
			<div class="fit-scale-down"></div>
		</div>
		<h1>Image decorator alignment modes</h1>
		<div class="image-mode">
			<div class="align-default"><p style="font-style: italic;">default</p></div>
			<div class="align-right"><p>right</p></div>
			<div class="align-left-bottom"><p>left bottom</p></div>
			<div class="align-percent"><p>70% 30%</p></div>
			<div class="align-pixel"><p>100px -15px</p></div>
			<p class="center" style="margin: 0.3em 0 0 0;">Using fit mode 'scale-none'.</p>
		</div>
		<h1>Tiled decorators orientation</h1>
		<p>Orientation can be applied to every tile individually in the 'image', 'tiled-horizontal', 'tiled-vertical', and 'tiled-box' decorators.</p>
		<div class="image-mode">
			<div class="orientation-vertical"><p>flip-vertical</p></div>
			<div class="orientation-horizontal"><p>flip-horizontal</p></div>
			<div class="orientation-rotate"><p>rotate-180</p></div>
		</div>
	</div>

	<h1>Image elements</h1>
	<div class="center">
		<img src="../../../assets/high_scores_defender.tga" class="clickable" onclick="change_color"/>
		<img sprite="icon-game" style="vertical-align: 10px;"/>
		<img src="../../../assets/high_scores_defender.tga" style="image-color: #fc5;" rect="0 0 64 64"/>
		<img src="../../../assets/high_scores_defender.tga" style="image-color: #9c5;" rect="64 0 64 64"/>
	</div>
	<p>The 'img' elements are separate from decorators, but we describe them here for completeness. They can be declared as in html. Additionally, a 'rect' attribute can be used to crop the image. The element can also display sprites declared in a sprite sheet.</p>
	
	<h1>Sprite sheets</h1>
	<p>Sprite sheets are defined by an image source and a collection of sprites, and can be declared in RCSS. Sprites are essentially rectangles into the given image. For example, the following image</p>
	<img src="../../../assets/invader.tga" rect="0 0 500 300" style="margin-top: 10px; margin-bottom: 10px;"/>
	<p>is used to render most sprites in this demo. Sprites can be used in decorators and image elements as if they were separate images.</p>
</panel>
<tab>Animations</tab>
<panel id="animations">
	
	<h1>Transitions</h1>
	<p>Hover over the following to see an animation performed by the transition property in RCSS.</p>
	<div id="transition">
		<img class="alien alien1" src="../../../assets/high_scores_alien_1.tga"/>
		<img class="alien alien2" src="../../../assets/high_scores_alien_2.tga"/>
		<img class="alien alien3" src="../../../assets/high_scores_alien_3.tga"/>
		<div class="ray"><img class="defender" src="../../../assets/high_scores_defender.tga"/></div>
		<div style="height: 110%;"/>
	</div>
	
	<h1>Tweening functions</h1>
	<p>Set animation parameters below and click on the background or the flag.</p>
	<div id="tweening_area" onclick="move_child">
		<img sprite="icon-flag" onclick="change_color"/>
	</div>
	<select name="tween_function" onchange="tween_function">
		<option value="linear" selected>Tweening function</option>
		<option value="back">Back</option>
		<option value="bounce">Bounce</option>
		<option value="circular">Circular</option>
		<option value="cubic">Cubic</option>
		<option value="elastic">Elastic</option>
		<option value="exponential">Exponential</option>
		<option value="linear">Linear</option>
		<option value="quadratic">Quadratic</option>
		<option value="quartic">Quartic</option>
		<option value="quintic">Quintic</option>
		<option value="sine">Sine</option>
	</select>
	<select name="tween_direction" onchange="tween_direction">
		<option value="out" selected>Direction</option>
		<option value="in">In</option>
		<option value="out">Out</option>
		<option value="in-out">In-Out</option>
	</select>
	<div>
		<input type="range" style="width: 150px; margin-right: 1em;" min="0" max="2" step="0.05" value="0.5" onchange="tween_duration"/> 
		Duration <span id="duration">0.50</span> s
	</div>
	
	<h1>Cube</h1>
	<p>The cube is transformed and animated entirely in RCSS using the @keyframes at-rule.</p>
	<div class="cube_container">
		<div class="cube">
			<div class="face back">6</div>
			<div class="face top">5</div>
			<div class="face left">4</div>
			<div class="face bottom">3</div>
			<div class="face right">2</div>
			<div class="face front">1</div>
		</div>
	</div>
</panel>
<tab>Forms</tab>
<panel id="controls">
	<form onsubmit="submit_form">
		<h2>Full name</h2>
		<div>
			<input type="text" size="20" name="name"/>
		</div>
		<h2>Email and password</h2>
		<div>
			<input type="text" size="10" name="email"/>
			<input type="password" size="10" name="password"/>
		</div>
		<h2>Favorite animal</h2>
		<div>
			<input type="radio" name="animal" value="dog" checked/> Dog
			<input type="radio" name="animal" value="cat"/> Cat
			<input type="radio" name="animal" value="narwhal"/> Narwhal
			<input type="radio" name="animal" value="no"/> I don't like animals
		</div>
		<h2>Favorite meals</h2>
		<div>
			<input type="checkbox" name="meals" value="pizza" checked/> Pizza
			<input type="checkbox" name="meals" value="pasta" checked/> Pasta
			<input type="checkbox" name="meals" value="lasagne" checked/> Lasagne
		</div>
		<h2>Rating</h2>
		<div>
			<input type="range" name="rating" min="0" max="100" step="1" value="50" onchange="rating"/> <span id="rating"/><span id="rating_emoji">&nbsp;</span>
		</div>
		<h2>Subject</h2>
		<div>
			<select name="subject">
				<option value="none" selected>Choose your subject</option>
				<option value="feature">Feature request</option>
				<option value="bug">Bug report</option>
				<option value="praise">Praise</option>
				<option value="criticism">Criticism</option>
			</select>
		</div>
		<h2>Message</h2>
		<div>
			<textarea cols="30" rows="5" wrap="nowrap" name="message">😍 Hello 🌐 World! 😎</textarea>
		</div>
		<div style="margin-bottom: 15px;">
			<input type="submit">Submit</input>
		</div>
		<h2>Form output</h2>
		<div id="form_output"></div>
	</form>
</panel>
<tab>Sandbox</tab>
<panel id="sandbox" style="max-width: -1px;">
	<textarea id="sandbox_rml_source" wrap="nowrap" onchange="set_sandbox_body"></textarea>
	<textarea id="sandbox_rcss_source" wrap="nowrap" onchange="set_sandbox_style"></textarea>
	<div id="sandbox_target"></div>
</panel>
</tabset>
</body>
</rml>