24 items •
Download ./*
24 items •
Download ./*
firefoxhomepage-masonry.html
4 years ago• 4 403
{}
<!DOCTYPE html>
<!--
Author: Twily 2016
Website: http://twily.info/
Compatibility: Mozilla Firefox
-->
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link id="favicon" rel="shortcut icon" href="http://twily.info/masonry.ico" />
<style type="text/css">
html,body {
margin: 0; padding: 0; overflow: auto; font-size: 10pt;
font-family: "Droid Sans", "Liberation Sans", "DejaVu Sans", "Segoe UI", Sans;
background: #17181A; color: #AAABAD;
width: 100%; height: auto;
}
* { box-sizing: border-box; }
*:focus { outline: none !important; }
textarea {
width: 100%; resize: none;
background: #27282B; color: #AAABAD; border: 0;
font-family: "Droid Sans", "Liberation Sans", "DejaVu Sans", "Segoe UI", Sans;
font-size: 10pt;
}
input[type="text"] { font-family: "Droid Sans", "Liberation Sans", "DejaVu Sans", "Segoe UI", Sans; font-size: 10pt; }
.tbl { display: table; width: 100%; }
.tbl-tr { display: table-row; }
.tbl-td { display: table-cell; }
.tbl input[type="text"] { width: 100%; }
#masonry a:link, #masonry a:visited { display: inline-block; color: #AAABAD; text-decoration: none; width: 100%; }
#masonry a:hover, #masonry a:active { color: #a4e35a; }
.iC a:link, .iC a:visited { transition: .2s ease; }
.iC a:hover, .iC a:active { padding-left: .5em; }
#dContent a:link, #dContent a:visited { display: block; background: #111113; color: #AAABAD; text-decoration: none; padding: .2em; }
#dContent a:hover, #dContent a:active { color: #a4e35a; }
.setup a:link, .setup a:visited { display: inline-block; color: #606163; padding: .2em 1em; text-decoration: none; transition: .2s ease; }
.setup a:hover, .setup a:active { background: #84bd3f; color: #111113; }
.mnu a:link, .mnu a:visited { display: inline-block; width: 100%; color: #AAABAD; padding: .2em 1em; text-decoration: none; transition: .2s ease; white-space: nowrap; }
.mnu a:hover, .mnu a:active { background: #84bd3f !important; color: #111113 !important; }
#content {
display: block; width: 70%;
margin: 2em 15%; min-width: 420px;
}
#control {
display: block; background: #27282B;
margin: 1em 0; padding: 1em;
border-radius: 1px;
}
#menu { display: inline-block; }
.setup { display: inline-block; }
#date { display: inline-block; float: right; padding: .2em 0; }
#masonry {
-webkit-column-count: 2; -webkit-column-gap: 1em;
-moz-column-count: 2; -moz-column-gap: 1em;
column-count: 2; column-gap: 1em;
}
.item {
display: inline-block; width: 100%;
border-radius: 1px; padding: 1em; margin: 0 0 1em;
background: #27282B;
}
.iC { position: relative; overflow: hidden; }
.iC .tbl div:nth-child(2) { width: 100%; }
.iC textarea, .iC input[type="text"] { background: #27282B; border: 0; transition: .2s ease; border-radius: 1px; }
.iC input[type="text"] { padding: .2em; }
.iC textarea:focus, .iC input[type="text"]:focus { background: #111113; color: #CECFD1; }
.fav { visibility: hidden; max-width: 16px; max-height: 16px; position: relative; top: 3px; margin-right: .2em; }
ul { display: block; list-style: none; margin: 0; padding: 0; }
.bWrapper { width: 100%; text-align: right; display: none; cursor: default; }
.bType { float: left; padding: .2em 0; font-style: italic; color: #606163; }
.action {
display: inline-block;
padding: .2em 1em; cursor: default;
color: #606163; transition: .2s ease;
}
.action .mnu {
visibility: hidden; background: #111113;
margin: .2em 0 0 -1em; text-align: left;
opacity: 0; transition: .2s ease;
position: absolute; z-index: 10;
}
.action .mnu li { border-radius: 1px; }
.action:hover { background: #84bd3f; color: #111113; }
.action:hover > .mnu { visibility: visible; opacity: 1; }
#overlay {
position: fixed; top: 0; left: 0;
width: 100%; height: 100%;
background: #17181A; opacity: .75;
z-index: 100; display: none;
}
#dialog {
position: fixed; top: 50%; min-width: 420px;
width: 70%; transform: translateY(-50%); margin: 0 15%;
padding: 1em; background: #27282B;
z-index: 101; display: none; box-shadow: 0 0 10px #111113;
}
#dialog input[type="text"], #dialog textarea {
background: #111113; color: #CECFD1;
border: 0; border-radius: 1px;
padding: .2em;
}
#dialog textarea { min-height: 100px; resize: vertical; }
#dialog #dAction { float: right; }
.slideshow {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%; border-radius: 1px;
background: #111113 no-repeat center center; background-size: cover;
opacity: 0; transition: opacity 5s ease;
z-index: 1;
}
.slide-text {
position: absolute; bottom: -1.6em; left: 0;
height: 1.6em; width: 100%;
background: rgba(17,17,19,.75); white-space: nowrap;
z-index: 3; padding: .2em; transition: .2s ease;
}
.slide-link:hover .slide-text { bottom: 0; }
.chatframe {
width: 100%; height: 100%;
border: 0; background: transparent;
}
.yt-control {
display: inline-block; width: auto !important;
position: absolute; top: 0; right: 0;
z-index: 3; margin: 0; padding: .2em;
}
.yt-control:hover { padding: .2em !important; }
</style>
<script type="text/javascript" language="javascript" src="https://rss2json.com/gfapi.js"></script>
<script type="text/javascript">
var $=function(id) { return document.getElementById(id); };
function IsJsonString(str) { try { JSON.parse(str); } catch(e) { return false; } return true; }
function iShow(img) { img.style.visibility="visible"; }
var rssread=new Array,DB=new Array();
function saveData() {
localStorage['db-v-twily']=JSON.stringify(DB);
}
function loadData() {
if(IsJsonString(localStorage['rss-v-twily'])) { rssread=JSON.parse(localStorage['rss-v-twily']); }
else { localStorage['rss-v-twily']=""; }
if(IsJsonString(localStorage['db-v-twily'])) { DB=JSON.parse(localStorage['db-v-twily']); }
else { localStorage['db-v-twily']=""; }
}
loadData();
// Array:: bID(INT),Type1(INT),Type2(INT),Name(STR),URL(STR),FAV(STR),Note(STR),Val(INT),Val(INT)
// Type1:: 0=Box, 1=Item
// Type2:: 0=Link, 1=Note, 2=Feed, 3=Search, 4=Youtube, 5=Slideshow, 6=Chat
var editMode=false;
var mAddnew=new Array("Link box","Note box","Feed box","Search box","Youtube box","Slideshow box","Chat box");
var mSettings=new Array("Customization","Export","Import","Refresh");
function init() {
for(var i=0;i<mAddnew.length;i++) $('addMnu').innerHTML+="<li><a href=\"javascript:addBox("+i+");\" target=\"_self\">"+mAddnew[i]+"</a></li>";
for(var i=0;i<mSettings.length;i++) $('settingMnu').innerHTML+="<li><a href=\"javascript:settings("+i+");\" target=\"_self\">"+mSettings[i]+"</a></li>";
time();
redrawGrid(false);
}
// vvvv ---- draw ---- vvvv
function redrawGrid(e) {
$('masonry').innerHTML="";
drawBox();
drawItems();
if(e) { toggleEdit(true); }
else { if(editMode) toggleEdit(true); }
}
var nID=0,bID=0;
function drawBox() {
for(var i=0;i<DB.length;i++) {
if(DB[i][0]>=nID) nID=DB[i][0]+1;
if(DB[i][1]==0) {
bID=DB[i][0];
var bHeight="";
if(DB[i][7]>-1) bHeight=" style=\"height: "+DB[i][7]+"px\"";
var cBox="<div class=\"item\" id=\"b"+bID+"\"> \
"+ "<div class=\"bWrapper\"> \
"+ "<div class=\"bType\">"+mAddnew[DB[i][2]]+"</div> \
"+ "<div class=\"action\">v \
"+ "<ul class=\"mnu\"> \
"+ "<li><a href=\"javascript:moveUp("+bID+");\" target=\"_self\">Move up</a></li> \
"+ "<li><a href=\"javascript:moveDown("+bID+");\" target=\"_self\">Move down</a></li> \
"+ "<li><a href=\"javascript:editContent("+bID+","+DB[i][2]+");\" target=\"_self\">Edit content</a></li> \
"+ "<li><a href=\"javascript:deleteBox("+bID+");\" target=\"_self\">Delete box</a></li> \
"+ "</ul> \
"+ "</div> \
"+ "</div> \
"+ "<div class=\"iC\" id=\"b"+bID+"c\""+bHeight+"></div> \
"+ "</div>";
$('masonry').innerHTML+=cBox;
}
}
}
function drawItems() {
for(var i=0;i<DB.length;i++) {
if(DB[i][1]==1) {
bID=DB[i][0];
switch(DB[i][2]) {
case 0: // Link
var iFav=DB[i][5];
if(iFav=="") iFav=getFavicon(DB[i][4]);
$('b'+bID+'c').innerHTML+="<a href=\""+DB[i][4]+"\" target=\"_blank\"> \
"+ "<img class=\"fav\" src=\""+iFav+"\" onload=\"javascript:iShow(this)\" />"+DB[i][3]+"</a><br />";
break;
case 1: // Note
var tWrap="";
if(DB[i][8]==0) tWrap=" white-space: pre;";
$('b'+bID+'c').innerHTML+="<textarea id=\"Nb"+bID+"\" style=\"height: 100%;"+tWrap+"\">"+DB[i][6]+"</textarea>";
$('Nb'+bID).addEventListener('change',function() {
NbID=parseInt(this.id.substr(2));
for(var j=0;j<DB.length;j++) if(DB[j][0]==NbID && DB[j][1]==1) DB[j][6]=this.value;
saveData();
});
break;
case 2: // Feed
if(DB[i][8]==-1) DB[i][8]=30; // default changed
if(DB[i][4]!="") createFeed(bID,i);
break;
case 3: // Search
var iFav=DB[i][5];
if(iFav=="") iFav=getFavicon(DB[i][4]);
$('b'+bID+'c').innerHTML+="<div class=\"tbl\"><div class=\"tbl-td\"><img class=\"fav\" src=\""+iFav+"\" onload=\"javascript:iShow(this)\" /></div> \
"+ "<div class=\"tbl-td\"><input id=\"S"+DB[i][8]+"-b"+bID+"\" type=\"text\" value=\"\" placeholder=\""+DB[i][3]+"\" onkeypress=\"javascript:handleQuery(event,this.id);\" \
"+ "onfocus=\"this.value=this.value;\" autocomplete=\"off\" /></div></div>";
break;
case 4: // Youtube
loadYoutube(bID);
break;
case 5: // Slideshow
if(DB[i][7]==-1) DB[i][7]=10; // default changed
if(DB[i][8]==-1) DB[i][8]=5; // default changed
$('b'+bID+'c').innerHTML+="<a class=\"slide-link\" id=\"limg"+bID+"\" href=\"\" target=\"_blank\"> \
"+ "<div class=\"slideshow\" id=\"img"+bID+"-1\"></div> \
"+ "<div class=\"slideshow\" id=\"img"+bID+"-2\"></div> \
"+ "<div class=\"slide-text\" id=\"timg"+bID+"\"></div></a>";
$('img'+bID+'-1').style.transition="opacity "+DB[i][8]+"s ease";
$('img'+bID+'-2').style.transition="opacity "+DB[i][8]+"s ease";
var cleanSlide=new Array();
for(var j=0;j<dbSlide.length;j++) if(dbSlide[j][0]!=bID) cleanSlide.push(dbSlide[j]);
dbSlide=cleanSlide;
dbSlide.push(new Array(bID,DB[i][4],DB[i][6],"img"+bID+"-1","img"+bID+"-2",-1,-1,DB[i][7],0,DB[i][8]));
slideRun=true;
break;
case 6: // Chat
$('b'+bID+'c').innerHTML+="<iframe id=\"chat"+bID+"\" class=\"chatframe\" src=\""+DB[i][4]+"\" onload=\"javascript:chatLoaded(this.id);\"></iframe>";
break;
default:
}
}
}
}
// ^^^^ ---- draw ---- ^^^^
// vvvv ---- box ---- vvvv
function moveUp(x) {
var tBA=new Array(),b1=-1,b2=-1;
for(var i=0;i<DB.length;i++) {
if(DB[i][1]==0) {
tBA.push(new Array(DB[i][0],i));
if(DB[i][0]==x) b2=i;
if(b2==-1) b1=i;
}
}
if(tBA[0][0]!=x) {
var tDB=new Array();
for(var i=0;i<b1;i++) tDB.push(DB[i]);
tDB.push(DB[b2]);
for(var i=b1;i<DB.length;i++) if(i!=b2) tDB.push(DB[i]);
DB=tDB;
saveData();
redrawGrid(false);
}
}
function moveDown(x) {
var tBA=new Array(),b1=-1,b2=-1;
for(var i=0;i<DB.length;i++) {
if(DB[i][1]==0) {
tBA.push(new Array(DB[i][0],i));
if(b1!=-1 && b2==-1) b2=i;
if(DB[i][0]==x) b1=i;
}
}
if(tBA[tBA.length-1][0]!=x) {
var tDB=new Array();
for(var i=0;i<=b2;i++) if(i!=b1) tDB.push(DB[i]);
tDB.push(DB[b1]);
for(var i=b2+1;i<DB.length;i++) tDB.push(DB[i]);
DB=tDB;
saveData();
redrawGrid(false);
}
}
function addBox(x) {
DB.push(new Array(nID,0,x,"","","","",-1,-1));
switch(x) {
case 1: // Note
DB[(DB.length-1)][7]=100;
DB.push(new Array(nID,1,x,"","","","",-1,1));
break;
case 2: // Feed
DB.push(new Array(nID,1,x,"","","","",30,8));
break;
case 4: // Youtube
case 5: // Slideshow
DB[(DB.length-1)][7]=175;
DB.push(new Array(nID,1,x,"","","","",-1,-1));
break;
case 6:
DB[(DB.length-1)][7]=200;
DB.push(new Array(nID,1,x,"","http://twily.info/chat/","","",-1,-1));
break;
default:
}
saveData();
redrawGrid(true);
}
function deleteBox(x) {
var tDB=new Array();
for(var i=0;i<DB.length;i++) if(DB[i][0]!=x) tDB.push(DB[i]);
DB=tDB;
saveData();
redrawGrid(false);
}
function toggleEdit(x) {
if(x!=null) {
editMode=x;
} else {
editMode=!editMode;
}
var elm=$('masonry').getElementsByClassName('bWrapper');
if(editMode) {
$('editBtn').style.background="#"+cColors[8][1];
$('editBtn').style.color="#"+cColors[9][1];
for(var i in elm) if(elm[i].className=='bWrapper') elm[i].style.display="block";
} else {
$('editBtn').style.background="";
$('editBtn').style.color="";
for(var i in elm) if(elm[i].className=='bWrapper') elm[i].style.display="";
}
}
// ^^^^ ---- box ---- ^^^^
// vvvv ---- dialog ---- vvvv
function deleteItems(x) {
var tDB=new Array();
for(var i=0;i<DB.length;i++) if(DB[i][0]!=x || DB[i][1]!=1) tDB.push(DB[i]);
DB=tDB;
}
function settings(t) {
if(t==3) { // Refresh
window.location.href=window.location.href;
return;
}
$('overlay').style.display="block";
$('dialog').style.display="block";
$('dType').value=-1;
$('dID').value=-1;
var dContent="",dAction="";
switch(t) {
case 0: // Customize
var cEdit=" checked";
if(enEdit==0) cEdit="";
dContent="Enable edit mode: <input id=\"cEditMode\" type=\"checkbox\""+cEdit+" /><br /> \
"+ "Masonry column count: <input id=\"mCCount\" type=\"text\" value=\""+mCol+"\" /><br /><br />";
dContent+="<div class=\"tbl\">";
for(var i=0;i<cFonts.length;i++) dContent+="<div class=\"tbl-tr\"><div class=\"tbl-td\" style=\"white-space: nowrap;\">"+cFonts[i][0]+": </div> \
"+ "<div class=\"tbl-td\" style=\"width: 100%;\"><input id=\"cF"+i+"\" type=\"text\" value=\""+cFonts[i][1]+"\" /></div></div>";
dContent+="<br />";
for(var i=0;i<cColors.length;i++) dContent+="<div class=\"tbl-tr\"><div class=\"tbl-td\" style=\"white-space: nowrap;\">"+cColors[i][0]+": </div> \
"+ "<div class=\"tbl-td\" style=\"width: 100%;\"><input id=\"cC"+i+"\" type=\"text\" value=\"#"+cColors[i][1]+"\" /></div></div>";
dContent+="</div>";
dAction="<a href=\"javascript:dialogRun('saveContent',0);\" target=\"_self\">Reset</a> \
"+ "<a href=\"javascript:dialogRun('saveContent',1);\" target=\"_self\">Save settings</a> \
"+ "<a href=\"javascript:dialogClose();\" target=\"_self\">Cancel</a>";
break;
case 1: // Export
dContent="Export data: \
"+ "<textarea style=\"width: 100%;\" readonly=\"\">"+localStorage['db-v-twily']+"</textarea><br />";
dAction="<a href=\"javascript:dialogClose();\" target=\"_self\">Close</a>";
break;
case 2: // Import
dContent="Import data (Overwrite): \
"+ "<textarea id=\"dImport\" style=\"width: 100%;\" placeholder=\"Warning: Importing will overwrite your current interface! (Leave blank to reset all).\"></textarea><br />";
dAction="<a href=\"javascript:dialogRun('saveContent',2);\" target=\"_self\">Import</a> \
"+ "<a href=\"javascript:dialogClose();\" target=\"_self\">Cancel</a>";
break;
default:
}
$('dContent').innerHTML+=dContent;
$('dAction').innerHTML=dAction;
}
function editContent(x,t) {
$('overlay').style.display="block";
$('dialog').style.display="block";
$('dType').value=t;
$('dID').value=x;
var dContent="",dAction="",c=0;
for(var i=0;i<DB.length;i++) {
if(DB[i][0]==x && DB[i][1]==1) {
switch(t) {
case 0: // Link
case 3: // Search
var lType="Link";
if(t==3) lType="Search";
dContent+="<div class=\"tbl\"><div class=\"tbl-td\"><input id=\"lN"+c+"\" type=\"text\" value=\""+DB[i][3]+"\" placeholder=\""+lType+" name\" /></div> \
"+ "<div class=\"tbl-td\"><input id=\"lU"+c+"\" type=\"text\" value=\""+DB[i][4]+"\" placeholder=\"URL\" /></div> \
"+ "<div class=\"tbl-td\"><input id=\"lF"+c+"\" type=\"text\" value=\""+DB[i][5]+"\" placeholder=\"Favicon (Optional)\" /></div></div>";
c++;
break;
case 1: // Note
var tWrap="";
if(DB[i][8]==1) tWrap=" checked";
dContent+="Enable text wrap: \
"+ "<input id=\"cWrapText\" type=\"checkbox\""+tWrap+" /><br />";
break;
case 2: // Feed
if(DB[i][8]==-1) DB[i][8]=30; // default changed
dContent+="Feed count: <input id=\"fCount\" type=\"text\" value=\""+DB[i][8]+"\" style=\"text-align: right;\" /><br /> \
"+ "Update after: <input id=\"fRef\" type=\"text\" value=\""+DB[i][7]+"\" style=\"text-align: right;\" /> minute(s).<br /><br /> \
"+ "<div class=\"tbl\"><div class=\"tbl-td\"><input id=\"fURL\" type=\"text\" value=\""+DB[i][4]+"\" placeholder=\"Feed URL\" /></div> \
"+ "<div class=\"tbl-td\"><input id=\"fFav\" type=\"text\" value=\""+DB[i][5]+"\" placeholder=\"Favicon (Optional)\" /></div></div>";
break;
case 4: // Youtube
dContent+="Video URL(s): \
"+ "<textarea id=\"yURL\" placeholder=\"List of URL(s) (separate with new line)\" style=\"width: 100%; white-space: pre;\">"+DB[i][6]+"</textarea><br />";
break;
case 5: // Slideshow
if(DB[i][7]==-1) DB[i][7]=10; // default changed
if(DB[i][8]==-1) DB[i][8]=5; // default changed
dContent+="Slide timer: <input id=\"sTime\" type=\"text\" value=\""+DB[i][7]+"\" style=\"text-align: right;\" /> second(s).<br /> \
"+ "Fade timer: <input id=\"sFade\" type=\"text\" value=\""+DB[i][8]+"\" style=\"text-align: right;\" /> second(s).<br /><br /> \
"+ "Picture path: \
"+ "<input id=\"pPath\" type=\"text\" value=\""+DB[i][4]+"\" placeholder=\"file:///path/to/images/\" style=\"width: 100%;\" /><br /> \
"+ "Picture list: \
"+ "<textarea id=\"pList\" placeholder=\"List of picture names (separate with new line)\" style=\"width: 100%; white-space: pre;\">"+DB[i][6]+"</textarea><br /> \
"+ "<br />Command to generate picture list on linux (Requires find, sed and leafpad)<br /> \
"+ "<input type=\"text\" value='function list() { echo \"Picture path: file://\"$(pwd)\"/\" && find \"$1\" -maxdepth 2 -type f -regex \".*\\.\\(jpg\\|jpeg\\|png\\)\" -exec echo {} \\; | sed \"s/%/%25/g\" | sed \"s/\\.\\///g\" | leafpad; }; list .' readonly=\"\" style=\"width: 100%;\" /> \
"+ "<br />Script to generate picture list on windows: \
"+ "<input type=\"text\" value=\"http://pastebin.com/atcHBMaa\" readonly=\"\" style=\"width: 100%;\" /><br />";
break;
case 6: // Chat
dContent+="Server URL: \
"+ "<input id=\"chatURL\" type=\"text\" value=\""+DB[i][4]+"\" /><br /> \
"+ "Auto-nickname: \
"+ "<input id=\"chatNick\" type=\"text\" value=\""+DB[i][6]+"\" /><br /><br /> \
"+ "Custom <i>stylish</i> css for chat: \
"+ "<input type=\"text\" value=\"http://pastebin.com/Vj19RJMz\" readonly=\"\" style=\"width: 100%;\" /><br />";
break;
default:
}
} else if(DB[i][0]==x && DB[i][1]==0) {
switch(t) {
case 1: // Note
case 4: // Youtube
case 5: // Slideshow
case 6: // Chat
dContent+="Box height: \
"+ "<input id=\"bHeight\" type=\"text\" value=\""+DB[i][7]+"\" style=\"text-align: right;\" /> px.<br />";
break;
default:
}
}
}
dAction="<a href=\"javascript:dialogRun('saveContent',0);\" target=\"_self\">Save content</a> \
"+ "<a href=\"javascript:dialogClose();\" target=\"_self\">Cancel</a>";
$('dContent').innerHTML+=dContent;
$('dAction').innerHTML=dAction;
if(t==0 || t==3) dialogRun('addRow',c);
}
function dialogRun(a,c) {
var dContent="",dAction="",dEnd=true,dReload=false;
var dID=parseInt($('dID').value);
var dType=parseInt($('dType').value);
switch(a) {
case "addRow":
var nRow,addLabel;
if(dType==0) {
nRow=new Array("lN"+c,"Link name","lU"+c,"URL","lF"+c,"Favicon (Optional)");
addLabel="Add link";
} else if(dType==3) {
nRow=new Array("lN"+c,"Search name","lU"+c,"URL","lF"+c,"Favicon (Optional)");
addLabel="Add search";
}
var nTbl=document.createElement('div');
nTbl.className='tbl';
for(var i=0;i<nRow.length;i+=2) {
var nTblTd=document.createElement('div');
nTblTd.className='tbl-td';
var newIn=document.createElement('input');
newIn.id=nRow[i];
newIn.type="text";
newIn.placeholder=nRow[(i+1)];
nTblTd.appendChild(newIn);
nTbl.appendChild(nTblTd);
}
$('dContent').appendChild(nTbl);
$('lN'+c).focus();
c++;
dAction="<a href=\"javascript:dialogRun('sortRows',0);\" target=\"_self\">Alphabetize</a> \
"+ "<a href=\"javascript:dialogRun('sortRows',1);\" target=\"_self\">Reverse</a> \
"+ "<a id=\"lnkAdd\" href=\"javascript:dialogRun('addRow',"+c+");\" target=\"_self\">"+addLabel+"</a> \
"+ "<a href=\"javascript:dialogRun('saveContent',"+c+");\" target=\"_self\">Save content</a> \
"+ "<a href=\"javascript:dialogClose();\" target=\"_self\">Cancel</a>";
$('dAction').innerHTML=dAction;
dEnd=false;
break;
case "sortRows":
var j=0,sortArr=new Array();
while($('lN'+j)) {
if($('lN'+j).value.length>0) {
sortArr.push(new Array($('lN'+j).value,$('lU'+j).value,$('lF'+j).value));
}
j++;
}
if(c==0) sortArr.sort();
else sortArr.reverse();
for(var k=0;k<j;k++) {
$('lN'+k).value=sortArr[k][0];
$('lU'+k).value=sortArr[k][1];
$('lF'+k).value=sortArr[k][2];
}
dEnd=false;
break;
case "saveContent":
switch(dType) {
case -1: // Settings
switch(c) {
case 0: // Reset
deleteItems(-1)
break;
case 1: // Customization
deleteItems(-1)
var colors="",fonts="",enEdit=1,mCol=2;
for(var i=0;i<cColors.length;i++) colors+=$('cC'+i).value.substr(1)+":";
for(var i=0;i<cFonts.length;i++) fonts+=$('cF'+i).value+":";
if(!$('cEditMode').checked) enEdit=0;
mCol=parseInt($('mCCount').value);
DB.push(new Array(-1,1,-1,"","",fonts,colors,mCol,enEdit));
break;
case 2: // Importing
if(IsJsonString($('dImport').value)) { DB=JSON.parse($('dImport').value); }
else { DB=new Array(); }
break;
default:
}
dReload=true;
break;
case 0: // Link
deleteItems(dID);
for(var i=0;i<c;i++) if($('lN'+i).value!="") DB.push(new Array(dID,1,0,$('lN'+i).value,$('lU'+i).value,$('lF'+i).value,"",-1,-1));
break;
case 1: // Note
if(parseInt($('bHeight').value)>0) {
for(var i=0;i<DB.length;i++) {
if(DB[i][0]==dID && DB[i][1]==0) {
DB[i][7]=parseInt($('bHeight').value);
} else if(DB[i][0]==dID && DB[i][1]==1) {
if($('cWrapText').checked) DB[i][8]=1;
else DB[i][8]=0;
}
}
}
break;
case 2: // Feed
for(var i=0;i<DB.length;i++) {
if(DB[i][0]==dID && DB[i][1]==1) {
DB[i][4]=$('fURL').value;
DB[i][5]=$('fFav').value;
DB[i][7]=parseInt($('fRef').value);
DB[i][8]=parseInt($('fCount').value);
}
}
break;
case 3: // Search
deleteItems(dID);
for(var i=0;i<c;i++) if($('lN'+i).value!="") DB.push(new Array(dID,1,3,$('lN'+i).value,$('lU'+i).value,$('lF'+i).value,"",-1,i));
break;
case 4: // Youtube
if(parseInt($('bHeight').value)>0) {
for(var i=0;i<DB.length;i++) {
if(DB[i][0]==dID && DB[i][1]==0) {
DB[i][7]=parseInt($('bHeight').value);
} else if(DB[i][0]==dID && DB[i][1]==1) {
DB[i][6]=$('yURL').value;
}
}
}
break;
case 5: // Slideshow
if(parseInt($('bHeight').value)>0) {
for(var i=0;i<DB.length;i++) {
if(DB[i][0]==dID && DB[i][1]==0) {
DB[i][7]=parseInt($('bHeight').value);
} else if(DB[i][0]==dID && DB[i][1]==1) {
DB[i][4]=$('pPath').value;
DB[i][6]=$('pList').value;
DB[i][7]=parseInt($('sTime').value);
DB[i][8]=parseInt($('sFade').value);
}
}
}
break;
case 6:
if(parseInt($('bHeight').value)>0) {
for(var i=0;i<DB.length;i++) {
if(DB[i][0]==dID && DB[i][1]==0) {
DB[i][7]=parseInt($('bHeight').value);
} else if(DB[i][0]==dID && DB[i][1]==1) {
DB[i][4]=$('chatURL').value;
DB[i][6]=$('chatNick').value;
}
}
}
break;
default:
}
saveData();
if(!dReload) redrawGrid(false);
break;
default:
dialogClose();
}
if(dEnd) dialogClose();
if(dReload) window.location.href=window.location.href;
}
function dialogClose() {
$('dType').value="";
$('dID').value="";
$('dContent').innerHTML="";
$('dAction').innerHTML="";
$('dialog').style.display="";
$('overlay').style.display="";
}
// ^^^^ ---- dialog ---- ^^^^
// vvvv ---- misc ---- vvvv
function handleQuery(e,x) {
var key=e.keyCode || e.which;
if(key==13) { // enter
var query=$(x).value;
var ids=x.split("-");
var sID=ids[0].substr(1);
var bID=ids[1].substr(1);
for(var i=0;i<DB.length;i++) {
if(DB[i][0]==bID && DB[i][8]==sID) {
window.open(DB[i][4]+query.replace(/&/g,"%26"));
$(x).value="";
}
}
}
}
function loadYoutube(b) {
for(var i=0;i<DB.length;i++) {
if(DB[i][0]==b && DB[i][1]==1) {
var yURL="",yURLs=DB[i][6].split("\n");
var yRND=Math.floor(Math.random()*yURLs.length);
yURL=yURLs[yRND].replace("https://www.youtube.com/watch?v=","https://www.youtube.com/embed/");
$('b'+b+'c').innerHTML="<iframe width=\"100%\" height=\"100%\" src=\""+yURL+"\" frameborder=\"0\" allowfullscreen></iframe><a href=\"javascript:loadYoutube("+b+");\" target=\"_self\" class=\"yt-control\">↺</a>";
}
}
}
var dbSlide=new Array(),slideRun=false;
function runSlideshow() {
for(var i=0;i<dbSlide.length;i++) {
if(dbSlide[i][8]==0) {
var img=new Image();
img.id=i;
img.onload=function() {
var j=this.id;
dbSlide[j][4]=[dbSlide[j][3],dbSlide[j][3]=dbSlide[j][4]][0];
var sID=dbSlide[j][3].substr(0,dbSlide[j][3].lastIndexOf('-'));
$('l'+sID).href=dbSlide[j][1]+imagelist[dbSlide[j][5]];
$('t'+sID).innerHTML=imagelist[dbSlide[j][5]];
$(dbSlide[j][3]).style.backgroundImage="url('"+dbSlide[j][1]+imagelist[dbSlide[j][5]];+"')";
$(dbSlide[j][3]).style.opacity=100;
$(dbSlide[j][4]).style.opacity=0;
$(dbSlide[j][3]).style.zIndex=2;
$(dbSlide[j][4]).style.zIndex=1;
dbSlide[j][8]=dbSlide[j][7];
};
var imagelist=dbSlide[i][2].split("\n");
dbSlide[i][5]=dbSlide[i][6];
if(imagelist.length>1) {
while(dbSlide[i][5]==dbSlide[i][6]) dbSlide[i][6]=Math.floor(Math.random()*imagelist.length);
} else {
if(imagelist.length==1) {
dbSlide[i][6]=0;
} else {
break;
}
}
if(dbSlide[i][5]!=-1) {
img.src=dbSlide[i][1]+imagelist[dbSlide[i][5]];
dbSlide[i][8]=dbSlide[i][7];
break;
} else {
dbSlide[i][8]=0;
}
} else if(dbSlide[i][8]>0) {
dbSlide[i][8]--;
}
}
}
var cT,tT=[];
var MNT=["January","February","March","April","May","June","July","August","September","October","November","December"];
var DAY=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
function time() {
clearTimeout(cT);
var today=new Date();
var month=MNT[today.getMonth()];
var date=today.getDate();
var day=DAY[today.getDay()];
var h=today.getHours();
var m=today.getMinutes();
if(m<10) m="0"+m;
tT[0]=day+" "+month+" "+date+", "+h+":"+m;
if(tT[0]!=tT[1]) $('date').innerHTML=tT[0];
tT[1]=tT[0];
if(slideRun) runSlideshow();
cT=setTimeout("time();",1000);
}
function getFavicon(url) {
var l=document.createElement("a");
l.href=url;
return l.protocol+"//"+l.hostname+"/favicon.ico";
}
for(var i=0;i<DB.length;i++) if(DB[i][2]==2) google.load("feeds","1");
function createFeed(b,i) {
$('b'+b+'c').innerHTML="";
var feed=new google.feeds.Feed(DB[i][4]);
feed.setNumEntries(DB[i][8]);
feed.load(function(result) {
if(!result.error) {
var iFav=DB[i][5];
if(iFav=="") iFav=getFavicon(DB[i][4]);
for(var e=0;e<result.feed.entries.length;e++) {
var entry=result.feed.entries[e];
var readstyle="";
if(rssread.indexOf(entry.link)>-1) readstyle=" style=\"opacity: .5;\"";
$('b'+b+'c').innerHTML+="<a id=\"b"+b+"r"+e+"\" href=\""+entry.link+"\" target=\"_blank\" onmouseup=\"javascript:rssmark(event,this.href,this.id);\""+readstyle+"> \
"+ "<img class=\"fav\" src=\""+iFav+"\" onload=\"javascript:iShow(this);\" />"+entry.title+"</a><br />";
}
}
});
if(DB[i][7]>0) setTimeout(function() { createFeed(b,i); },parseInt(DB[i][7]*60*1000));
}
function rssmark(e,url,id) {
var lC,mC;
if(!e) var e=window.event;
if(e.which) {
lC=(e.which==1);
mC=(e.which==2);
} else if(e.button) {
lC=(e.button==0);
mC=(e.button==1);
}
if(lC || mC) {
rssread.push(url);
localStorage['rss-v-twily']=JSON.stringify(rssread);
$(id).style.opacity=".5";
}
}
var chatListener=false;
function chatLoaded(x) {
var id=x.substr(4);
for(var i=0;i<DB.length;i++) {
if(DB[i][0]==id && DB[i][1]==1) {
if(DB[i][6]!="") $('chat'+id).contentWindow.postMessage('autosign '+DB[i][6],'*');
}
}
if(!chatListener) {
var n=0;
window.addEventListener('message',function(event) {
var data=event.data.split(" ");
var title=document.title;
var link=document.createElement('link');
link.id="favicon";
link.type="image/x-icon";
link.rel="shortcut icon";
document.getElementsByTagName('head')[0].removeChild($('favicon'));
if(data[0]=="notify") {
link.href="http://twily.info/masonry_red.ico";
document.getElementsByTagName('head')[0].appendChild(link);
if(title.substr(0,1)!="(") n=1;
else n+=parseInt(data[1]); title=title.substr(title.indexOf(" ")+1);
document.title="("+n+") "+title;
} else {
link.href="http://twily.info/masonry.ico";
document.getElementsByTagName('head')[0].appendChild(link);
n=0;
if(title.substr(0,1)=="(") document.title=title.substr(title.indexOf(" ")+1);
}
});
chatListener=true;
}
}
// ^^^^ ---- misc ---- ^^^^
</script>
</head>
<body onload="init();">
<script type="text/javascript">
var enEdit=1,mCol=2,cColors=[
["Page background","17181A"], // 0,1
["Box background","27282B"], // 1,1
["Light text color","AAABAD"], // 2,1
["Dark text color","606163"], // 3,1
["Highlight background","111113"], // 4,1
["Highlight color","CECFD1"], // 5,1
["Normal link color","AAABAD"], // 6,1
["Active link color","A4E35A"], // 7,1
["Active button background","84BD3F"], // 8,1
["Active button color","111113"], // 9,1
["Menu background","111113"], // 10,1
["Menu color","AAABAD"], // 11,1
];
var cFonts=[
["Font family","Droid Sans, Liberation Sans, DejaVu Sans, Segoe UI, Sans"],
["Font size",10],
];
function loadStyle() {
var colors=new Array();
for(var i=0;i<DB.length;i++) {
if(DB[i][0]==-1 && DB[i][1]==1) {
colors=DB[i][6].split(":");
fonts=DB[i][5].split(":");
mCol=DB[i][7];
enEdit=DB[i][8];
}
}
if(colors.length>0) for(var i=0;i<cColors.length;i++) cColors[i][1]=colors[i];
if(fonts.length>0) for(var i=0;i<cFonts.length;i++) cFonts[i][1]=fonts[i];
var css="html,body, #overlay { background: #"+cColors[0][1]+"; color: #"+cColors[2][1]+"; font-family: "+cFonts[0][1]+"; font-size: "+cFonts[1][1]+"pt; } \
"+ "textarea { background: #"+cColors[1][1]+"; color: #"+cColors[2][1]+"; font-family: "+cFonts[0][1]+"; font-size: "+cFonts[1][1]+"pt; } \
"+ "input[type=\"text\"] { font-family: "+cFonts[0][1]+"; font-size: "+cFonts[1][1]+"pt; } \
"+ "#masonry a:link, #masonry a:visited { color: #"+cColors[6][1]+"; } \
"+ "#masonry a:hover, #masonry a:active { color: #"+cColors[7][1]+"; } \
"+ ".setup a:link, .setup a:visited { color: #"+cColors[3][1]+"; } \
"+ ".setup a:hover, .setup a:active, .action:hover { background: #"+cColors[8][1]+"; color: #"+cColors[9][1]+"; } \
"+ ".mnu a:link, .mnu a:visited { color: #"+cColors[11][1]+"; } \
"+ ".mnu a:hover, .mnu a:active { background: #"+cColors[8][1]+" !important; color: #"+cColors[9][1]+" !important; } \
"+ "#control, .item, .iC textarea, .iC input[type=\"text\"], #dialog { background: #"+cColors[1][1]+"; } \
"+ ".iC textarea:focus, .iC input[type=\"text\"]:focus, #dialog input[type=\"text\"], #dialog textarea { background: #"+cColors[4][1]+"; color: #"+cColors[5][5]+"; } \
"+ ".bType, .action { color: #"+cColors[3][1]+"; } \
"+ ".action .mnu { background: #"+cColors[10][1]+"; } \
"+ "#masonry { -webkit-column-count: "+mCol+"; -moz-column-count: "+mCol+"; column-count: "+mCol+"; }";
if(enEdit==0) css+="#menu, #editBtn { display: none; }";
var head=document.getElementsByTagName('head')[0];
var s=document.createElement('style');
s.setAttribute('type','text/css');
if(s.styleSheet) s.styleSheet.cssText=css;
else s.appendChild(document.createTextNode(css));
head.appendChild(s);
}
loadStyle();
</script>
<div id="content">
<div id="control">
<div id="menu">
<div class="action">Add new
<ul class="mnu" id="addMnu"></ul>
</div>
</div>
<div class="setup">
<a id="editBtn" href="javascript:toggleEdit();" target="_self">Edit mode</a>
<div class="action"><span id="setLabel">Settings</span>
<ul class="mnu" id="settingMnu"></ul>
</div>
</div>
<div id="date"></div>
</div>
<div id="masonry"></div>
</div>
<a id="overlay" href="javascript:dialogClose();" target="_self"></a>
<div id="dialog">
<input id="dID" type="hidden" value="" />
<input id="dType" type="hidden" value="" />
<div id="dContent"></div>
<br />
<div id="dAction" class="setup"></div>
</div>
</body>
</html>
Top
©twily.info 2013 - 2024
2 175 741 visits