<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../infusion/src/lib/normalize/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="../infusion/src/framework/core/css/fluid.css" />
<link rel="stylesheet" type="text/css" href="../infusion/src/framework/preferences/css/Enactors.css" />
<link rel="stylesheet" type="text/css" href="../infusion/src/framework/preferences/css/PrefsEditor.css" />
<link rel="stylesheet" type="text/css" href="../infusion/src/framework/preferences/css/SeparatedPanelPrefsEditor.css" />
<link rel="stylesheet" type="text/css" href="css/uiOptions.css" />
<title>Preferences Editor Demo: Using infusion-all.js (source)</title>
<script type="text/javascript" src="../infusion/infusion-all.js"></script>
</head>
<body class="prefsEditor-demo-theme fl-focus">
<script type="text/javascript">
$(document).ready(function () {
fluid.uiOptions.prefsEditor(".flc-prefsEditor-separatedPanel", {
terms: {
"templatePrefix": "../infusion/src/framework/preferences/html",
"messagePrefix": "../infusion/src/framework/preferences/messages"
},
"tocTemplate": "../infusion/src/components/tableOfContents/html/TableOfContents.html",
"ignoreForToC": {
"overviewPanel": ".flc-overviewPanel"
}
});
});
</script>
<!-- BEGIN markup for Preference Editor -->
<div class="flc-prefsEditor-separatedPanel fl-prefsEditor-separatedPanel">
<!-- This is the div that will contain the Preference Editor component -->
<div class="flc-slidingPanel-panel flc-prefsEditor-iframe"></div>
<!-- This div is for the sliding panel that shows and hides the Preference Editor controls -->
<div class="fl-panelBar">
<span class="fl-prefsEditor-buttons">
<button id="reset" class="flc-prefsEditor-reset fl-prefsEditor-reset"><span class="fl-icon-undo"></span> Reset</button>
<button id="show-hide" class="flc-slidingPanel-toggleButton fl-prefsEditor-showHide"> Show/Hide</button>
</span>
</div>
</div>
<!-- END markup for Preference Editor -->
<main class="fl-centered">
<div class="flc-toc-tocContainer toc"> </div>
<div class="header">
<h1>Preferences Editor</h1>
<div class="tagline">This page might be a bit difficult to read or use.<br />
Why don't you consider using the <span class="disp-pref">display preferences</span> option?</div>
</div>
<div class="instructions">
<h2>Some helpful tips</h2>
<ol>
<li>Preference Editor and its different configurations.<br/>
<span class="instruction-comment">On this page, Preference Editor can be found along the top edge.
There are other layout options in development - see <a href="http://wiki.fluidproject.org/display/fluid/%28Floe%29+UI+Options+Design+Wireframes%2C+C.1" target="_blank" title="Opens in new window">Preference Editor Design Wireframes</a>.</span></li>
<li>Try tinkering with the options.</li>
</ol>
</div>
<div class="demo-columns content">
<div class="demo-columns">
<h2>Introduction</h2>
<img src="images/photo_orange.png" alt="an orange"/>
<p>
Aliquam varius lacus non arcu venenatis scelerisque quis in sapien.
Curabitur nec felis tortor.
Cras euismod ipsum erat.
Sed ac lacus dolor, sed vestibulum sem.
<a href="#">Donec tristique</a> lacinia augue.
In mollis venenatis mollis.
Duis facilisis fermentum accumsan.
Quisque aliquet eros at nunc volutpat euismod.
</p>
<p>
Pellentesque dictum mattis sapien a consectetur.
In <a href="#">hac habitasse</a> platea dictumst.
Integer pharetra accumsan euismod.
Morbi congue leo eu diam bibendum luctus.
Ut quam orci, rhoncus sed fermentum eget, tempus rhoncus justo.
Donec gravida lorem vel orci aliquam vitae tristique ipsum pulvinar.
Sed lorem orci, gravida ac tristique at, aliquam eget massa.
</p>
<p>
In diam lorem, consequat vel lobortis non, pretium in leo.
Cras ut dolor ac nunc pharetra venenatis id at orci.
Nam a nibh id lectus dignissim molestie.
Donec est arcu, luctus eu tempor quis, posuere non risus.
</p>
<h2>Why do oranges taste better than apples?</h2>
<p>
Aliquam mattis placerat odio.
Aliquam sodales euismod sodales.
Integer mollis nulla eget quam imperdiet vitae elementum sapien adipiscing.
</p>
</div>
<div class="demo-columns">
<p>
Sed tempus laoreet facilisis.
Curabitur at augue in justo tincidunt cursus.
Aliquam iaculis libero vel dolor fringilla a rutrum nisl tempus.
</p>
<p>
Cras lorem nulla, tincidunt nec dapibus id, interdum pellentesque elit.
Sed faucibus posuere augue, ac vehicula dolor feugiat id.
Ut scelerisque mollis aliquam.
Nulla facilisi.
Vestibulum porttitor pulvinar mauris et placerat.
Donec ultrices, eros eget pharetra eleifend, risus orci iaculis leo, nec facilisis nisi odio et nunc.
</p>
<p>
<a href="#">Sed varius sem sed sapien cursus</a> vel iaculis nisl rhoncus.
Fusce placerat sapien ut erat mollis vestibulum.
Aenean eget tellus sem.
</p>
<h2>Some people actually prefer apples</h2>
<img src="images/photo_apple.png" alt="an apple"/>
<p>
Praesent vulputate, sem vel feugiat iaculis, eros diam condimentum nisl, eget suscipit nunc est vitae justo.
Vivamus imperdiet convallis laoreet.
Quisque eget magna vitae tortor egestas imperdiet.
</p>
<p>
Donec at ipsum magna.
Suspendisse potenti.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Mauris <a href="#">vel eros eu purus</a> sodales rutrum.
Suspendisse potenti.
</p>
</div>
<div class="demo-columns">
<p>
Fusce vel massa vitae dui sollicitudin adipiscing eget sed velit.
Fusce auctor vehicula turpis non faucibus.
Sed faucibus mollis enim venenatis mollis.
Morbi cursus scelerisque ornare.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras at cursus nisl.
</p>
<h2>Conclusion: Oranges are still yummier</h2>
<p>
Praesent consequat laoreet tellus, quis molestie dui pretium sit amet.
Donec et turpis vitae tortor blandit tristique eu sed justo.
Fusce in quam sem, ac hendrerit nisl.
<a href="#">Mauris consequat tellus in est vehicula placerat.</a>
Sed sed ornare quam.
Quisque vel faucibus augue.
Donec euismod tellus a risus fringilla congue.
Proin feugiat, mauris ut ullamcorper pharetra, sem nulla lacinia nunc, ut hendrerit justo urna malesuada libero.
Pellentesque viverra fringilla arcu, consectetur interdum sapien tempus sed.
Donec tincidunt consequat libero, quis vulputate magna ullamcorper.
</p>
</div>
<div class="demo-columns">
<h2>Leave some feedback</h2>
<form class="feedback-form">
<div>
<label for="email">Email address <span class="optional">(optional)</span></label>
<input type="text" id="email" value="This form is non-functional" />
</div>
<div>
<label for="comments">Your comments</label>
<textarea id="comments">This form is non-functional, and exists only for demonstrating Preferences Editor functionality</textarea>
</div>
<div>
<button class="fl-force-right">Send</button>
</div>
</form>
</div>
</div>
</main>
</body>
</html>