scratch – Rev 125

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">

    <!-- Site-wide style CCS -->
    <link href="css/style.css" rel="stylesheet">
    
    <!-- Local style -->
    <!-- <link href="css/link/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 class="active"><a href="#">Link</a></li>
        <li><a href="view.html">View</a></li>
      </ul>
      
      <div id="main-panel" class="panel panel-default">
        <div class="panel-body">  
              <form id="link-form" role="form">
                <div class="form-group has-feedback">
                  <div class="input-group">
                      <span class="input-group-btn">
                          <button id="save" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="auto" title="Generate link." data-disable="true" disabled>
                              <i class="glyphicon glyphicon-share"></i>
                          </button>
                      </span>
                      <input id="link" type="text" class="form-control" pattern="^https?://[\-_\.\+!\*'\(\),a-zA-Z0-9]+:?[0-9]{0,5}/.*$">
                  </div>
                  <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>OLOR="#A020F0"></button>
                      </span>
                  </div>
                  <div class="input-group">
                      <input id="deleteURL" type="text" class="form-control" readonly>
                      <span class="input-group-btn">
                          <button id="delete-url" class="btn btn-default" type="button" data-clipboard-target="#deleteURL"><i class="glyphicon glyphicon-paperclip"></i></button>
                      </span>
                  </div>
              </div>
            </form>
        </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>
    <!-- Clipboard -->
    <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
    <!-- Angular Initialization. -->
    <script>
    var app = angular.module('scratch', []);
    </script>
    <script>
    $(document).ready(() => {
        // Attach the form validator.
        $('#link-form').validator({
            focus: false,
            delay: 1000
        }).on('invalid.bs.validator', () => {
            $('#save').attr('disabled', true);
        }).on('valid.bs.validator', () => {
            $('#save').attr('disabled', false);
        });
        
        // Save image and create URL.
        $('#save').click(() => {
            
            var formData = new FormData();
            formData.append('file', new Blob(
                    [
                        '[InternetShortcut]'
                            .concat('\n')
                            .concat('URL=')
                            .concat($('#link')
                                .val()
                            )
                            .concat('\n')
                    ]
                ),
                '.url'
            );
            
            $.get('session.php').then((token) => {
                formData.append('token', token);
                $.ajax({
                    url: 'file.php',
                    type: 'POST',
                    data: formData,
                    // cache: false // FF
                    processData: false,
                    contentType: false
                }).done((data) => {
                    // Serialize JSON to object.
                    data = JSON.parse(data);
                
                    $('#URL')
                        .val(
                            location.protocol
                            .concat("//")
                            .concat(window.location.hostname)
                            .concat("/")
                            .concat(data.hash)
                    );
                
                    $('#deleteURL')
                        .val(
                            location
                            .protocol.concat("//")
                            .concat(window.location.hostname)
                            .concat("/")
                            .concat(data.timestamp)
                            .concat("/")
                            .concat(data.hash)
                    );
                });
            });
        });
        
        // Enable the Clipboard button.
        new Clipboard('#copy-url');
        new Clipboard('#delete-url');
        
        // Scroll to the panel.
        $('html, body').animate({
            scrollTop: $('#main-panel').offset().top
        }, 'slow');
    });
    </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>