mirror of
https://github.com/Luzifer/share.git
synced 2024-12-20 10:31:16 +00:00
First version of frontend
This commit is contained in:
parent
a30109643e
commit
db4f618a6d
GPG key ID:
DC2729FDD34BE99E
3 changed files with 168 additions and 0 deletions
35
frontend/app.coffee
Normal file
35
frontend/app.coffee
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
fileURL = undefined
|
||||
|
||||
$ ->
|
||||
$(window).bind 'hashchange', hashLoad
|
||||
hashLoad()
|
||||
|
||||
hashLoad = ->
|
||||
file = window.location.hash.substring(1)
|
||||
embedFileInfo(file)
|
||||
|
||||
embedFileInfo = (file) ->
|
||||
fileURL = file
|
||||
$.ajax file,
|
||||
method: 'HEAD'
|
||||
success: handleEmbed
|
||||
|
||||
handleEmbed = (data, status, xhr) ->
|
||||
type = xhr.getResponseHeader 'Content-Type'
|
||||
|
||||
console.log fileURL
|
||||
|
||||
$('.show-loading').hide()
|
||||
$('.filelink-href').attr 'href', fileURL
|
||||
$('.filelink-src').attr 'src', fileURL
|
||||
$('.filename').text fileURL.substring(fileURL.lastIndexOf('/') + 1)
|
||||
|
||||
if type.match /^image\//
|
||||
$('.show-image').show()
|
||||
return
|
||||
|
||||
if type.match /^video\//
|
||||
$('.show-video').show()
|
||||
return
|
||||
|
||||
$('.show-generic').show()
|
||||
45
frontend/app.js
Normal file
45
frontend/app.js
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
// Generated by CoffeeScript 1.12.4
|
||||
(function() {
|
||||
var embedFileInfo, fileURL, handleEmbed, hashLoad;
|
||||
|
||||
fileURL = void 0;
|
||||
|
||||
$(function() {
|
||||
$(window).bind('hashchange', hashLoad);
|
||||
return hashLoad();
|
||||
});
|
||||
|
||||
hashLoad = function() {
|
||||
var file;
|
||||
file = window.location.hash.substring(1);
|
||||
return embedFileInfo(file);
|
||||
};
|
||||
|
||||
embedFileInfo = function(file) {
|
||||
fileURL = file;
|
||||
return $.ajax(file, {
|
||||
method: 'HEAD',
|
||||
success: handleEmbed
|
||||
});
|
||||
};
|
||||
|
||||
handleEmbed = function(data, status, xhr) {
|
||||
var type;
|
||||
type = xhr.getResponseHeader('Content-Type');
|
||||
console.log(fileURL);
|
||||
$('.show-loading').hide();
|
||||
$('.filelink-href').attr('href', fileURL);
|
||||
$('.filelink-src').attr('src', fileURL);
|
||||
$('.filename').text(fileURL.substring(fileURL.lastIndexOf('/') + 1));
|
||||
if (type.match(/^image\//)) {
|
||||
$('.show-image').show();
|
||||
return;
|
||||
}
|
||||
if (type.match(/^video\//)) {
|
||||
$('.show-video').show();
|
||||
return;
|
||||
}
|
||||
return $('.show-generic').show();
|
||||
};
|
||||
|
||||
}).call(this);
|
||||
88
frontend/index.html
Normal file
88
frontend/index.html
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
||||
<title>Share @ luzifer.io</title>
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
|
||||
integrity="sha256-916EbMg70RQy9LHiGkXzG8hSg9EdNy97GazNG/aiY1w=" crossorigin="anonymous" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/darkly/bootstrap.min.css"
|
||||
integrity="sha256-tfn9eK1pJ8CzrxEY/X948VPX9saxc3sNrzhyU5IX+Yg=" crossorigin="anonymous" />
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
|
||||
|
||||
<style>
|
||||
h1 { text-align: center; font-size: 75px; }
|
||||
h2 { text-align: center; font-size: 24px; }
|
||||
.container { margin-top: 30px; }
|
||||
.show-generic, .show-image, .show-video { display: none; }
|
||||
</style>
|
||||
|
||||
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"
|
||||
integrity="sha256-3Jy/GbSLrg0o9y5Z5n1uw0qxZECH7C6OQpVBgNFYa0g=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"
|
||||
integrity="sha256-g6iAfvZp+nDQ2TdTR/VVKJf3bGro4ub5fvWSWVRi2NE=" crossorigin="anonymous"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container-fluid">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#"><i class="fa fa-share" aria-hidden="true"></i>
|
||||
Share @ luzifer.io</a>
|
||||
</div>
|
||||
|
||||
</div><!-- /.container-fluid -->
|
||||
</nav>
|
||||
|
||||
<div class="container show-loading">
|
||||
<h1>
|
||||
<i class="fa fa-spinner fa-pulse" aria-hidden="true"></i>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="container show-generic">
|
||||
<h1>
|
||||
<i class="fa fa-cloud-download" aria-hidden="true"></i>
|
||||
</h1>
|
||||
<h2><a href="#" class="filelink-href filename">untitled</a></h2>
|
||||
</div>
|
||||
|
||||
<div class="container show-image">
|
||||
<img src="" class="img-responsive filelink-src">
|
||||
</div>
|
||||
|
||||
<div class="container show-video">
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<video controls>
|
||||
<source src="" class="filelink-src">
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"
|
||||
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
|
||||
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"
|
||||
integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin="anonymous"></script>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in a new issue