Commit f94388bc authored by Gautam Chitnis's avatar Gautam Chitnis

Refactor :ES6 Import/Export implemented, along with a seperate component for event bus.

This commit onwards, the http part of the project will only be usable if compiled using Closure Compiler.
The source code now uses ES6 Modules for managing communication between different source files and components.
This commit breaks playlist functionality temporarily, a fix is in the pipeline.
Unstable commit, use at own risk.

Gautam C.
parent acf61986
......@@ -10,14 +10,14 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='src/vendors/vue/vue.js'></script>
<script src="src/vendors/plyr/plyr.js"></script>
<!--<script src="dist/js/output_script.js"></script>-->
<script src="src/services/command.service.js"></script>
<script src="dist/js/output_script.js"></script>
<!--<script src="src/services/command.service.js"></script>
<script src='src/components/playlist/playlist.component.js'></script>
<script src="src/services/initialize.service.js"></script>
<script src="src/components/player/plyr.methods.js"></script>
<script src='src/components/controls/sidenav.component.js'></script>
<script src='src/components/vlm/vlm.component.js'></script>
<script src='src/components/playlist/buttons.playlist.component.js'></script>
<script src='src/components/playlist/buttons.playlist.component.js'></script>-->
<script src="src/vendors/bootstrap/bootstrap.min.js"></script>
</head>
<!--
......@@ -69,7 +69,7 @@
</li>
</ol>
</div>
<div id="playlistNavMobile" class="playlistNavMobile" onclick="bus.$emit('openPlaylist')">
<div class="playlistNavMobile" id="mobilePlaylistNavButton">
Playlist
</div>
</div>
......@@ -81,10 +81,10 @@
<div class="playlistIcons">
<div class="row">
<button type="button" class="btn-circle col-xs"><i class="glyphicon glyphicon-random"></i></button>
<button type="button" class="btn-circle col-xs" onclick="bus.$emit('toggleRepeat')"><i class="glyphicon glyphicon-repeat"></i></button>
<button type="button" class="btn-circle col-xs" id="repeatButton"><i class="glyphicon glyphicon-repeat"></i></button>
<button type="button" class="btn-circle col-xs"><i class="glyphicon glyphicon-play-circle"></i></button>
<button type="button" class="btn-circle col-xs"><i class="glyphicon glyphicon-plus"></i></button>
<button type="button" class="btn-circle col-xs" onclick="bus.$emit('removeCurrent')"><i class="glyphicon glyphicon-trash"></i></button>
<button type="button" class="btn-circle col-xs" id="removeButton"><i class="glyphicon glyphicon-trash"></i></button>
</div>
</div>
</div>
......@@ -94,7 +94,7 @@
<script type="text/x-template" id="sidenav-template">
<div>
<div id="sideNav" class="sideNav">
<a href="javascript:void(0)" class="closebtn" onclick="bus.$emit('closeNav')">Menu</span></a>
<a href="javascript:void(0)" class="closebtn" id="closeNavButton">Menu</span></a>
<a href="#">Open File</a>
<!--<input type="file" id="videoInput"/>-->
<a href="#">Local Network</a>
......@@ -104,7 +104,7 @@
<a href="#" data-toggle="modal" data-target="#vlmModal" onclick="">VLM Batch Commands</a>
</div>
<span id= "menuHam" onclick="bus.$emit('openNav')" style="color: orange;"><i class="glyphicon glyphicon-menu-hamburger"></i></span>
<span id= "openNavButton" style="color: orange;"><i class="glyphicon glyphicon-menu-hamburger"></i></span>
</div>
</script>
......@@ -125,7 +125,7 @@
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="bus.$emit('executeVLM')">Submit</button>
<button type="button" id="vlmButton" class="btn btn-default">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
......
import { bus } from '../../services/bus.service.js';
Vue.component('sidenav', {
template: '#sidenav-template',
methods: {
......
function plyrInit()
import { sendCommand } from '../../services/command.service.js';
export let player;
export function plyrInit()
{
player = plyr.setup({debug:false,showPosterOnEnd:true});
setVideo('S6IP_6HG2QE','youtube');
......
import { bus } from '../../services/bus.service.js';
import { sendCommand } from '../../services/command.service.js';
Vue.component('playlist-buttons', {
template: '#button-template',
methods: {
......
import { bus } from '../../services/bus.service.js';
import { app } from '../../services/initialize.service.js';
import { sendCommand, jsonData } from '../../services/command.service.js';
Vue.component('playlist', {
template: '#playlist-template',
methods: {
......@@ -18,9 +22,16 @@ Vue.component('playlist', {
document.getElementById("playlistNavMobile").style.width = "10%";
},
populatePlaylist: function(){
data = JSON.parse(jsonData);
for (var i = 0; i < data.children[0].children.length; i++) {
this.addItem(data.children[0].children[i].id, data.children[0].children[i].name, data.children[0].children[i].src);
if(jsonData)
{
data = JSON.parse(jsonData);
for (var i = 0; i < data.children[0].children.length; i++) {
this.addItem(data.children[0].children[i].id, data.children[0].children[i].name, data.children[0].children[i].src);
}
}
else
{
console.log("well,Fuck!");
}
},
refreshPlaylist: function()
......
import { bus } from '../../services/bus.service.js';
import { sendCommand } from '../../services/command.service.js';
Vue.component('vlm-modal', {
template: '#vlm-modal-template',
methods: {
......
export let bus = new Vue();
export function notifyBus(param)
{
bus.$emit(param);
}
\ No newline at end of file
function sendCommand(mode, params) {
import { bus } from './bus.service.js';
export let jsonData;
export let xmlData;
export let parseData;
export function sendCommand(mode, params) {
if(mode == 0)
{
$.ajax({
......@@ -28,7 +34,8 @@ function sendCommand(mode, params) {
console.log(xmlData);
}
});
} else if(mode == 3)
}
/* else if(mode == 3)
{
} else if(mode == 4)
......@@ -37,5 +44,5 @@ function sendCommand(mode, params) {
} else if(mode == 5)
{
}
}*/
}
\ No newline at end of file
var player;
var app;
var jsonData;
var xmlData;
var parseData;
var bus;
import { plyrInit, player } from '../components/player/plyr.methods.js';
import { notifyBus } from './bus.service.js';
export let app;
$(function() { // Handler for .ready() called.
plyrInit();
bus = new Vue();
//bus = new Vue();
vueInit();
$('#openNavButton').on('click',function (e){
notifyBus("openNav");
});
$('#closeNavButton').on('click',function (e){
notifyBus("closeNav");
});
$('#vlmButton').on('click',function (e){
notifyBus("executeVLM");
});
$('#removeButton').on('click',function (e){
notifyBus("removeCurrent");
});
$('#repeatButton').on('click',function (e){
notifyBus("toggleRepeat");
});
$('#mobilePlaylistNavButton').on('click',function (e){
notifyBus("openPlaylist");
});
});
function vueInit()
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment