Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

254 lines (236 sloc) 6.766 kB
<!doctype html>
<html>
<head>
<title id="widget-title">Opera Extensions | Name of Extension</title>
<style>
html
{
border-top:64px solid #e9eaf0;
border-bottom:64px solid #dee1e9;
background:url(options.bg.png) top center repeat-x #dee1e9;
color:#234;
}
body
{
margin:auto;
min-width:500px;
width:50%;
font-size: 12px;
font-family: sans-serif;
}
a
{
text-decoration:none;
font-weight:bold;
color:#234;
text-shadow:0 1px 0 #fff, 0 0 2px #9cf;
}
a:hover
{
color:#234;
}
fieldset
{
background:#e9eaf0;
border:none;
border-radius:4px;
margin:32px 0;
padding:16px;
}
footer
{
text-align:right;
}
h1
{
margin:0;
font:normal normal 48px/48px sans-serif;
text-shadow:0 1px 0 #fff;
}
h2
{
margin:0;
font:normal normal 12px/16px sans-serif;
}
legend
{
font:normal 18px sans-serif;
text-shadow:0 1px 0 #fff;
}
.buttons{
text-align: center;
}
.buttons input{
font-size: 16px;
}
.feed-url{
width:50%;
}
label {
display: inline-block;
width: 45%;
}
fieldset div {
margin-bottom: 0.5em;
}
header{
height:64px;
padding-left:72px;
background:url(64.png) 2px 2px no-repeat;
margin-bottom:32px;
white-space:nowrap;
}
@media (max-height:360px){
.view-mode {display: none;}
body {width:90%; min-width:0px;}
html {border: none;}
fieldset{margin:10px 0 15px 0;}
header{
height: auto;
padding-left: 47px;
background-size: 35px 35px;
margin: 10px 0 20px 0;
}
h1{
font:normal normal 20px/20px sans-serif;
text-shadow:0 1px 0 #fff;
}
.feed-url {width:50%;}
legend
{
font:normal 14px sans-serif;
text-shadow:0 1px 0 #fff;
font-weight: bold;
}
}
</style>
</head>
<body>
<header class="view-mode"><h1><span id="widget-name">Extension name</span></h1><h2>by <a href="#" id="widget-author">Developer</a></h2></header>
<div>
<fieldset>
<legend>Feed source</legend>
<div>
<label for=defaultFeed>Choose feed from the list:</label>
<select name="defaultFeed">
<option value=""></option>
<option value="http://rss.slashdot.org/Slashdot/slashdot">Slashdot</option>
<option value="http://feeds.bbci.co.uk/news/rss.xml">BBC News</option>
<option value="http://feeds.wired.com/wired/index">Wired</option>
<option value="http://www.engadget.com/rss.xml">Engadget</option>
<option value="http://feeds.reuters.com/reuters/topNews">Reuters</option>
</select>
</div>
<div>
<label for=feedUrl>Or add your favourite feed URL:</label>
<input class="feed-url" type="url" name="feedUrl" value=""/>
</div>
</fieldset>
<fieldset>
<legend>Feed name:</legend>
<div>
<label for=nameCheckbox>Use name from feed:</label>
<input type=checkbox id=name_checkbox name=nameCheckbox />
</div>
<div>
<label for=nameInput>Or assign name</label>
<input type=text id=name_input name=nameInput />
</fieldset>
<fieldset>
<legend>Choose feeds number:</legend>
<input type="number" name="count" min="1" value="1"/>
</fieldset>
<fieldset>
<legend>Set time interval (seconds):</legend>
<input type="number" name="interval" min="1" value="1"/>
</fieldset>
<div class="buttons view-mode">
<input type="button" onclick="window.close();" value="Done"/>
</div>
</div>
<script>
(function()
{
var storage = window.widget.preferences;
var formElements = document.querySelectorAll( 'input,select' );
function walkElements()
{
var type,
value;
for( var i=0,element=null; element=formElements[i++]; )
{
value = storage.getItem(element.name);
type = element.type.toLowerCase();
if (type == 'number') element.value = value;
else if (type == 'select-one'){
for( var j=0,option=null; option=element.options[j++]; )
{
if (option.value == value){
option.selected = true;
break;
}
}
}
else if (type == 'url' && (!storage.getItem( 'defaultFeed') || storage.getItem( 'defaultFeed') == '')){
document.getElementsByName('feedUrl')[0].value = value;
}
else if(element.name == "nameCheckbox") {
element.checked = storage.getItem(element.name) === "true";
element.addEventListener('change', function(e) {
document.getElementById('name_input').disabled = e.target.checked;
}, false);
if(element.checked) {
document.getElementById('name_input').disabled = true;
}
}
else if(element.name == "nameInput") {
element.value = storage.getItem(element.name);
}
element.addEventListener( 'change', changedElement, true );
}
}
function changedElement(e)
{
var element = e.currentTarget;
var type = element.type.toLowerCase();
var name = element.name;
var value = element.value;
if ( type == 'number'){
var patt = /\D/;
if (patt.test(value) || value == '')
value = element.min;
}
else if (type == 'select-one') {
value = element.options[element.selectedIndex].value;
document.getElementsByName('feedUrl')[0].value = '';
storage.setItem( 'feedUrl', value );
}
else if (type == 'url'){
document.getElementsByName('defaultFeed')[0].selectedIndex = 0;
storage.setItem( 'defaultFeed', '' );
}
else if(name === "nameCheckbox") {
value = !!element.checked;
}
storage.setItem( name, value );
}
walkElements();
function $( id, txt, href )
{
var e = document.getElementById(id);
if( e )
{
e.textContent = txt;
if( href||'' )
{
e.href = href||'#';
}
}
}
$( 'widget-title', widget.name );
$( 'widget-name', widget.name );
$( 'widget-author', widget.author, widget.authorHref );
})();
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.