memoria-js
Version:
Extensible form storage for memorising user inputs with localStorage.
134 lines (111 loc) • 5.12 kB
HTML
<html>
<head>
<title>Memoria</title>
<link type="text/css" rel="stylesheet" href="./css/default.css" />
<link type="text/css" rel="stylesheet" href="./../bower_components/semantic-ui/build/packaged/css/semantic.css" />
<!--<script type="text/javascript" src="./../packages/Memoria.js"></script>-->
<!--<script type="text/javascript" src="./../packages/Element.js"></script>-->
<!--<script type="text/javascript" src="./../packages/observers/MultipleSelect.js"></script>-->
<!--<script type="text/javascript" src="./../packages/elements/Input.js"></script>-->
<!--<script type="text/javascript" src="./../packages/elements/Select.js"></script>-->
<!--<script type="text/javascript" src="./../packages/elements/Textarea.js"></script>-->
<script type="text/javascript" src="./../dist/memoria.min.js"></script>
<script type="text/javascript">
Memoria.Observer.Choice = {
setupElement: function(container, value) {
// Find the node with the `data-value` attribute set to the current value from
// the `localStorage`.
var element = container.querySelectorAll('*[data-value="' + value + '"]')[0];
element.classList.add('active');
},
eventFired: function(event, container) {
// Find the other nodes.
var nodes = container.querySelectorAll('div.option');
for (var index = 0; index < nodes.length; index++) {
// Remove all the "active" classes from them.
nodes[index].classList.remove('active');
}
// Apply the active class to the one the user clicked on.
event.target.classList.add('active');
// Find the value of the element to store.
return event.target.innerHTML;
}
}
</script>
</head>
<body>
<form name="contact-form">
<p>Example built using the wonderful <a href="http://semantic-ui.com/" target="_blank">Semantic UI</a>.</p>
<ul>
<li>
<label for="name">Name:</label>
<div class="ui form small input">
<input type="text" name="name" id="name" data-memoria-event="onkeyup" />
</div>
</li>
<li>
<label for="age">Age:</label>
<div class="ui form small input">
<input type="number" id="age" name="age" value="16" />
</div>
</li>
<li>
<label for="email">Email:</label>
<div class="ui form small input">
<input type="text" name="email" id="email" />
</div>
</li>
<li>
<label for="email">Password:</label>
<div class="ui form small input">
<input type="password" name="password" id="password" />
</div>
</li>
<li class="force-height">
<label>Response:</label>
<input name="response" data-memoria-name="response-yep" type="radio" /> Yep
<input name="response" data-memoria-name="response-nope" type="radio" /> Nope
</li>
<li class="force-height">
<label>Gender:</label>
<div class="options" data-memoria-input="Choice" data-memoria-event="click, dblclick" data-memoria-name="gender">
<div class="option" data-value="Male">Male</div>
<div class="option" data-value="Female">Female</div>
</div>
</li>
<li>
<label for="subject">Subject:</label>
<select class="ui form" name="subject" id="subject">
<option>General enquiry about your projects</option>
<option>Wishing to be a contributor</option>
<option>Media enquiry relating to a project</option>
</select>
</li>
<li class="force-height">
<label for="happy">Happy?</label>
<input type="checkbox" id="happy" name="happy" />
</li>
<li>
<label for="message">Message:</label>
<div class="ui form">
<textarea name="message" id="message"></textarea>
</div>
</li>
<li>
<label for="cities">Cities?</label>
<select multiple="true" name="cities" id="cities" class="cities">
<option>London</option>
<option>Paris</option>
<option>Moscow</option>
<option>Rio de Janeiro</option>
<option>Hong Kong</option>
</select>
</li>
<li>
<input class="ui positive button" type="submit" value="Send Away..." />
</li>
</ul>
</form>
</body>
</html>