scratch – Rev 139

Subversion Repositories:
Rev:
<!DOCTYPE html>
<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">
    <!-- Bootstrap TokenField -->
    <link href="bower_components/bootstrap-tokenfield/dist/css/bootstrap-tokenfield.min.css" rel="stylesheet">

    <!-- 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>OR="#A020F0"></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>
                <div class="input-group">
                    <input type="text" class="form-control tokenfield file-tags" id="file-tags" data-minLength="3" data-delimiter=" "/>
                    <span class="input-group-btn">
                        <button id="btn-filter" class="btn btn-default" type="button"><i class="fa fa-remove"></i></button>
                    </span>
                </div>
                
                <!-- Create swiper container -->
                <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>
      
                <!-- 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>
        </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>
    <!-- BootStrap TokenField -->
    <script src="bower_components/bootstrap-tokenfield/dist/bootstrap-tokenfield.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];
        };
        
        function createGallery(tags, swiper) {
            $.getJSON('view.php', {
                tags: JSON.stringify(tags),
                timestamp: window.performance.now()
            }).then((data) => {
                // Remove current links.
                document.getElementById('links').innerHTML = '';
                // 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 class="swiper-thumb" 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);
                };
                
                swiper.update();
                swiper.slideTo(1, 0, false);
            });
        }
        
        // Create swiper.
        var swiper = 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');
        
        // Create token field.
        $('#file-tags').tokenfield();
        
        // Bind to token field tag add and remove events.
        $('#file-tags')
            .on('tokenfield:createdtoken', function (e) {
                createGallery($('#file-tags').tokenfield('getTokens'), swiper);
            })
            .on('tokenfield:removedtoken', function (e) {
                // Happens when all the tags are removed.
                if(e.attrs.value == null || typeof e.attrs.value === undefined) {
                    createGallery([], swiper);
                    return;
                }
                createGallery($('#file-tags').tokenfield('getTokens'));
            });
        
        // Create clear button for tags.
        $('#btn-filter').click(() => {
            $('#file-tags').tokenfield('setTokens', []);
            createGallery([], swiper);
        });
        
        // Generate the gallery.
        createGallery([], swiper);
    });
    </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>