~firefox
12 itemsDownload ./*


..
stylish
hidecaption.ahk
homepage-centered-iframe.html
homepage-centered-slideshow.html
homepage-masonry.html
homepage-panels.html
homepage-sidebar.html
homepage-slide3d.html
mailorder.html
remoteButter.html
slideshow.html
template.html


firefoxhomepage-masonry.html
1 year agoDownloadRawClose


<!DOCTYPE html>
<!--

    Author:        Twily         2016
    Website:       http://twily.info/
    Compatibility: Mozilla Firefox

-->
<html>
<head>
<title>&nbsp;</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://www.google.com/jsapi"></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 at openmailbox dot org
©twily.info 2013 - 2017



744 934 visits
... ^ v