scratch – Diff between revs 76 and 79

Subversion Repositories:

?pathlinks?

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

Only display areas with differences – Ignore whitespace

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <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 copy</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">
+    <!-- Bootstrap Toggle -->
+    <link href="bower_components/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet">
     <!-- Site-wide style CCS -->
     <link href="css/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">
+      <div class="pull-right">
+          <input id="toggle-sound" type="checkbox">
+      </div>
       <ul class="nav nav-tabs">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="file.html">File</a></li>
         <li><a href="text.html">Text</a></li>
       </ul>
       <div class="row">
         <h2>About</h2>
         <p><strong>scratch copy</strong> is a platform for small-sized asset sharing developed by <a href="http://grimore.org">Wizardry and Steamworks</a> and published under the <a href="https://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC 1.0 Universal (CC0 1.0)</a> license. The sharing platform covers images, text snippets, movie clips and any sort of media that can be conveniently shared by generating short, public and obfuscated URLs that are easily accessible.</p>
         <!-- <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> -->
       </div>
       <div class="row" ng-app="scratch" ng-controller="scratch-control">
         <!-- <h2>Configuration</h2>
         <p>The <strong>scratch copy</strong> platform can be configured for each usage case. This section is meant to hint to the users what configuration is currently active and specifies the configured lmits and allowances.</p>
         <h3>Allowed Files</h3>
         <p>The file extensions <span ng-repeat="extension in extensions" id="box">{{extension}}, </span> are currently accepted for uploading.</p>
         <h3>Upload Limits</h3>
         <p>The current upload limit is set to {{uploadlimit}}MiB.</p> -->
         <h2>Configuration</h2>
         <div class="panel panel-default">
           <!-- Default panel contents -->
           <div class="panel-heading">Current Configuration Settings</div>
           <div class="panel-body">
           <!-- Table -->
 <table class="table table-striped table-hover table-condensed table-responsive">
             <thead>
             	<tr>
             		<th>
             			Description
             		</th>
             		<th>
             			Limit
             		</th>
             	</tr>
             </thead>
             <tbody>
             	<tr>
             		<td>
             			File extensions accepted for upload.
             		</td>
             		<td>
             			<span ng-repeat="extension in extensions" id="box">{{extension}} </span>
             		</td>
             	</tr>
             	<tr>
             		<td>
             			Allowed file size upload limit.
             		</td>
             		<td>
             			<p>{{uploadlimit}}MiB</p>
             		</td>
             	</tr>
             </tbody>
             </table>
           </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 Toggle -->
+    <script src="bower_components/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>
     <!-- SoundJS -->
     <script src="bower_components/SoundJS/lib/soundjs-NEXT.combined.js"></script>
     <!-- YAML -->
     <script src="bower_components/yaml.js/dist/yaml.min.js"></script>
+    <!-- js-cookie -->
+    <script src="bower_components/js-cookie/src/js.cookie.js"></script>
     <script>
     var app = angular.module('scratch', []);
     app.controller('scratch-control', function($scope, $http) {
         $http.get('config.yaml').then((response) => {
             var doc = YAML.parse(response.data);
             $scope.extensions = doc.ALLOWED_FILE_EXTENSIONS;
             $scope.uploadlimit = doc.ALLOWED_ASSET_SIZE;
         });
     });
     </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>
     <!-- Hiss sounds -->
     <script>
     $(document).ready(() => {
+        // Get the sound cookie.
+        var play = (Cookies
+            .get('sound') == 'true'
+        );
+        // Play the sounds.
+        if(play) {
-        if (!createjs.Sound.initializeDefaultPlugins() ||
+            if (!createjs.Sound.initializeDefaultPlugins() ||
-            createjs.BrowserDetect.isIOS ||
+                createjs.BrowserDetect.isIOS ||
-            createjs.BrowserDetect.isAndroid ||
+                createjs.BrowserDetect.isAndroid ||
-            createjs.BrowserDetect.isBlackberry)
+                createjs.BrowserDetect.isBlackberry)
-        	return;
+            	return;
-        const hiss = [
+            const hiss = [
-            "snd/hisses/hiss_1.mp3",
+                "snd/hisses/hiss_1.mp3",
-            "snd/hisses/hiss_2.mp3",
+                "snd/hisses/hiss_2.mp3",
-            "snd/hisses/hiss_3.mp3",
+                "snd/hisses/hiss_3.mp3",
-            "snd/hisses/hiss_4.mp3",
+                "snd/hisses/hiss_4.mp3",
-            "snd/hisses/hiss_5.mp3",
+                "snd/hisses/hiss_5.mp3",
-            "snd/hisses/hiss_6.mp3",
+                "snd/hisses/hiss_6.mp3",
-            "snd/hisses/hiss_7.mp3",
+                "snd/hisses/hiss_7.mp3",
-            "snd/hisses/hiss_8.mp3",
+                "snd/hisses/hiss_8.mp3",
-            "snd/hisses/hiss_9.mp3",
+                "snd/hisses/hiss_9.mp3",
-            "snd/hisses/hiss_10.mp3",
+                "snd/hisses/hiss_10.mp3",
-        ];
+            ];
-        createjs.Sound.onLoadComplete =
+            createjs.Sound.onLoadComplete =
-            (event) => createjs.Sound.play(event.src);
+                (event) => createjs.Sound.play(event.src);
-        createjs.Sound.addEventListener("fileload",
+            createjs.Sound.addEventListener("fileload",
-            (event) => createjs.Sound.play(event.src));
+                (event) => createjs.Sound.play(event.src));
+            createjs.Sound.registerSound(
+                hiss[~~(Math.random() * hiss.length)]
+            );
+        }
+        // Load the toggle.
+        $('#toggle-sound').bootstrapToggle({
+            on: 'Annoy Kitty',
+            off: 'Pat Kitty',
+            onstyle: "success",
+            offstyle: "danger"
+        }).change(() => {
+            Cookies.set('sound',
+                !$('#toggle-sound')
-        createjs.Sound.registerSound(
+                .is(":checked")
+            );
+        })
-            hiss[~~(Math.random() * hiss.length)]
+        .prop('checked', !play)
-        );
+        .change()
     });
     </script>
   </body>
 </html>