wushaobo/.block

## .block
license: gpl-3.0
border: no
scrolling: no
height: 470

## README.md

      
    Raw
  

              README.md
            
          
    This is a demo page for Zipper [ GitHub, Docker ].
How to play

You can input 3 file urls and a zip filename, then download a zip of them immediately !
Notes


Though Zipper is IE-supported, this demo page rejects IE. :)
The urls you input have to be internet accessable.
Compromising with concurrent visitors, the bandwidth of zip downloading is limited. Please do not try with big files.


## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Zipper Demo</title>

    <style type="text/css">
        .container {
            width: 778px;
            margin: 40px;
        }

        .line {
            line-height: 48px;
        }

        label,
        input,
        button {
            font-size: 16px;
        }

        label {
            margin-right: 20px;
        }

        input[type="text"] {
            height: 25px;
            margin-left: 10px;
        }

        .input-url {
            width: 537px;
        }

        .input-filename {
            width: 100px;
        }

        button {
            width: 100%;
            height: 30px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="line">
            <label for="file1">
                File1:
                <input id="file1" class="input-url" type="text" value="https://avatars0.githubusercontent.com/u/491264?v=4&s=40">
            </label>
            <label for="filename1">
                name:
                <input id="filename1" class="input-filename" type="text" value="file1.name">
            </label>
        </div>
        <div class="line">
            <label for="file2">
                File2:
                <input id="file2" class="input-url" type="text" value="https://avatars3.githubusercontent.com/u/1242149?v=4&s=32">
            </label>
            <label for="filename2">
                name:
                <input id="filename2" class="input-filename" type="text" value="file2.name">
            </label>
        </div>
        <div class="line">
            <label for="file3">
                File3:
                <input id="file3" class="input-url" type="text" value="https://avatars3.githubusercontent.com/u/1237867?v=4&s=32">
            </label>
            <label for="filename3">
                name:
                <input id="filename3" class="input-filename" type="text" value="file3.name">
            </label>
        </div>
        <div class="line">
            <label for="zipName">
                Zip file name:
                <input id="zipName" class="input-filename" type="text" value="demo">
                .zip
            </label>
        </div>
        <div class="line">
            <button id="submitButton">Download Zip</button>
        </div>
    </div>
</body>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
<script src="https://blueimp.github.io/JavaScript-MD5/js/md5.min.js"></script>

<script type="application/javascript">
    let config = {
        serverAddr: 'https://service.zipper.demo.wushaobo.info',
        secretKey: 'INSECURE-SECRET-KEY',
        appKey: 'INSECURE-APP-KEY',
    };

    let genTimestamp = () => {
        return `${Math.floor(+ new Date() / 1000)}`;
    };

    let extractSeedForToken = (fileInfos, timestamp) => {
        let urls = _.sortBy(_.map(fileInfos, "url"));
        return urls.join("") + timestamp;
    };

    let genToken = (seed) => {
        let content = seed + config.secretKey;
        return md5(content).substr(0, 20);
    };

    let addAuthInfoTo = (zipInfo) => {
        let timestamp = genTimestamp();
        let token = genToken(extractSeedForToken(zipInfo.file_infos, timestamp));

        zipInfo.timestamp = timestamp;
        zipInfo.token = token;
        return zipInfo;
    };

    let collectZipInfo = (inputs) => {
        let fileInfos = _.map(inputs, (input) => {
            return {
                "is_empty_folder": false,
                "url": input.url,
                "filename": input.filename
            };
        });

        return addAuthInfoTo({"file_infos": fileInfos})
    };

    let buildZipUrlWith = (zipKey, zipName) => {
        let serverAddr = config.serverAddr;
        let timestamp = genTimestamp();
        let urlPartial = `/zip/${zipKey}?timestamp=${timestamp}`;
        let token = genToken(urlPartial);
        let encodedZipName = encodeURIComponent(zipName + '.zip');
        return `${serverAddr}${urlPartial}&token=${token}&name=${encodedZipName}`
    };

    let startDownloadZip = (zipUrl) => {
        window.location.href = zipUrl;
    };

    let onSubmitZipInfoSuccess = (data) => {
        let zipName = $("#zipName").val();
        let zipUrl = buildZipUrlWith(data.zip_key, zipName);
        startDownloadZip(zipUrl);
    };

    let submitZipInfo = () => {
        let inputs = [
            {url: $("#file1").val(), filename: $("#filename1").val()},
            {url: $("#file2").val(), filename: $("#filename2").val()},
            {url: $("#file3").val(), filename: $("#filename3").val()},
        ];

        let zipInfo = collectZipInfo(inputs);

        $.ajax({
            url: `${config.serverAddr}/zip-info`,
            type: "POST",
            dataType: "json",
            data: JSON.stringify(zipInfo),
            contentType: "application/json; charset=UTF-8",
            success: onSubmitZipInfoSuccess
        });

        ga('send', 'event', 'Zip', 'download');
    };

    $(document).ready(() => {
        $("#submitButton").click(submitZipInfo);
    });
</script>

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-105417063-1', 'auto');
  ga('send', 'pageview');

</script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Zipper Demo</title>

	<style type="text/css">
	.container {
	width: 778px;
	margin: 40px;
	}

	.line {
	line-height: 48px;
	}

	label,
	input,
	button {
	font-size: 16px;
	}

	label {
	margin-right: 20px;
	}

	input[type="text"] {
	height: 25px;
	margin-left: 10px;
	}

	.input-url {
	width: 537px;
	}

	.input-filename {
	width: 100px;
	}

	button {
	width: 100%;
	height: 30px;
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="line">
	<label for="file1">
	File1:
	<input id="file1" class="input-url" type="text" value="https://avatars0.githubusercontent.com/u/491264?v=4&s=40">
	</label>
	<label for="filename1">
	name:
	<input id="filename1" class="input-filename" type="text" value="file1.name">
	</label>
	</div>
	<div class="line">
	<label for="file2">
	File2:
	<input id="file2" class="input-url" type="text" value="https://avatars3.githubusercontent.com/u/1242149?v=4&s=32">
	</label>
	<label for="filename2">
	name:
	<input id="filename2" class="input-filename" type="text" value="file2.name">
	</label>
	</div>
	<div class="line">
	<label for="file3">
	File3:
	<input id="file3" class="input-url" type="text" value="https://avatars3.githubusercontent.com/u/1237867?v=4&s=32">
	</label>
	<label for="filename3">
	name:
	<input id="filename3" class="input-filename" type="text" value="file3.name">
	</label>
	</div>
	<div class="line">
	<label for="zipName">
	Zip file name:
	<input id="zipName" class="input-filename" type="text" value="demo">
	.zip
	</label>
	</div>
	<div class="line">
	<button id="submitButton">Download Zip</button>
	</div>
	</div>
	</body>

	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
	<script src="https://blueimp.github.io/JavaScript-MD5/js/md5.min.js"></script>

	<script type="application/javascript">
	let config = {
	serverAddr: 'https://service.zipper.demo.wushaobo.info',
	secretKey: 'INSECURE-SECRET-KEY',
	appKey: 'INSECURE-APP-KEY',
	};

	let genTimestamp = () => {
	return `${Math.floor(+ new Date() / 1000)}`;
	};

	let extractSeedForToken = (fileInfos, timestamp) => {
	let urls = _.sortBy(_.map(fileInfos, "url"));
	return urls.join("") + timestamp;
	};

	let genToken = (seed) => {
	let content = seed + config.secretKey;
	return md5(content).substr(0, 20);
	};

	let addAuthInfoTo = (zipInfo) => {
	let timestamp = genTimestamp();
	let token = genToken(extractSeedForToken(zipInfo.file_infos, timestamp));

	zipInfo.timestamp = timestamp;
	zipInfo.token = token;
	return zipInfo;
	};

	let collectZipInfo = (inputs) => {
	let fileInfos = _.map(inputs, (input) => {
	return {
	"is_empty_folder": false,
	"url": input.url,
	"filename": input.filename
	};
	});

	return addAuthInfoTo({"file_infos": fileInfos})
	};

	let buildZipUrlWith = (zipKey, zipName) => {
	let serverAddr = config.serverAddr;
	let timestamp = genTimestamp();
	let urlPartial = `/zip/${zipKey}?timestamp=${timestamp}`;
	let token = genToken(urlPartial);
	let encodedZipName = encodeURIComponent(zipName + '.zip');
	return `${serverAddr}${urlPartial}&token=${token}&name=${encodedZipName}`
	};

	let startDownloadZip = (zipUrl) => {
	window.location.href = zipUrl;
	};

	let onSubmitZipInfoSuccess = (data) => {
	let zipName = $("#zipName").val();
	let zipUrl = buildZipUrlWith(data.zip_key, zipName);
	startDownloadZip(zipUrl);
	};

	let submitZipInfo = () => {
	let inputs = [
	{url: $("#file1").val(), filename: $("#filename1").val()},
	{url: $("#file2").val(), filename: $("#filename2").val()},
	{url: $("#file3").val(), filename: $("#filename3").val()},
	];

	let zipInfo = collectZipInfo(inputs);

	$.ajax({
	url: `${config.serverAddr}/zip-info`,
	type: "POST",
	dataType: "json",
	data: JSON.stringify(zipInfo),
	contentType: "application/json; charset=UTF-8",
	success: onSubmitZipInfoSuccess
	});

	ga('send', 'event', 'Zip', 'download');
	};

	$(document).ready(() => {
	$("#submitButton").click(submitZipInfo);
	});
	</script>

	<script>
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]\|\|function(){
	(i[r].q=i[r].q\|\|[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

	ga('create', 'UA-105417063-1', 'auto');
	ga('send', 'pageview');

	</script>
	</html>