scratch – Blame information for rev 115

Subversion Repositories:
Rev:
Rev Author Line No. Line
115 office 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
7 <meta http-equiv="Pragma" content="no-cache" />
8 <meta http-equiv="Expires" content="0" />
9 <meta name="viewport" content="width=device-width, initial-scale=1">
10 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
11 <meta name="description" content="quick asset upload">
12 <meta name="author" content="Wizardry and Steamworks">
13 <link rel="icon" href="favicon.ico">
14  
15 <title>scratch</title>
16  
17 <!-- Bootstrap core CSS -->
18 <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
19 <!-- Font Awesome -->
20 <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
21 <!-- blueimp gallery -->
22 <link rel="stylesheet" href="bower_components/blueimp-gallery/css/blueimp-gallery.min.css">
23  
24 <!-- Site-wide style CCS -->
25 <link href="css/style.css" rel="stylesheet">
26  
27 <!-- Local style -->
28 <link href="css/gallery/style.css" rel="stylesheet">
29 </head>
30  
31 <body>
32  
33 <!-- Main component for a primary marketing message or call to action -->
34 <div class="paralax-background"></div>
35 <div class="jumbotron">
36 <h1>scratch copy</h1>
37 <p class="quote">the asset sharer</p>
38 </div>
39  
40 <div class="container">
41  
42 <ul class="nav nav-tabs">
43 <li><a href="index.html">Home</a></li>
44 <li><a href="file.html">File</a></li>
45 <li><a href="text.html">Text</a></li>
46 <li><a href="draw.html">Draw</a></li>
47 <li><a href="link.html">Link</a></li>
48 <li class="active"><a href="#">Gallery</a></li>
49 </ul>
50  
51 <div id="main-panel" class="panel panel-default">
52 <div class="panel-body">
53 <div class="input-group">
54 <input id="URL" type="text" class="form-control" readonly>
55 <span class="input-group-btn">
56 <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>
57 </span>
58 <span class="input-group-btn">
59 <button id="btn-facebook" class="btn btn-default" type="button" disabled><i class="fa fa-facebook"></i></button>
60 </span>
61 </div>
62  
63 <!-- The Gallery as inline carousel, can be positioned anywhere on the page -->
64 <div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
65 <div class="slides"></div>
66 <h3 class="title"></h3>
67 <a class="prev">‹</a>
68 <a class="next">›</a>
69 <a class="play-pause"></a>
70 <ol class="indicator"></ol>
71 </div>
72  
73 <div id="links">
74 </div>
75 </div>
76 </div>
77  
78 </div> <!-- /container -->
79  
80 <div id="footer">
81 <div class="container">
82 <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>
83 </div>
84 </div>
85  
86 <!-- jQuery -->
87 <script src="bower_components/jquery/dist/jquery.min.js"></script>
88 <!-- BootStrap -->
89 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
90 <!-- Bootstrap Validator -->
91 <script src="bower_components/bootstrap-validator/dist/validator.min.js"></script>
92 <!-- blueimp-gallery -->
93 <script src="bower_components/blueimp-gallery/js/blueimp-gallery.min.js"></script>
94 <!-- Clipboard -->
95 <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
96 <!-- YAML -->
97 <script src="bower_components/yaml.js/dist/yaml.min.js"></script>
98 <script>
99 $(document).ready(() => {
100  
101 // Extend gallery for HTML.
102 blueimp.Gallery.prototype.textFactory = function (obj, callback) {
103 var $element = $('<div>')
104 .addClass('text-content')
105 .attr('title', obj.title);
106 $.get(obj.href)
107 .done(function (result) {
108 $element.html(result);
109 callback({
110 type: 'load',
111 target: $element[0]
112 });
113 })
114 .fail(function () {
115 callback({
116 type: 'error',
117 target: $element[0]
118 });
119 });
120 return $element[0];
121 };
122  
123 $.getJSON('gallery.php').then((data) => {
124 //alert(JSON.stringify(data, null, 4));
125  
126 data.forEach((link) => {
127 // Generic icon for text / html items.
128 switch(link.type) {
129 case 'text/plain':
130 link.preview ='img/text.png';
131 break;
132 }
133 document.getElementById('links')
134 .insertAdjacentHTML(
135 'beforeend',
136 '<a href="' +
137 link.url +
138 '" type="' +
139 link.type +
140 '"><img src="' +
141 link.preview +
142 '" width="60" height="40"></a>'
143 );
144 });
145 document.getElementById('links').onclick = function (event) {
146 event = event || window.event;
147 var target = event.target || event.srcElement,
148 link = target.src ? target.parentNode : target,
149 options = {
150 index: link,
151 event: event,
152 carousel: true,
153 container: '#blueimp-gallery-carousel',
154 stretchImages: true,
155 startSlideshow: false,
156 onslideend: function(index, slide) {
157 // Set the URL.
158 $('#URL').val(
159 location.protocol
160 .concat("//")
161 .concat(window.location.hostname)
162 .concat("/").concat(data[index].url)
163 );
164  
165 // Check if OpenGraph should be enabled.
166 switch(data[index].opengraph) {
167 case true:
168 // Enable the facebook button.
169 $('#btn-facebook')
170 .prop("disabled", false);
171 break;
172 default:
173 // Disable the facebook button.
174 $('#btn-facebook')
175 .prop("disabled", true);
176 break;
177 }
178  
179 // Change the URL to OpenGraph when the user clicks the button.
180 $('#btn-facebook').on('click', () => {
181 $('#URL')
182 .val(
183 location.protocol.concat("//")
184 .concat(window.location.hostname)
185 .concat("/")
186 .concat("og")
187 .concat("/")
188 .concat(data[index].url)
189 );
190 });
191 }
192 },
193 links = this.getElementsByTagName('a');
194 blueimp.Gallery(links, options);
195 };
196  
197 // Enable the Clipboard button.
198 new Clipboard('#copy-url');
199 });
200 });
201 </script>
202 <!-- Jumbotron parallax effect -->
203 <script>
204 var jumboHeight = $('.jumbotron').outerHeight();
205 function parallax(){
206 var scrolled = $(window).scrollTop();
207 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
208 }
209  
210 $(window).scroll(function(e){
211 parallax();
212 });
213 </script>
214 </body>
215 </html>