Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

もうちょい汎用的に

  • Loading branch information...
commit b78e67ed7c6e9b31d8722253947367647a787e0b 1 parent 13cd60c
@Cside authored
Showing with 102 additions and 8 deletions.
  1. +11 −0 config.pl
  2. +34 −1 index.html
  3. +22 −5 lib/main.js
  4. +35 −2 setup.pl
View
11 config.pl
@@ -0,0 +1,11 @@
++{
+ base_url => 'http://blog.hatena.ne.jp/',
+ rules => [
+ +{
+ filter => '\.icon-',
+ css => 'http://hatenablog.com/css/admin.css',
+ image => 'http://hatenablog.com/images/admin/admin-sprite.png',
+ common => '[class^="icon-"], [class*=" icon-"]',
+ },
+ ],
+}
View
35 index.html
@@ -1,6 +1,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
+ <title>Visual Icon Class</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="./lib/bootstrap.min.css" />
<script src="./lib/cssParser.js" type="text/javascript"></script>
@@ -13,12 +14,43 @@
.__base {
display: inline-block;
}
+
+ body {
+ background-color: #FDFDFA;
+ }
+ #container {
+ width: 980px;
+ padding: 20px;
+ }
+ div.section, table.description {
+ margin: 10px;
+ padding: 10px;
+ }
+ h1, h2, h3, h4, h5, h6 {
+ margin: 20px 0 10px 0;
+ }
+ .section {
+ margin: 0 0 0 25px;
+ }
+ table th {
+ text-align: left;
+ /* background-color: #E5E5E3; */
+ }
+ table th, td {
+ padding: 5px;
+ }
+ table, p {
+ margin-left: 25px;
+ }
</style>
</head>
<body baseurl="http://blog.hatena.ne.jp/">
- <textarea
+ <div id="container">
+ <h1>Visual Icon Class</h1>
+ <textarea
style="display: none;"
image="http://hatenablog.com/images/admin/admin-sprite.png"
+ css="http://hatenablog.com/css/admin.css"
filter="\.icon-"
common="[class^=&quot;icon-&quot;], [class*=&quot; icon-&quot;]"
maxwidth=""
@@ -3834,6 +3866,7 @@
</textarea>
+ </div>
</body>
<style id="style" type="text/css">
</style>
View
27 lib/main.js
@@ -61,6 +61,7 @@ $(function(){
var rule = $(this).attr('filter') ? new RegExp($(this).attr('filter')) : null;
var image = $(this).attr('image');
var common = $(this).attr('common');
+ var cssFile = $(this).attr('cssFile');
var maxWidth = $(this).attr('maxwidth') .replace(/ ?px$/, '');
var maxHeight = $(this).attr('maxheight').replace(/ ?px$/, '');
var minWidth = $(this).attr('minwidth') .replace(/ ?px$/, '');
@@ -77,8 +78,9 @@ $(function(){
var cssText = commonStyle.text
.replace(/(url\("?)\//, '$1' + baseUrl)
.replace(/^.+({.+$)/, sprintf('.%s %s', styleId, '$1'));
- $('#style').append(text2node(commonStyle.text));
+ $('#style').append(text2node(cssText));
}
+ icons = [];
css.forEach(function(style){
if (!style.has('background-position')) return;
if (rule && !rule.test(style.selector)) return;
@@ -98,8 +100,8 @@ $(function(){
var icon = $('<span></span>');
icon.addClass('__base');
- icon.attr('selector', style.selector); // XXX
- icon.attr('rule', rule); // XXX
+ icon.attr('selector', style.selector); // debug
+ icon.attr('rule', rule); // debug
if (common) icon.addClass(styleId);
var styleText = '';
@@ -117,9 +119,24 @@ $(function(){
content: style.text.replace(/({|;)/g, '$1<br/>'),
})
- $('body').append(icon);
+ icons.push(icon);
});
- $('body').append('<br/><hr/>');
+ var div = $('<div class="section"></div>')
+ var table = $('<table class="description"></table>');
+ if (rule) table.append('<tr><th>filter </th><td>' + rule + '</td></tr>');
+ if (common) table.append('<tr><th>common </th><td>' + common + '</td></tr>');
+ if (image) table.append('<tr><th>image </th><td>' + image + '</td></tr>');
+ if (cssFile) table.append('<tr><th>css</th><td>' + cssFile + '</td></tr>');
+ table.append(iconHolder);
+ div.append(table);
+
+ var iconHolder = $('<div></div>');
+ icons.forEach(function(icon){
+ iconHolder.append(icon);
+ });
+ div.append(iconHolder);
+
+ $('#container').append(div);
});
});
View
37 setup.pl
@@ -14,15 +14,16 @@
my $css = $_->{css} || die "required parameter: 'css'";
my $css_source = get($css) || die "fetch failed: $_->{css}\n" . $!;
my $filter = $_->{filter} || '';
- my $common = encode_entities($_->{common} || '', q|"|);
my $max_width = $_->{max_width} || '';
my $max_height = $_->{max_height} || '';
my $min_width = $_->{min_width} || '';
my $min_height = $_->{min_height} || '';
+ my $common = encode_entities($_->{common} || '', q|"|);
<<"HTML";
<textarea
style="display: none;"
image="$image"
+ css="$css"
filter="$filter"
common="$common"
maxwidth="$max_width"
@@ -42,6 +43,7 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
+ <title>Visual Icon Class</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="./lib/bootstrap.min.css" />
<script src="./lib/cssParser.js" type="text/javascript"></script>
@@ -54,10 +56,41 @@
.__base {
display: inline-block;
}
+
+ body {
+ background-color: #FDFDFA;
+ }
+ #container {
+ width: 980px;
+ padding: 20px;
+ }
+ div.section, table.description {
+ margin: 10px;
+ padding: 10px;
+ }
+ h1, h2, h3, h4, h5, h6 {
+ margin: 20px 0 10px 0;
+ }
+ .section {
+ margin: 0 0 0 25px;
+ }
+ table th {
+ text-align: left;
+ /* background-color: #E5E5E3; */
+ }
+ table th, td {
+ padding: 5px;
+ }
+ table, p {
+ margin-left: 25px;
+ }
</style>
</head>
<body baseurl="$base_url">
- $content
+ <div id="container">
+ <h1>Visual Icon Class</h1>
+ $content
+ </div>
</body>
<style id="style" type="text/css">
</style>
Please sign in to comment.
Something went wrong with that request. Please try again.