scratch – Diff between revs 122 and 125

Subversion Repositories:

?pathlinks?

Rev 122 – Go to most recent revision – Details – Blame – Last modification – View Log

Only display areas with differences – Ignore whitespace

 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" ng-app="scratch">
   <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">
     <!-- Swiper -->
     <link rel="stylesheet" href="bower_components/swiper/dist/css/swiper.min.css">
     <!-- Site-wide style CCS -->
     <link href="css/style.css" rel="stylesheet">
     <!-- Local style -->
     <link href="css/gallery/style.css" rel="stylesheet">
+    <!-- Scratch Angular Includes -->
+    <ng-include src="'html/scratch-head-last.html'"></ng-include>
   </head>
   <body>
+  <!-- Scratch Angular Includes -->
+  <ng-include src="'html/scratch-body-first.html'"></ng-include>
   <!-- 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="#">View</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 class="swiper-container">
                     <div id="links" class="swiper-wrapper">
                     </div>
                     <!-- If we need navigation buttons -->
                     <div class="swiper-button-prev"></div>
                     <div class="swiper-button-next"></div>
                 </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>
+    <!-- Angular JS -->
+    <script src="bower_components/angular/angular.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>
     <!-- Swiper -->
     <script src="bower_components/swiper/dist/js/swiper.min.js"></script>
     <!-- Wizardry and Steamworks -->
     <script src="bower_components/was/dist/was.min.js"></script>
+    <!-- Angular Initialization. -->
+    <script>
+    var app = angular.module('scratch', []);
+    </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, {
                 timestamp: window.performance.now()
             }).done(function (result) {
                     $element.html(result);
                     callback({
                         type: 'load',
                         target: $element[0]
                     });
                 })
                 .fail(function () {
                     callback({
                         type: 'error',
                         target: $element[0]
                     });
                 });
             return $element[0];
         };
         $.getJSON('view.php', {
             timestamp: window.performance.now()
         }).then((data) => {
             // Create slides.
             var indexPage = 0;
             data.chunk(50).forEach((page) => {
                 document.getElementById('links')
                     .insertAdjacentHTML(
                       'beforeend',
                       '<div id="swiper-slide-' + indexPage + '" class="swiper-slide"></div>'
                     );
                 page.forEach((link) => {
                    // Generic icon for text / html items.
                    switch(link.type) {
                        case 'text/plain':
                            link.preview ='img/text.png';
                            break;
+                   }
                    document.getElementById('swiper-slide-' + indexPage)
                        .insertAdjacentHTML(
                            'beforeend',
                            '<a href="' +
                            link.url +
                            '" type="' +
                            link.type +
                            '"><img src="' +
                            link.preview +
                            '" width="60" height="40"></a>'
                        );
                 });
                 ++indexPage;
             });
             // Initialize gallery.
             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);
             };
             new Swiper ('.swiper-container', {
                 // Optional parameters
                 direction: 'horizontal',
                 // Creates duplicate element IDs if set to true.
                 loop: false,
                 // If we need pagination
                 //pagination: '.swiper-pagination',
                 // Navigation arrows
                 nextButton: '.swiper-button-next',
                 prevButton: '.swiper-button-prev',
                 // And if we need scrollbar
                 //scrollbar: '.swiper-scrollbar',
               });
             // 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>