Skip to content

Commit

Permalink
added popup.html
Browse files Browse the repository at this point in the history
  • Loading branch information
wata committed Nov 22, 2011
1 parent 637f947 commit f132a40
Show file tree
Hide file tree
Showing 5 changed files with 169 additions and 81 deletions.
8 changes: 4 additions & 4 deletions background.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!doctype html>
<html lang="ja">
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="background.js"></script>
<meta charset="utf-8">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="background.js"></script>
</head>
<body>
</body>
Expand Down
9 changes: 2 additions & 7 deletions background.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
var cpan_url = 'https://metacpan.org';

// Click from Browser Action Icon
chrome.browserAction.onClicked.addListener(function(tab) {
selectOrCreateTab(cpan_url);
});

// Config of search box
chrome.omnibox.onInputEntered.addListener(
function(text){
Expand Down Expand Up @@ -107,8 +102,8 @@ function loadFeed() {
entry.content.match(/img src="([^"]+)"/);
var img_url = RegExp.$1;
if (settings.notify) {
//Fetch keywords
if (!settings.all && settings.favorites.length) {
// Fetch keywords
if (settings.favorites.length) {
for (var j= 0; j < settings.favorites.length; j++) {
var re = new RegExp(settings.favorites[j], "i");
if ( entry.title.match(re) != null ) {
Expand Down
6 changes: 3 additions & 3 deletions manifest.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "CPAN Helper",
"version": "0.3",
"version": "0.4",
"description": "Tiny helper extension for CPAN",
"icons": {
"16": "icon_16.png",
Expand All @@ -12,7 +12,8 @@
},
"browser_action": {
"default_icon": "icon_19.png",
"default_title": "CPAN Helper"
"default_title": "CPAN Helper",
"default_popup": "popup.html"
},
"background_page": "background.html",
"content_scripts": [
Expand All @@ -33,4 +34,3 @@
"homepage_url": "https://github.com/wata/CPANHelper",
"options_page": "settings.html"
}

123 changes: 123 additions & 0 deletions popup.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
html, body { margin:0; padding:0; }
ul, ol { margin:0; padding:0; list-style:none; }
li { margin:0; padding:0; }

body {
padding-right:20px;
font-size:14px;
line-height:1.4;
font-family:"Helvetica Neue", "Lucida Grande", Arial, Helvetica, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, sans-serif;
}

#wrapper { width:400px; height:500px; }

header { border:1px solid #CCC; background:#EAEEF3; overflow:hidden; clear:both; }
header li { padding:7px 15px; float:left; color:#426DC9; cursor:pointer; text-shadow:white 0 1px 1px; }
header .active { color:black; text-shadow:#BBCEE9 0 1px 1px; background:#BBCEE9; }

#notifications { word-break:break-all; }
#notifications li a {
display:block;
padding:10px;
color:#666;
text-decoration:none;
text-shadow:white 0 1px 1px;
border:1px solid #CCC;
border-top-color:white;
border-bottom-color:#BBB;
background:-webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
}
#notifications li a:hover {
color:#426DC9;
-webkit-box-shadow:1px 0 3px rgba(0, 0, 0, 0.2);
background:#EBEBEB -webkit-linear-gradient(#FEFEFE, #F8F8F8 40%, #E9E9E9);
}

.author { float:left; }
.author img { width:32px; height:32px; border:1px solid #DDD; }
.body { margin-left:40px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function init(){
var settings = JSON.parse(localStorage.getItem('settings'));
var feed = new google.feeds.Feed("http://frepan.org/feed/index.rss");
feed.setNumEntries(20);
feed.load(function(result) {
if (!result.error) {
var public = $('<ul>'), watched = $('<ul>'), count = 0;
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
entry.content.match(/img src="([^"]+)"/);
var img = RegExp.$1;
var html = '<li><a href="' + entry.link + '" target="_blank">';
html += '<div class="author"><img src="' + img + '" width="32" height="32" /></div>';
html += '<div class="body"><strong>' + entry.title + '</strong><br />'
+ entry.contentSnippet + '</div>';
html += '</a></li>';

//Fetch keywords
if (settings.favorites.length) {
for (var j= 0; j < settings.favorites.length; j++) {
var re = new RegExp(settings.favorites[j], "i");
if (entry.title.match(re) != null) {
watched.append(html);
count++;
}
}
}
public.append(html);
}

$('#public').html(public);
$('#watched').html(watched);
$('#nav-watched b').html(count);
}
});

$('#nav-public, #nav-watched').click(function(){
$('header li').removeClass('active');
$(this).addClass('active');
$('#notifications > div').each(function(){
$(this).hide();
});
$('#notifications #' + $(this).attr('title')).show();
});

$('#nav-settings').click(function(){
chrome.tabs.create(
{ url: 'settings.html'},
function(tab) {
window.close();
}
);
});
}
</script>
</head>
<body onload="init();">
<div id="wrapper">
<header>
<ul>
<li id="nav-public" class="active" title="public">Public</li>
<li id="nav-watched" title="watched">Watched (<b></b>)</li>
<li id="nav-settings">Settings</li>
<li>
<a href="https://metacpan.org/" target="_blank" style="color:#426DC9;text-decoration:none;">MetaCPAN</a>
</li>
</ul>
</header>
<div id="notifications">
<div id="public"></div>
<div id="watched"></div>
</div>
</div>
</body>
</html>
104 changes: 37 additions & 67 deletions settings.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,69 +3,30 @@
<head>
<meta charset="utf-8">
<title>CPAN Helper</title>
<style>
html, body{
border: 0;
margin: 0;
padding: 0;
height: 100%;
}
<style type="text/css">
html, body{ border:0; margin:0; padding:0; height:100%; }
body {
font-size: 16px;
font-family: "Helvetica Neue", "Lucida Grande", Arial, Helvetica, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, sans-serif;
font-weight: lighter;
background: #fff;
color: #141414;
}
a, a:visited {
color: #666;
text-decoration: none;
}
a:hover {
background: #fff;
color: #0571A0;
}
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin: 0;
padding: 0;
}
img {
vertical-align: middle;
}
#wrapper {
margin: 0 auto;
padding: 20px 0;
width: 600px;
}
#wrapper h1 {
font-weight: 100;
font-size: 50px;
letter-spacing: -1px;
line-height: 80%;
color: #666;
}
#wrapper h2 {
font-weight: 200;
font-size: 20px;
}
#settings {
margin: 0 0 50px 0;
}
#settings li {
margin: 0 0 10px 0;
}
#settings .description {
font-size: 12px;
color: #666;
margin-left: 20px;
}
font-size:16px;
font-family:"Helvetica Neue", "Lucida Grande", Arial, Helvetica, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, sans-serif;
font-weight:lighter;
background:#fff;
color:#141414;
}
a, a:visited { color:#666; text-decoration:none; }
a:hover { color:#426DC9; }
ul, ol { margin:0; padding:0; list-style:none; }
li { margin:0; padding:0; }
img { vertical-align:middle; }
footer { margin-top:100px; font-size:12px; text-align:right; }

#wrapper { margin:0 auto; padding:20px 0; width:600px; }
#wrapper h1 { font-weight:100; font-size:50px; letter-spacing:-1px; line-height:80%; color:#666; }
#wrapper h2 { font-weight:200; font-size:20px; }
#settings { margin:0 0 50px 0; }
#settings li { margin:0 0 10px 0; }
#settings .description { font-size:12px; color:#666; margin-left:10px; }
</style>
<script>
<script type="text/javascript">
function init(){
var settings = JSON.parse(localStorage.getItem('settings'));
document.getElementById('notify-setting').checked = settings.notify;
Expand Down Expand Up @@ -102,6 +63,7 @@
<body onload="init();">
<div id="wrapper">
<h1><img src="icon_128.png" />CPAN Helper</h1>

<h2>Settings</h2>
<ul id="settings">
<li>
Expand All @@ -117,19 +79,27 @@ <h2>Settings</h2>
<option value="15">15</option>
<option value="20">20</option>
</select>&nbsp;sec
</li>
<br />
</li><br />
<li>
<input type="checkbox" id="notify-all" onclick="allOrFavorite()">
<label for="notify-all">Notify all releases</label>
</li>
<li>
Only notify favorite modules and authors:&nbsp;
<input type="text" id="notify-favorites"><br />
<div class="description">ex. Plack,Text-Xslate,tokuhirom</div>
</li>
or only notify watch modules and authors?<br /><br />
<input type="text" id="notify-favorites" size="60" />
<span class="description">ex. Plack,Text-Xslate,tokuhirom</span>
</li><!--<br />
<li>
<input type="checkbox" id="contentScript" onclick="">
<label for="contentScript">Content script on MetaCPAN</label>
</li>-->
</ul>
<button id="saveAndClose" onclick="saveAndClose()">Save &amp; Close</button>

<footer>
The source code is available on
<a href="https://github.com/wata/CPANHelper" target="_blank">https://github.com/wata/CPANHelper</a>.
</footer>
</div>
</body>
</html>

0 comments on commit f132a40

Please sign in to comment.