Skip to content
Permalink
Browse files

Added incomplete XHR example

  • Loading branch information...
millinon committed Nov 30, 2016
1 parent c818f7f commit 8bbaaccc0ea3da833de6028b48be077dda37ea6c
@@ -20,3 +20,6 @@
[submodule "www/htdocs/vendor/dropzone"]
path = www/htdocs/vendor/dropzone
url = https://github.com/enyo/dropzone.git
[submodule "api-examples/jump-html-xhr/vendor/dropzone"]
path = api-examples/jump-html-xhr/vendor/dropzone
url = https://github.com/enyo/dropzone.git
@@ -0,0 +1,3 @@
# XHR Example

This is an incomplete example that uses XHR to shorten URLs.
@@ -0,0 +1 @@
Find a repeating background, put it here, with the filename background.png.
@@ -0,0 +1,161 @@
.container {
width: 100%;
margin: 0px auto;
/* padding: 0.1em 14px; */
}

.form-container {

}

h1, h2, h3, h4, h5, h6 {
font-family: 'Oswald', sans-serif;
color: #F0F0F0;
}

h1 {
text-align: center;
margin: 0px auto;
font-size: 48pt;
text-shadow: 1px 1px 1px #ccc;
}

h2 {
font-size: 36pt;
}

p, div {
font-family: 'Crimson Text', serif;
color: #F0F0F0;
}

#body-container {
width: 100%;
height: 100%;
}

body {
background: url(img/background.png) repeat 0 0;
/* border: 8px solid #F0F0F0; */
margin: 0px auto;
}

input {
float: right;
}

.input-container {
width: 500px;
margin: 0px auto;
}

.file-input {
width: 16em;
}

footer {
text-align: center;
}

.input-container span {
font-size: 18pt;
}

.dropzone {
border: 2px solid #F0F0F0;
width: 50%;
margin: 4px auto;
padding: 8px;
}

.row {
line-height: 1em;
overflow: auto;
width: 80%;
position: relative;
height: auto;
padding: 40px;
text-align: center;
}

.row-output {
float: right;
text-align: left;
}

.row-input input {
float: left;
text-align: left;
}

/* http://jsfiddle.net/halirgb/fE5kB/ */

a.btn{
height:70px;
line-height:70px;
text-align:center;
padding:0 10px;
color:#ffffff;
background-color:#007bff;
position:relative;
display:inline-block;
width: 100px;
font-size: 24pt;
text-decoration: none;

top: 50%;
transform: translateY(-50%);
}
a.btn:after{
position:absolute;
right:-40px;
content:" ";
width: 0px;
height: 0px;
border-style: solid;
border-width: 35px 0 35px 40px;
border-color: transparent transparent transparent #007bff;
}
a.btn:hover{
background-color:red;
}
a.btn:hover:after{
width: 0px;
height: 0px;
border-style: solid;
border-width: 35px 0 35px 40px;
border-color: transparent transparent transparent #ff0000;
}

input[type="text"], input[type="url"] {
font-size: 14pt;
}

#input-url {
width: 40%;
margin-right: 18px;
top: 50%;
transform: translateY(-50%);
display: relative;
}

.row-output input {
top: 50%;
transform: translateY(-50%);
display: relative;

width: 12em;
margin-left: 10%;
}

.copy-btn {
float: right;
}

@media only screen and (min-width: 480px) {
body {
width: 50%;
}
}


@@ -0,0 +1,73 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jump.wtf</title>
<link rel="stylesheet" type="text/css" href="vendor/dropzone/dist/min/dropzone.min.js" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<link href='https://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css' />
</head>
<body>
<div class="container" id="body-container">
<header>
<h1>JUMP.WTF</h1>
</header>
<hr />

<div class="container form-container" id="genURL-container">
<h2>Shorten a link</h2>

<div class="row">
<div class="row-input">
<input type="url" name="input-url" id="input-url" required="" placeholder="http://example.com/some/long/link" />
</div>

<a href="#" class="btn" id="shorten-btn">Shorten</a>
<div class="row-output">
<input type="text" name="output-url" id="output-url" placeholder ="https://jump.wtf/wYFS" readonly/>
<br>
<button class="copy-btn" type="button" id="copy-url-btn">Copy</button>
</div>

<br />
<br />
</div>
</form>
</div>
<hr />

<div class="container form-container" id="genFileURL-container">
<h2>Upload a file</h2>
<form id="genFileURL-form">
<div class="row">
<div class="row-input">
<input class="file-input" type="file" name="input-file" id="input-file" />
</div>
<a href="#" class="btn" id="upload-btn">Upload</a>
<div class="row-output">
<input type="text" name="output-file" id="output-file" placeholder ="https://jump.wtf/pcFq" readonly/>
<br />
<button class="copy-btn" type="button" id="copy-file-btn">Copy</button>
</div>
</div>
<br />
</form>
</div>
<hr />

</div>

<footer class="footer">
<div class="container">
<h4>&copy; Phillip Goldfarb 2016</h4>
</div>

</footer>


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js"></script>
<script type="text/javascript" src="js/main.js" async></script>
</body>
</html>
@@ -0,0 +1,59 @@
$(document).ready(function(){

$("#shorten-btn").click(function() {

var input = $("#input-url");


var data = JSON.stringify({
action: "genURL",
"input-url": $(input).val()
});

var xhr = new XMLHttpRequest();
xhr.open("POST", "https://jump.wtf/a", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if(xhr.readyState == 4){
var resp = JSON.parse(xhr.responseText);
$("#output-url").val(resp.success?resp.url:"#Error");
$("#copy-url-btn").attr("data-clipboard-target", resp.success?resp.url:"#Error");
}
};
xhr.send(data);
});

(function(){


function register(name){

clip = new Clipboard('#' + name);

clip.on('success', function(e){
/*
msg = $("#copy-success");
msg.stop();
msg.fadeIn('fast', function(){
$(this).delay(3000).fadeOut('slow');
});*/

});

clip.on('error', function(e){
/* msg = $("#copy-failure");
msg.stop();
msg.fadeIn('fast', function(){
$(this).delay(3000).fadeOut('slow');
});*/
});

return clip;
}

register('copy-url-btn');
register('copy-file-btn');

}());

});
Submodule dropzone added at 4e20bd

0 comments on commit 8bbaacc

Please sign in to comment.
You can’t perform that action at this time.