forked from qo-op/bunkerbox
Add TagCloud Channels data to Homepage
This commit is contained in:
parent
55c681c215
commit
6c070f81d4
|
|
@ -403,6 +403,8 @@ echo "##########################################################################
|
|||
sed -i "s~_VUID_~$INDEX/$VUID~g" ~/.zen/bunkerbox/homepage/index.html
|
||||
sed -i "s/_WHO_/$(date -u "+%Y-%m-%d#%H:%M:%S")@$IPFSNODEID/g " ~/.zen/bunkerbox/homepage/index.html
|
||||
sed -i "s~_TITLE_~$TITLE~g" ~/.zen/bunkerbox/homepage/index.html
|
||||
TAGS=$(${MY_PATH}/tools/get_tagcloud_data.sh $IPNS)
|
||||
sed -i "s~_TAGCLOUD_~$TAGS~g" ~/.zen/bunkerbox/homepage/index.html
|
||||
|
||||
# Copy json's
|
||||
cp ~/.zen/bunkerbox/history.json ~/.zen/bunkerbox/homepage/history.json
|
||||
|
|
|
|||
|
|
@ -61,6 +61,8 @@
|
|||
|
||||
<div id="videosList"><div class="wrapper"></div></div>
|
||||
|
||||
<div id="channels"></div>
|
||||
|
||||
<article>
|
||||
<div class="row justify-center">
|
||||
<h1 class="video-title">
|
||||
|
|
@ -158,6 +160,24 @@ function testLatency(cb) {
|
|||
cb(avg);
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
let options = {
|
||||
container: {
|
||||
width: 630,
|
||||
backgroundColor: '#fafaf8',
|
||||
//fontFamily: '"Times New Roman", Times, serif',
|
||||
},
|
||||
tag: {
|
||||
format: '<a href="{tag.link}">{tag.name}</a>: {tag.weight}',
|
||||
maxFontSize: 41, // max font size in pixels
|
||||
minFontSize: 8, // min font size in pixels
|
||||
textShadow: true // enable text shadow
|
||||
},
|
||||
_TAGCLOUD_
|
||||
}
|
||||
$('#channels').tagCloud(options);
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,264 @@
|
|||
/**
|
||||
* Tag cloud plugin for jQuery, showing bigger tags in the center
|
||||
* @version 1.2.0
|
||||
* @release 2021-04-07
|
||||
* @repository https://github.com/peterthoeny/jquery.tagcloud
|
||||
* @author Peter Thoeny, https://twiki.org/ & https://github.com/peterthoeny
|
||||
* @copyright 2021 Peter Thoeny, https://github.com/peterthoeny
|
||||
* @license MIT, https://opensource.org/licenses/mit-license
|
||||
*/
|
||||
(function($) {
|
||||
|
||||
'use strict';
|
||||
|
||||
let debug = false;
|
||||
|
||||
function debugLog(msg) {
|
||||
if(debug) {
|
||||
console.log('- tagCloud: ' + msg);
|
||||
}
|
||||
}
|
||||
|
||||
function entityEncode(val) {
|
||||
val = val.toString()
|
||||
.replace(/&/g, '&')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>');
|
||||
return val;
|
||||
}
|
||||
|
||||
$.fn.tagCloud = function(options) {
|
||||
let self = $(this);
|
||||
let addLink = options && options.tag && options.tag.format ? false : true;
|
||||
options = $.extend({}, $.fn.tagCloud.defaults, options);
|
||||
if(options.debug != undefined) {
|
||||
debug = options.debug;
|
||||
}
|
||||
debugLog('options: ' + JSON.stringify(options, null, ''));
|
||||
let tagName = self.prop('tagName');
|
||||
if(tagName === 'UL') {
|
||||
if(!options.data) {
|
||||
options.data = [];
|
||||
}
|
||||
self.find('li').each(function(idx, elem) {
|
||||
let weight = $(elem).data('weight');
|
||||
if(weight == undefined) {
|
||||
weight = $(elem).find(':first-child').data('weight');
|
||||
}
|
||||
let href = $(elem).find('a').attr('href') || '';
|
||||
let tag = $(elem).text() || '?';
|
||||
debugLog(weight +', '+href+', '+tag+', '+$(elem).html());
|
||||
if(options.data[idx]) {
|
||||
if(weight != undefined) {
|
||||
options.data[idx].weight = Number(weight);
|
||||
}
|
||||
if(href) {
|
||||
options.data[idx].link = href;
|
||||
}
|
||||
options.data[idx].name = tag;
|
||||
} else {
|
||||
options.data.push({ name: tag, link: href, weight: Number(weight) })
|
||||
}
|
||||
});
|
||||
self.hide();
|
||||
if(self.next().hasClass('jqTcContainer')) {
|
||||
self.next().remove();
|
||||
}
|
||||
self.after('<div></div>');
|
||||
self = self.next();
|
||||
}
|
||||
let css = {};
|
||||
Object.keys(options.container).forEach(function(key) {
|
||||
css[key] = (options[key] != undefined) ? options[key] : options.container[key];
|
||||
});
|
||||
self.addClass('jqTcContainer').css(css);
|
||||
let containerWidth = options.container.width;
|
||||
let minWeight = 1000000000000;
|
||||
let maxWeight = -1000000000000;
|
||||
let minFontSize = options.tag.minFontSize || $.fn.tagCloud.defaults.tag.minFontSize;
|
||||
let maxFontSize = options.tag.maxFontSize || $.fn.tagCloud.defaults.tag.maxFontSize;
|
||||
let format = options.tag.format || $.fn.tagCloud.defaults.tag.format;
|
||||
let sum = 0;
|
||||
debugLog('minFontSize: '+minFontSize+', maxFontSize: '+maxFontSize);
|
||||
options.data.forEach(function(item) {
|
||||
if(item.weight < minWeight) {
|
||||
minWeight = item.weight;
|
||||
}
|
||||
if(item.weight > maxWeight) {
|
||||
maxWeight = item.weight;
|
||||
}
|
||||
sum += item.weight;
|
||||
});
|
||||
let a = (maxFontSize - minFontSize) / (maxWeight - minWeight);
|
||||
let b = minFontSize - (minWeight * a);
|
||||
debugLog('minWeight: '+minWeight+', maxWeight: '+maxWeight+', a: '+a+', b: '+b);
|
||||
let tags = options.data.sort(function(a, b) {
|
||||
if(a.weight > b.weight) {
|
||||
return -1;
|
||||
} else if(a.weight < b.weight) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}).map(function(item, idx) {
|
||||
let html = format
|
||||
.replace(/\{tag\.name\}/g, item.name)
|
||||
.replace(/\{tag\.link\}/g, item.link)
|
||||
.replace(/\{tag\.weight(?:\.(\d))?\}/g, function(m, c1) {
|
||||
let num = item.weight;
|
||||
if(c1) {
|
||||
let factor = 10 ** parseInt(c1);
|
||||
num = Math.round(num * factor) / factor;
|
||||
}
|
||||
return num.toString();
|
||||
})
|
||||
.replace(/\{tag\.percent(?:\.(\d))?\}/g, function(m, c1) {
|
||||
let num = 100 * item.weight / sum;
|
||||
let factor = 1;
|
||||
if(c1) {
|
||||
factor = 10 ** parseInt(c1);
|
||||
}
|
||||
num = Math.round(num * factor) / factor;
|
||||
return num.toString() + '%';
|
||||
});
|
||||
if(addLink && item.link) {
|
||||
html = '<a href="' + item.link + '" target="_blank">' + html + '</a>';
|
||||
}
|
||||
let size = parseInt((a * item.weight + b) * 10, 10) / 10;
|
||||
let attrs = [
|
||||
'class="jqTcTag"',
|
||||
'data-name="' + entityEncode(item.name) + '"',
|
||||
'data-link="' + entityEncode(item.link || '') + '"',
|
||||
'data-weight="' + item.weight + '"',
|
||||
'data-size="' + size + '"'
|
||||
];
|
||||
let style = 'style="font-size: ' + size + 'px;';
|
||||
let bgColor = item.bgColor || item.backgroundColor || options.tag.backgroundColor ||
|
||||
$.fn.tagCloud.defaults.backgroundColors[idx] || $.fn.tagCloud.defaults.defaultTagBackgroundColor;
|
||||
if(bgColor) {
|
||||
style += ' background-color: ' + bgColor + ';';
|
||||
}
|
||||
let color = item.color || options.tag.color || $.fn.tagCloud.defaults.defaultTagColor;
|
||||
if(color != 'auto') {
|
||||
style += ' color: ' + color + ';';
|
||||
}
|
||||
bgColor
|
||||
.replace(/^#(.)(.)(.)$/, '#$1$1$2$2$3$3')
|
||||
.replace(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/i, function(m, c1, c2, c3) {
|
||||
let brightness = Math.round((
|
||||
(Number('0x' + c1) * 299) +
|
||||
(Number('0x' + c2) * 587) +
|
||||
(Number('0x' + c3) * 114)
|
||||
) / 1000);
|
||||
if(brightness > 125) {
|
||||
if(color === 'auto') {
|
||||
style += ' color: black;';
|
||||
}
|
||||
if(options.tag.textShadow) {
|
||||
style += ' text-shadow: 0px 0px 2px #dddddd;';
|
||||
}
|
||||
} else {
|
||||
if(color === 'auto') {
|
||||
style += ' color: white;';
|
||||
}
|
||||
if(options.tag.textShadow) {
|
||||
style += ' text-shadow: 0px 0px 2px #222222;';
|
||||
}
|
||||
}
|
||||
});
|
||||
style += '"';
|
||||
attrs.push(style);
|
||||
if(item.tooltip) {
|
||||
attrs.push('title="' + entityEncode(item.tooltip) + '"');
|
||||
}
|
||||
html = '<span ' + attrs.join(' ') + '>' + html + '</span>';
|
||||
self.html(html); // set temporarily to get width and height
|
||||
let tagElem = self.find('span');
|
||||
item.width = tagElem.outerWidth();
|
||||
item.height = tagElem.outerHeight();
|
||||
item.html = html;
|
||||
item.ttLength = tagElem.length;
|
||||
item.ttHtml = self.text();
|
||||
return item;
|
||||
});
|
||||
debugLog('tags: ' + JSON.stringify(tags, null, ' '))
|
||||
let rows = [];
|
||||
let cells = [];
|
||||
let width = 0;
|
||||
let addRight = true;
|
||||
let addBottom = true;
|
||||
let padding = 2 * 5 + 5;
|
||||
let containerPadding = padding;
|
||||
let tagMargin = 2 * 10 + 5;
|
||||
let verticalAlign = 'middle';
|
||||
tags.forEach(function(item) {
|
||||
if(width + item.width + tagMargin >= containerWidth - containerPadding) {
|
||||
let rowHtml = '<tr><td style="vertical-align: ' + verticalAlign + ';">' + cells.join('') + '</td></tr>';
|
||||
if(addBottom) {
|
||||
rows.push(rowHtml);
|
||||
verticalAlign = 'bottom';
|
||||
} else {
|
||||
rows.unshift(rowHtml);
|
||||
verticalAlign = 'top';
|
||||
}
|
||||
addBottom = !addBottom;
|
||||
containerPadding += 1.5 * padding;
|
||||
cells = [];
|
||||
width = 0;
|
||||
}
|
||||
if(addRight) {
|
||||
cells.push(item.html);
|
||||
} else {
|
||||
cells.unshift(item.html);
|
||||
}
|
||||
addRight = !addRight;
|
||||
width = width + item.width + tagMargin;
|
||||
});
|
||||
let rowHtml = '<tr><td style="vertical-align: ' + verticalAlign + ';">' + cells.join('') + '</td></tr>';
|
||||
if(addBottom) {
|
||||
rows.push(rowHtml);
|
||||
} else {
|
||||
rows.unshift(rowHtml);
|
||||
}
|
||||
let html = '<table class="jqTcTable">' + rows.join('') + '</table>';
|
||||
let tagStyle = {};
|
||||
Object.keys(options.tag).forEach(key => {
|
||||
if(!/^(minFontSize|maxFontSize|format|color|textShadow|backgroundColor)$/.test(key)) {
|
||||
tagStyle[key] = options.tag[key];
|
||||
}
|
||||
});
|
||||
self.html(html).find('.jqTcTag').css(tagStyle);
|
||||
};
|
||||
|
||||
$.fn.tagCloud.defaults = {
|
||||
container: {
|
||||
width: 500,
|
||||
height: 'auto',
|
||||
backgroundColor: '#f0f0f0',
|
||||
color: '#666666',
|
||||
padding: '10px 5px',
|
||||
fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif'
|
||||
},
|
||||
tag: {
|
||||
minFontSize: 10, // min font size in pixels
|
||||
maxFontSize: 40, // max font size in pixels
|
||||
format: '{tag.name}', // also '{tag.link}', '{tag.weight}', '{tag.percent}'
|
||||
color: 'auto', // auto text color, black for light background, white for dark background
|
||||
textShadow: false // text shadow, enable for better visibility
|
||||
},
|
||||
backgroundColors: [
|
||||
'#db843d', '#92a8cd', '#a47d7c', '#058dc7', '#50b432', '#ed561b', '#24cbe5', '#64e572',
|
||||
'#ff9655', '#d6cb54', '#6af9c4', '#b5ca92', '#2f7ed8', '#5c40de', '#8bbc21', '#910000',
|
||||
'#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a', '#db843d', '#92a8cd',
|
||||
'#a47d7c', '#058dc7', '#50b432', '#ed561b', '#24cbe5', '#64e572', '#ff9655', '#d6cb54',
|
||||
'#6af9c4', '#b5ca92', '#2f7ed8', '#5c40de', '#8bbc21', '#910000', '#1aadce', '#492970',
|
||||
'#f28f43', '#77a1e5', '#c42525', '#a6c96a', '#db843d', '#92a8cd', '#a47d7c', '#058dc7',
|
||||
'#50b432', '#ed561b', '#24cbe5', '#64e572', '#ff9655', '#d6cb54', '#6af9c4', '#b5ca92',
|
||||
'#2f7ed8', '#5c40de', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5'
|
||||
],
|
||||
defaultTagColor: 'auto', // black or white, based on background color
|
||||
defaultTagBackgroundColor: '#ff9655' // default background color
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
/**
|
||||
* Tag cloud plugin for jQuery, showing bigger tags in the center
|
||||
* @version 1.2.0
|
||||
* @release 2021-04-07
|
||||
* @repository https://github.com/peterthoeny/jquery.tagcloud
|
||||
* @author Peter Thoeny, https://twiki.org/ & https://github.com/peterthoeny
|
||||
* @copyright 2021 Peter Thoeny, https://github.com/peterthoeny
|
||||
* @license MIT, https://opensource.org/licenses/mit-license
|
||||
*/
|
||||
|
||||
.jqTcContainer {
|
||||
}
|
||||
.jqTcContainer table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
.jqTcContainer td {
|
||||
padding: 0;
|
||||
border: 0 none;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.jqTcTag {
|
||||
display: inline-block;
|
||||
margin: 3px 7px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.jqTcTag:hover {
|
||||
box-shadow: 0 0 5px 1px #aaa;
|
||||
}
|
||||
.jqTcTag a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
.jqTcTag a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* EOF */
|
||||
|
|
@ -0,0 +1,201 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<title>Demo of jQuery Tag Cloud</title>
|
||||
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="js/tagcloud.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
$('#demoCloud1').tagCloud({
|
||||
tag: {
|
||||
color: '#444444',
|
||||
backgroundColor: '#f8f8cc'
|
||||
}
|
||||
});
|
||||
let options = {
|
||||
container: {
|
||||
width: 630,
|
||||
//fontFamily: '"Times New Roman", Times, serif',
|
||||
backgroundColor: '#fafaf8'
|
||||
},
|
||||
tag: {
|
||||
format: '<a href="{tag.link}">{tag.name}</a>: {tag.weight}', // default: '{tab.name}'
|
||||
maxFontSize: 41, // max font size in pixels
|
||||
minFontSize: 8, // min font size in pixels
|
||||
textShadow: true // text shadow, enabled for better visibility
|
||||
},
|
||||
data: [
|
||||
{ name: 'HTML', link: '#', weight: 60 },
|
||||
{ name: 'HTML5', link: '#', weight: 90, tooltip: 'Sample "tooltip" message' },
|
||||
{ name: 'CSS', link: '#', weight: 65 },
|
||||
{ name: 'CSS3', link: '#', weight: 35 },
|
||||
{ name: 'JavaScript', link: '#', weight: 85 },
|
||||
{ name: 'jQuery', link: '#', weight: 100 },
|
||||
{ name: 'React.js', link: '#', weight: 78 },
|
||||
{ name: 'Angular', link: '#', weight: 62 },
|
||||
{ name: 'Express', link: '#', weight: 82 },
|
||||
{ name: 'Sharepoint', link: '#', weight: 10 },
|
||||
{ name: 'ASP.NET', link: '#', weight: 15 },
|
||||
{ name: 'Vue.js', link: '#', weight: 43 },
|
||||
{ name: 'Spring', link: '#', weight: 36 },
|
||||
{ name: 'Django', link: '#', weight: 32 },
|
||||
{ name: 'Flask', link: '#', weight: 18 },
|
||||
{ name: 'Ruby onRails', link: '#', weight: 14 },
|
||||
{ name: 'MongoDB', link: '#', weight: 95 },
|
||||
{ name: 'Elasticsearch', link: '#', weight: 40 },
|
||||
{ name: 'MySql', link: '#', weight: 58 },
|
||||
{ name: 'PostgreSQL', link: '#', weight: 50 },
|
||||
{ name: 'Microsoft SQL Server', link: '#', weight: 48 },
|
||||
{ name: 'SQLite', link: '#', weight: 45 },
|
||||
{ name: 'Redis', link: '#', weight: 41 },
|
||||
{ name: 'Oracle 9i', link: '#', weight: 39 },
|
||||
{ name: 'Node.js', link: '#', weight: 70 },
|
||||
{ name: '.NET', link: '#', weight: 38 },
|
||||
{ name: 'WCF', link: '#', weight: 16 },
|
||||
{ name: 'TensorFlow', link: '#', weight: 24 },
|
||||
{ name: 'Ansible', link: '#', weight: 16 },
|
||||
{ name: 'Flutter', link: '#', weight: 15 },
|
||||
{ name: 'TypeScript', link: '#', weight: 37 },
|
||||
{ name: 'Java', link: '#', weight: 42 },
|
||||
{ name: 'Python', link: '#', weight: 58 },
|
||||
{ name: 'C', link: '#', weight: 28 },
|
||||
{ name: 'C++', link: '#', weight: 36 },
|
||||
{ name: 'C#', link: '#', weight: 25 },
|
||||
{ name: 'Go', link: '#', weight: 18 },
|
||||
{ name: 'PHP', link: '#', weight: 12 },
|
||||
{ name: 'VBA', link: '#', weight: 10 }
|
||||
]
|
||||
}
|
||||
$('#demoCloud2').tagCloud(options);
|
||||
});
|
||||
</script>
|
||||
<link rel="stylesheet" href="styles/tagcloud.css" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
padding: 3px 10px;
|
||||
background-color: #ffffff;
|
||||
font-family: "helvetica";
|
||||
color: #000000;
|
||||
}
|
||||
h1 { font-size: 2em; color: #000000; margin: 3px 0 10px 0; }
|
||||
h2 { font-size: 1.2em; color: #000000; margin: 3px 0 10px 0; }
|
||||
hr { border: 0; border-bottom: 1px solid #aaa; }
|
||||
textarea {
|
||||
color: white;
|
||||
background-color: #333;
|
||||
padding: 3px 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<h1>Demo of jQuery Tag Cloud <tt>jquery.tagcloud</tt></h1>
|
||||
<p>Tag cloud plugin for jQuery, showing bigger tags in the center.</p>
|
||||
<hr />
|
||||
<h2>Example 1: Use <tt>li</tt> HTML tags to define the tag cloud, and options for custom colors</h2>
|
||||
<table><tr><th>
|
||||
Tag Cloud
|
||||
</th><th>
|
||||
HTML
|
||||
</th><th>
|
||||
JavaScript
|
||||
</th></tr>
|
||||
<tr><td style="vertical-align: top;">
|
||||
<ul id="demoCloud1">
|
||||
<li data-weight="60"><a href="#">HTML</a></li>
|
||||
<li><a data-weight="20" href="#">HTML5</a></li>
|
||||
<li data-weight="65">CSS</li>
|
||||
<li data-weight="35"><a href="#">CSS3</a></li>
|
||||
<li data-weight="85"><a href="#">JavaScript</a></li>
|
||||
<li data-weight="100"><a href="#">jQuery</a></li>
|
||||
<li data-weight="78"><a href="#">React.js</a></li>
|
||||
<li data-weight="62"><a href="#">Angular</a></li>
|
||||
<li data-weight="82"><a href="#">Express</a></li>
|
||||
<li data-weight="10"><a href="#">Sharepoint</a></li>
|
||||
<li data-weight="15"><a href="#">ASP.NET</a></li>
|
||||
<li data-weight="43"><a href="#">Vue.js</a></li>
|
||||
<li data-weight="36"><a href="#">Spring</a></li>
|
||||
<li data-weight="32"><a href="#">Django</a></li>
|
||||
<li data-weight="18"><a href="#">Flask</a></li>
|
||||
</ul>
|
||||
</td><td style="vertical-align: top;">
|
||||
<textarea style="width: 34em; height: 16.4em;" readonly="readonly">
|
||||
<ul id="demoCloud1">
|
||||
<li data-weight="60"><a href="#">HTML</a></li>
|
||||
<li data-weight="20><a" href="#">HTML5</a></li>
|
||||
<li data-weight="65">CSS</li> <!-- no link -->
|
||||
<li data-weight="35"><a href="#">CSS3</a></li>
|
||||
<li data-weight="85"><a href="#">JavaScript</a></li>
|
||||
<li data-weight="100"><a href="#">jQuery</a></li>
|
||||
<li data-weight="78"><a href="#">React.js</a></li>
|
||||
<li data-weight="62"><a href="#">Angular</a></li>
|
||||
<li data-weight="82"><a href="#">Express</a></li>
|
||||
<li data-weight="10"><a href="#">Sharepoint</a></li>
|
||||
<li data-weight="15"><a href="#">ASP.NET</a></li>
|
||||
<!-- etc... -->
|
||||
</ul></textarea>
|
||||
</td><td style="vertical-align: top;">
|
||||
<textarea style="width: 22em; height: 16.4em;" readonly="readonly">
|
||||
$(document).ready(function() {
|
||||
$('#demoCloud1').tagCloud({
|
||||
tag: {
|
||||
color: '#444444',
|
||||
backgroundColor: '#f8f8cc'
|
||||
}
|
||||
});
|
||||
});</textarea>
|
||||
</td></tr></table>
|
||||
<hr />
|
||||
<h2>Example 2: Use an empty <tt>div</tt> HTML tag, and options to define the tag cloud</h2>
|
||||
<table><tr><th>
|
||||
Tag Cloud
|
||||
</th><th>
|
||||
HTML
|
||||
</th><th>
|
||||
JavaScript
|
||||
</th></tr>
|
||||
<tr><td style="vertical-align: top;">
|
||||
<div id="demoCloud2"></div>
|
||||
</td><td style="vertical-align: top;">
|
||||
<textarea style="width: 13em; height: 32em;" readonly="readonly">
|
||||
<div id="demoCloud2">
|
||||
</div></textarea>
|
||||
</td><td style="vertical-align: top;">
|
||||
<textarea style="width: 34em; height: 32em;" readonly="readonly">
|
||||
$(document).ready(function() {
|
||||
let options = {
|
||||
container: {
|
||||
width: 630,
|
||||
backgroundColor: '#fafaf8',
|
||||
//fontFamily: '"Times New Roman", Times, serif',
|
||||
},
|
||||
tag: {
|
||||
format: '<a href="{tag.link}">{tag.name}</a>: {tag.weight}',
|
||||
maxFontSize: 41, // max font size in pixels
|
||||
minFontSize: 8, // min font size in pixels
|
||||
textShadow: true // enable text shadow
|
||||
},
|
||||
data: [
|
||||
{ name: 'HTML', link: '#', weight: 60 },
|
||||
{ name: 'HTML5', link: '#', weight: 90,
|
||||
tooltip: 'Sample "tooltip" message' },
|
||||
{ name: 'CSS', link: '#', weight: 65 },
|
||||
{ name: 'CSS3', link: '#', weight: 35 },
|
||||
{ name: 'JavaScript', link: '#', weight: 85 },
|
||||
{ name: 'jQuery', link: '#', weight: 100 },
|
||||
// etc...
|
||||
]
|
||||
}
|
||||
$('#demoCloud2').tagCloud(options);
|
||||
});</textarea>
|
||||
</td></tr></table>
|
||||
<hr />
|
||||
<p>Repository: <a href="https://github.com/peterthoeny/jquery.tagcloud" target="_blank">
|
||||
https://github.com/peterthoeny/jquery.tagcloud</a></p>
|
||||
<p>Author: <a href="https://github.com/peterthoeny" target="_blank">
|
||||
https://github.com/peterthoeny</a></p>
|
||||
<hr />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
#!/bin/bash
|
||||
[[ ! $1 ]] && echo "You must provide 'qo-op' IPNS key"&& exit 1
|
||||
# echo create data set to include into tagcloud
|
||||
DATA=""
|
||||
|
||||
for channel in $(ls ~/.zen/bunkerbox/channels); do
|
||||
|
||||
howmuch=$(jq '.Videos | length' ~/.zen/bunkerbox/history.${channel}.json)
|
||||
DATA="$DATA { name: '"${channel}"', link: '"/ipns/$1/tw/${channel}"', weight: "${howmuch}", tooltip: '"${channel}"' },"
|
||||
|
||||
done
|
||||
|
||||
echo 'data: [ '$DATA' ]'
|
||||
Loading…
Reference in New Issue