Permalink
Browse files

- Include jQuery, Bootstrap, and Angular.

- Implement basic functionality to add files to the grid and play them on demand.
  • Loading branch information...
roncli committed Nov 10, 2016
1 parent e2fc490 commit 6a2dc35a943b07a5735af4ebd9e38e7b65b5c028
Showing with 93 additions and 39 deletions.
  1. +12 −2 app/package.json
  2. +4 −21 app/site/index.css
  3. +17 −9 app/site/index.htm
  4. +60 −7 app/site/index.js
View
@@ -1,11 +1,21 @@
{
"name": "ChatterGrid",
"name": "chattergrid",
"productName": "ChatterGrid",
"author":{
"name": "Ronald M. Clifford",
"email": "roncli@roncli.com",
"url": "http://www.roncli.com"
},
"dependencies": {
"angular": "1.5.8",
"bootstrap": "3.3.7",
"jquery": "3.1.1"
},
"version": "0.1.0",
"description": "An application to easily create and share custom soundboards."
"description": "An application to easily create and share custom soundboards.",
"repository": {
"type": "git",
"url": "https://github.com/roncli/ChatterGrid"
},
"license": "MIT"
}
View
@@ -1,10 +1,5 @@
*, *:before, *:after {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
}
body {
@@ -17,6 +12,10 @@ body {
background-color: grey;
}
#sounds {
padding-top: 20px;
}
#drop {
flex: 1 100px;
font-size: 50pt;
@@ -28,19 +27,3 @@ body {
flex: 1 50px;
background-color: grey;
}
#sounds {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-right: 5px;
}
.sound {
width: 25%;
padding: 5px 0 0 5px;
}
.sound div {
background-color: yellow;
}
View
@@ -1,20 +1,28 @@
<html>
<html ng-app="chattergrid" ng-controller="chattergrid">
<head>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="index.css" />
<script src="index.js"></script>
</head>
<body onload="onLoad();">
<body>
<div id="grid">
<div id="sounds">
<div class="sound"><div>Test</div></div>
<div class="sound"><div>Test</div></div>
<div class="sound"><div>Test</div></div>
<div class="sound"><div>Test</div></div>
<div class="sound"><div>Test</div></div>
<div class="container-fluid">
<div id="sounds" class="row">
<div ng-repeat="sound in sounds" class="sound col-xs-3">
<div class="panel panel-defualt">
<div class="panel-body">
<div class="pull-left">{{sound.name}}</div>
<div class="pull-right">
<button class="btn btn-primary" ng-click="play(sound)"><span class="glyphicon glyphicon-play"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="drop">
Drop audio file here to add to the grid!
Drop audio files here to add to the grid!
</div>
<div id="bar">
</div>
View
@@ -1,14 +1,67 @@
onLoad = () => {
window.addEventListener("dragover", (ev) => {
var files = {},
filenameRegex = /[/\\]([^/\\]+)\.([^/\\]+)$/,
angular, app, scope;
window.$ = window.jQuery = require("../node_modules/jquery/dist/jquery.min.js");
angular = require("angular"),
app = angular.module("chattergrid", []),
require("../node_modules/bootstrap/dist/js/bootstrap.min.js");
app.controller("chattergrid", ["$scope", function($scope) {
$scope.sounds = [];
$scope.play = (sound) => {
sound.audio.play();
};
}]);
$(document).ready(() => {
$(window).on("dragover", (ev) => {
ev.preventDefault();
}, false);
return false;
});
window.addEventListener("drop", (ev) => {
$(window).on("drop", (ev) => {
var files;
ev.preventDefault();
if (ev.target.id === "drop") {
files = ev.dataTransfer.files;
[].concat.apply([], ev.originalEvent.dataTransfer.files).forEach((file) => {
checkFile(file.path);
});
}
}, false);
ev.preventDefault();
return false;
});
scope = angular.element("html").scope();
});
checkFile = (file) => {
if (files[file]) {
alert("You've already added " + file + ".");
return;
}
var audio = new Audio(file);
audio.onerror = (err) => {
alert(file + " is not of a supported format.");
err.cancelBubble = true;
audio = null;
};
audio.onloadeddata = () => {
var parsed = filenameRegex.exec(file);
files[file] = true;
scope.sounds.push({
file: file,
name: parsed[1],
type: parsed[2],
audio: audio
});
scope.$apply();
};
};

0 comments on commit 6a2dc35

Please sign in to comment.