Permalink
Browse files

Allow for title change, other production-ready tasks.

  • Loading branch information...
roncli committed Jan 17, 2017
1 parent 7405ccd commit 9ac925218ca1d59ce3c7445aa34e8a95e9b08833
Showing with 119 additions and 46 deletions.
  1. +0 −1 app/index.js
  2. +1 −1 app/package.json
  3. +39 −13 app/site/index.css
  4. +46 −19 app/site/index.htm
  5. +33 −12 app/site/index.js
View
@@ -4,7 +4,6 @@ var win,
createWindow = () => {
win = new BrowserWindow({show: false, width: 800, height: 600, minWidth: 800, minHeight: 600, icon: __dirname + "/../logo/logo.ico"});
win.loadURL("file://" + __dirname + "/site/index.htm");
win.toggleDevTools();
win.setMenu(null);
win.maximize();
View
@@ -1,5 +1,5 @@
{
"name": "chattergrid",
"name": "ChatterGrid",
"productName": "ChatterGrid",
"author":{
"name": "Ronald M. Clifford",
View
@@ -3,27 +3,53 @@ html, body {
}
body {
display: flex;
flex-direction: column;
position: relative;
color: #000000 !important;
}
#grid {
flex: 1 100%;
background-color: grey;
.background {
position: absolute;
background: url("./logo.png") no-repeat bottom center;
width: 100%;
height: 356px;
bottom: 5px;
font-size: 72px;
color: #ffffff;
}
#sounds {
padding-top: 20px;
}
#drop {
flex: 1 100px;
font-size: 50pt;
text-align: center;
background-color: green;
.sound-panel {
position: relative;
}
#bar {
flex: 1 50px;
background-color: grey;
.sound-name {
padding: 15px 15px 0 15px;
}
.sound-name .input-group {
padding: 2px 0;
}
.sound-name-change {
height: 100%;
padding-top: 0;
padding-bottom: 0;
border: 0;
}
.close-button {
position: absolute;
right: 1px;
top: 1px;
}
.drop {
font-size: 72px;
}
.panel-body {
padding: 2px;
}
View
@@ -1,41 +1,68 @@
<html ng-app="chattergrid" ng-controller="chattergrid">
<head>
<title>ChatterGrid</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="index.css" />
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script>window.$ = window.jQuery = require("jquery");</script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div id="grid">
<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">
<body class="bg-primary">
<div class="text-center background">
ChatterGrid
</div>
<div class="container row center-block">
<div class="col-xs-12">
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="#" ng-click="loadGrid()"><b>Load Grid</b></a></li>
<li><a href="#" ng-click="saveGrid()"><b>Save Grid</b></a></li>
<li><a href="#" ng-click="shareGrid()"><b>Share Grid</b></a></li>
</ul>
</nav>
</div>
</div>
<div ng-if="sounds" class="container-fluid">
<div id="sounds" class="row">
<div ng-repeat="sound in sounds" class="sound col-sm-4 col-md-3 col-lg-2">
<div class="panel panel-defualt">
<div class="panel-body sound-panel">
<button class="btn btn-xs btn-danger close-button" ng-click="delete(sound)" title="Delete sound from ChatterGrid"><span class="glyphicon glyphicon-remove"></span></button>
<div class="sound-name" ng-if="sound.edit">
<div class="input-group">
<textarea class="form-control" rows="3" placeholder="Sound name" style="resize: none;" ng-model="sound.nameEdit"></textarea>
<span class="input-group-btn">
<button class="btn btn-primary sound-name-change" type="button" ng-click="changeName(sound)" title="Change sound name"><span class="glyphicon glyphicon-ok"></span></button>
</span>
</div>
</div>
<div class="sound-name" ng-if="!sound.edit">
{{sound.name}}
</div>
<div>
<div class="pull-left">
<button class="btn btn-danger" ng-click="delete(sound)" title="Delete sound from ChatterGrid"><span class="glyphicon glyphicon-remove"></span></button>
{{sound.name}}
<button ng-class="{btn: true, 'btn-sm': true, 'btn-primary': !sound.edit, 'btn-danger': sound.edit}" ng-click="edit(sound)" title="Edit name"><span class="glyphicon glyphicon-pencil"></span></button>
</div>
<div class="pull-right">
<button class="btn btn-primary" ng-if="sound.audio.paused" ng-click="play(sound)" title="Play sound"><span class="glyphicon glyphicon-play"></span></button>
<button class="btn btn-primary" ng-if="!sound.audio.paused" ng-click="pause(sound)" title="Pause sound"><span class="glyphicon glyphicon-pause"></span></button>
<button class="btn btn-primary" ng-if="!sound.audio.paused" ng-click="stop(sound)" title="Stop sound"><span class="glyphicon glyphicon-stop"></span></button>
<button class="btn btn-sm btn-primary" ng-if="sound.audio.paused" ng-click="play(sound)" title="Play sound"><span class="glyphicon glyphicon-play"></span></button>
<button class="btn btn-sm btn-primary" ng-if="!sound.audio.paused" ng-click="pause(sound)" title="Pause sound"><span class="glyphicon glyphicon-pause"></span></button>
<button class="btn btn-sm btn-primary" ng-if="!sound.audio.paused" ng-click="stop(sound)" title="Stop sound"><span class="glyphicon glyphicon-stop"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="drop">
Drop audio files here to add to the grid!
</div>
<div id="bar">
<button class="btn btn-default" ng-click="loadGrid()">Load Grid</button>
<button class="btn btn-default" ng-click="saveGrid()">Save Grid</button>
<button class="btn btn-default" ng-click="shareGrid()">Share Grid</button>
<div ng-if="sounds.length === 0">
<div class="container row center-block">
<div class="col-xs-12">
<div class="text-center drop jumbotron">
Drag audio files here to add them to the grid!
</div>
</div>
</div>
</div>
</body>
</html>
View
@@ -29,6 +29,16 @@ app.controller("chattergrid", ["$scope", function($scope) {
sound.audio.currentTime = 0;
};
$scope.edit = (sound) => {
sound.edit = !sound.edit;
sound.nameEdit = sound.name;
};
$scope.changeName = (sound) => {
sound.edit = false;
sound.name = sound.nameEdit;
};
$scope.delete = (sound) => {
// TODO: Check for memory leak if we don't dispose of the Audio properly.
delete files[sound.file];
@@ -89,7 +99,12 @@ app.controller("chattergrid", ["$scope", function($scope) {
promises = sounds.map((sound) => new Promise((resolve, reject) => {
zip.file(sound.index.toString()).async("nodebuffer").then((data) => {
checkFile({file: sound.file, data: data.toString("base64"), type: sound.type}, true);
checkFile({
file: sound.file,
data: data.toString("base64"),
type: sound.type,
name: sound.name
}, true);
resolve();
}).catch(reject);
}));
@@ -113,7 +128,11 @@ app.controller("chattergrid", ["$scope", function($scope) {
$scope.sounds = [];
sounds.forEach((sound) => {
checkFile({file: sound.file, type: sound.type}, true);
checkFile({
file: sound.file,
type: sound.type,
name: sound.name
}, true);
});
dirty = false;
} catch (err) {
@@ -158,7 +177,8 @@ app.controller("chattergrid", ["$scope", function($scope) {
return {
file: sound.file,
type: sound.type
type: sound.type,
name: sound.name
};
})), (err) => {
if (err) {
@@ -190,8 +210,9 @@ app.controller("chattergrid", ["$scope", function($scope) {
zip.file("json", JSON.stringify($scope.sounds.map((sound, index) => {
return {
file: "/" + sound.name + "." + sound.extension,
file: "/" + (sound.extension ? sound.filename + "." + sound.extension : sound.filename),
type: sound.type,
name: sound.name,
index: index
};
})));
@@ -240,21 +261,20 @@ app.controller("chattergrid", ["$scope", function($scope) {
}]);
$(document).ready(() => {
$(window).on("dragover", (ev) => {
$(window).on("dragenter dragleave dragover dragdrop", (ev) => {
ev.preventDefault();
return false;
});
$(window).on("drop", (ev) => {
var files;
if (ev.target.id === "drop") {
[].concat.apply([], ev.originalEvent.dataTransfer.files).forEach((file) => {
checkFile({file: file.path, type: file.type});
});
}
ev.preventDefault();
[].concat.apply([], ev.originalEvent.dataTransfer.files).forEach((file) => {
checkFile({file: file.path, type: file.type});
});
return false;
});
@@ -288,7 +308,8 @@ checkFile = (opts, fromLoad) => {
scope.sounds.push({
file: file,
data: data,
name: parsed[1],
filename: parsed[1],
name: opts.name || parsed[1],
extension: parsed[2],
type: type,
audio: audio

0 comments on commit 9ac9252

Please sign in to comment.