Commit 70eef05b authored by Gautam Chitnis's avatar Gautam Chitnis

Refactor (menu): Vue Component for side menu added

This commit adds the Vue Component for side menu.
Existing functionality of side menu works as it is intended.

Gautam C.
parent 3b2fe9a1
......@@ -34,41 +34,19 @@
</head>
-->
<body>
<script type="text/javascript">
$('#buttonOpen').click(function(){
browse_target = 'default';
browse();
$('#window_browse').dialog('open');
return false;
});
</script>
<div id="sideNav" class="sideNav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">Menu</span></a>
<a href="#">Open File</a>
<!--<input type="file" id="videoInput"/>-->
<a href="#">Local Network</a>
<a href="#">Podcast</a>
<a href="#">Manage Streams</a>
<a href="#">Track Synchronization</a>
<a href="#" data-toggle="modal" data-target="#vlmModal" onclick="">VLM Batch Commands</a>
</div>
<!-- Use any element to open the sidenav -->
<span id= "menuHam" onclick="openNav()" style="color: orange;"><i class="glyphicon glyphicon-menu-hamburger"></i></span>
<div id="videoPlayer" class="">
<!-- Video -->
<video></video>
</div>
<div id="app">
<sidenav></sidenav>
<div id="playlistNav" class="playlistNav">
<div id="app" class="container">
<playlist></playlist>
<div id="playlistNav" class="playlistNav">
<div class="container">
<playlist></playlist>
</div>
</div>
</div>
<div id="playlistNavMobile" class="playlistNavMobile" onclick="bus.$emit('openPlaylist')">
Playlist
<div id="videoPlayer" class="">
<!-- Video -->
<video></video>
</div>
<!-- Modal -->
......@@ -110,9 +88,12 @@
</li>
</ol>
</div>
<div id="playlistNavMobile" class="playlistNavMobile" onclick="bus.$emit('openPlaylist')">
Playlist
</div>
</div>
</script>
<!-- Button Template -->
<script type="text/x-template" id="button-template">
<div>
......@@ -127,5 +108,23 @@
</div>
</div>
</script>
<!-- sideNav Template -->
<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="#">Open File</a>
<!--<input type="file" id="videoInput"/>-->
<a href="#">Local Network</a>
<a href="#">Podcast</a>
<a href="#">Manage Streams</a>
<a href="#">Track Synchronization</a>
<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>
</div>
</script>
</html>
function openNav() {
if(screen.width <= 480){
document.getElementById("sideNav").style.width = "60%";
}
else
Vue.component('sidenav', {
template: '#sidenav-template',
methods: {
openNav: function () {
if(screen.width <= 480){
document.getElementById("sideNav").style.width = "60%";
}
else
{
document.getElementById("sideNav").style.width = "20%";
}
},
closeNav: function () {
document.getElementById("sideNav").style.width = "0";
}
},
created: function()
{
document.getElementById("sideNav").style.width = "20%";
}
}
bus.$on('openNav', function()
{
this.openNav();
}.bind(this));
function openNavMobile() {
document.getElementById("sideNav").style.width = "60%";
}
bus.$on('closeNav', function()
{
this.closeNav();
}.bind(this));
}
});
function closeNav() {
document.getElementById("sideNav").style.width = "0";
}
\ No newline at end of file
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