scratch

Subversion Repositories:
Compare Path: Rev
With Path: Rev
?path1? @ 114  →  ?path2? @ 115
/gallery.html
@@ -0,0 +1,215 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<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 -->
<meta name="description" content="quick asset upload">
<meta name="author" content="Wizardry and Steamworks">
<link rel="icon" href="favicon.ico">
 
<title>scratch</title>
 
<!-- Bootstrap core CSS -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- blueimp gallery -->
<link rel="stylesheet" href="bower_components/blueimp-gallery/css/blueimp-gallery.min.css">
 
<!-- Site-wide style CCS -->
<link href="css/style.css" rel="stylesheet">
<!-- Local style -->
<link href="css/gallery/style.css" rel="stylesheet">
</head>
 
<body>
 
<!-- Main component for a primary marketing message or call to action -->
<div class="paralax-background"></div>
<div class="jumbotron">
<h1>scratch copy</h1>
<p class="quote">the asset sharer</p>
</div>
 
<div class="container">
<ul class="nav nav-tabs">
<li><a href="index.html">Home</a></li>
<li><a href="file.html">File</a></li>
<li><a href="text.html">Text</a></li>
<li><a href="draw.html">Draw</a></li>
<li><a href="link.html">Link</a></li>
<li class="active"><a href="#">Gallery</a></li>
</ul>
<div id="main-panel" class="panel panel-default">
<div class="panel-body">
<div class="input-group">
<input id="URL" type="text" class="form-control" readonly>
<span class="input-group-btn">
<button id="copy-url" class="btn btn-default" type="button" data-clipboard-target="#URL" data-toggle="tooltip" data-placement="auto" title="Copy to clipboard."><i class="glyphicon glyphicon-paperclip"></i></button>
</span>
<span class="input-group-btn">
<button id="btn-facebook" class="btn btn-default" type="button" disabled><i class="fa fa-facebook"></i></button>
</span>
</div>
<!-- The Gallery as inline carousel, can be positioned anywhere on the page -->
<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<div id="links">
</div>
</div>
</div>
</div> <!-- /container -->
<div id="footer">
<div class="container">
<p class="text-muted credit text-center">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p>
</div>
</div>
 
<!-- jQuery -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- BootStrap -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Bootstrap Validator -->
<script src="bower_components/bootstrap-validator/dist/validator.min.js"></script>
<!-- blueimp-gallery -->
<script src="bower_components/blueimp-gallery/js/blueimp-gallery.min.js"></script>
<!-- Clipboard -->
<script src="bower_components/clipboard/dist/clipboard.min.js"></script>
<!-- YAML -->
<script src="bower_components/yaml.js/dist/yaml.min.js"></script>
<script>
$(document).ready(() => {
// Extend gallery for HTML.
blueimp.Gallery.prototype.textFactory = function (obj, callback) {
var $element = $('<div>')
.addClass('text-content')
.attr('title', obj.title);
$.get(obj.href)
.done(function (result) {
$element.html(result);
callback({
type: 'load',
target: $element[0]
});
})
.fail(function () {
callback({
type: 'error',
target: $element[0]
});
});
return $element[0];
};
$.getJSON('gallery.php').then((data) => {
//alert(JSON.stringify(data, null, 4));
data.forEach((link) => {
// Generic icon for text / html items.
switch(link.type) {
case 'text/plain':
link.preview ='img/text.png';
break;
}
document.getElementById('links')
.insertAdjacentHTML(
'beforeend',
'<a href="' +
link.url +
'" type="' +
link.type +
'"><img src="' +
link.preview +
'" width="60" height="40"></a>'
);
});
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {
index: link,
event: event,
carousel: true,
container: '#blueimp-gallery-carousel',
stretchImages: true,
startSlideshow: false,
onslideend: function(index, slide) {
// Set the URL.
$('#URL').val(
location.protocol
.concat("//")
.concat(window.location.hostname)
.concat("/").concat(data[index].url)
);
// Check if OpenGraph should be enabled.
switch(data[index].opengraph) {
case true:
// Enable the facebook button.
$('#btn-facebook')
.prop("disabled", false);
break;
default:
// Disable the facebook button.
$('#btn-facebook')
.prop("disabled", true);
break;
}
// Change the URL to OpenGraph when the user clicks the button.
$('#btn-facebook').on('click', () => {
$('#URL')
.val(
location.protocol.concat("//")
.concat(window.location.hostname)
.concat("/")
.concat("og")
.concat("/")
.concat(data[index].url)
);
});
}
},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
// Enable the Clipboard button.
new Clipboard('#copy-url');
});
});
</script>
<!-- Jumbotron parallax effect -->
<script>
var jumboHeight = $('.jumbotron').outerHeight();
function parallax(){
var scrolled = $(window).scrollTop();
$('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
}
 
$(window).scroll(function(e){
parallax();
});
</script>
</body>
</html>