Develop Reference

How to override or redefine vue router?

My problems
Hi guys,
I am building a website that uses vuejs (vue, vuex, vue-router). Besides, I have used another template which is material dashboard (this template uses bootrsap4 and a custom js file).
At first, everything was very convenient, my vue-router worked perfectly. But when I checked the interface on my phone, there was a problem:
In this interface, the user menu in the upper right corner works with the vue-router normally, my page does not reload every time the url changes.
But when I changed the browser size, made it smaller and the user menu bar will now show as above. The problem now is that the links act like a normal anchor tag, and my page re-loads every time the URL changes.
Found the cause
This is the code of the user menu bar.
<!-- language-all: lang-html -->
<div class="collapse navbar-collapse justify-content-end">
<div class="navbar-form"></div>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link" href="javascript:;" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">person</i>
<p class="d-lg-none d-md-block">
Account
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
<router-link class="dropdown-item" to="/test">Profile</router-link>
<router-link class="dropdown-item" to="/another_one">Settings</router-link>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Log out</a>
</div>
</li>
</ul>
</div>
The problem is in the template's javascript custom file
They use a function that rewrites the menu bar whenever the window size gets smaller and
this may accidentally overwrite or disrupt the vue-router. The code is as follows:
initRightMenu: debounce(function() {
$sidebar_wrapper = $('.sidebar-wrapper');
if (!mobile_menu_initialized) {
$navbar = $('nav').find('.navbar-collapse').children('.navbar-nav');
mobile_menu_content = '';
nav_content = $navbar.html();
nav_content = '<ul class="nav navbar-nav nav-mobile-menu">' + nav_content + '</ul>';
navbar_form = $('nav').find('.navbar-form').get(0).outerHTML;
$sidebar_nav = $sidebar_wrapper.find(' > .nav');
// insert the navbar form before the sidebar list
$nav_content = $(nav_content);
$navbar_form = $(navbar_form);
$nav_content.insertBefore($sidebar_nav);
$navbar_form.insertBefore($nav_content);
$(".sidebar-wrapper .dropdown .dropdown-menu > li > a").click(function(event) {
event.stopPropagation();
});
// simulate resize so all the charts/maps will be redrawn
window.dispatchEvent(new Event('resize'));
mobile_menu_initialized = true;
} else {
if ($(window).width() > 991) {
// reset all the additions that we made for the sidebar wrapper only if the screen is bigger than 991px
$sidebar_wrapper.find('.navbar-form').remove();
$sidebar_wrapper.find('.nav-mobile-menu').remove();
mobile_menu_initialized = false;
}
}
}, 200),
What have I tried
I tried rewriting javascript in their js file as follows:
nav_content = $navbar.html(); // I turned this
// into this
nav_content = `<li class="nav-item dropdown">
<a class="nav-link" href="javascript:;" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">person</i>
<p class="d-lg-none d-md-block">
Account
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
<router-link class="dropdown-item" to="/test">Profile</router-link>
<router-link class="dropdown-item" to="another_one">Settings</router-link>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Log out</a>
</div>
</li>`
But it still does not work
To be more clear
I tried printing out nav_content, everything seems right. I think the problem is $nav_content = $(nav_content);
Is the problem I pointed out correct? If yes, I'd appreciate it if I got your advice, thank you.

Is there a way to expand the dropdown menu content upwards?

I would like to use an accordion inside a bootstrap dropdown with up direction ("dropup") and make the menu expand upwards.
I managed to setup the "accordion" inside the dropdown as you can see in the code example.
Here is the html
<div class="dropup" id="dropdownUp">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="btnGroup"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroup" id="dmenu">
<a class="dropdown-item keepopen" href="#c_1" data-toggle="collapse">Category 1</a>
<ul class="collapse" id="c_1" data-parent="#dmenu">
<li>Child 1-1</li>
<li>Child 1-2</li>
<li>Child 1-3</li>
</ul>
<a class="dropdown-item keepopen" href="#c_2" data-toggle="collapse">Category 2</a>
<ul class="collapse" id="c_2" data-parent="#dmenu">
<li>Child 2-1</li>
<li>Child 2-2</li>
</ul>
<a class="dropdown-item keepopen" href="#c_3" data-toggle="collapse">Category 3</a>
<ul class="collapse" id="c_3" data-parent="#dmenu">
<li>Child 3-1</li>
</ul>
</div>
</div>
And here is the javascript
$(document).ready(function() {
$('#dropdownUp').on('hide.bs.dropdown', function(e) {
if ($(e.clickEvent.target).hasClass('keepopen')) {
return false;
}
return true;
});
$('#dropdownUp').on('hidden.bs.dropdown', function() {
$('.dropdown-menu .collapse.show').collapse('hide');
});
});
Here the link to the example
https://jsbin.com/cirejudipu/edit?html,js,output
The problem is, when the collapse expands, the dropdown menu goes over the button. Is there a way to make the accordion and the dropdown menu expand upwards? Thank you.

you could use the transform/rotate CSS property to force the element to turn upside down. you may need to use the same property on the contents to flip them right side up. I've used this on animated CSS/JS apps as well as on flipping entire canvas projects sideways.
here is the line of CSS
transform: rotate(180deg);
let me know if that helps

Applying "active" class to tab on mobile, but not desktop

I'm currently working on a web project where you have the option to switch between two tabs using Bootstrap and Angularjs. Basically I want it to default the grid to active on desktop, but then default the list to active on mobile.
<div class="col-sm-2">
<div class="course-view-section">
<ul class="nav nav-tabs course-view-tab">
<li class="active"><a data-toggle="tab" href="" class="course-view-btn btn btn-default course-view-btn" ng-click="selected = selection.grid"><i class="fa fa-th"></i> Grid</a></li>
<li><a data-toggle="tab" href="" class="course-view-btn btn btn-default course-view-btn" ng-click="selected = selection.list"><i class="fa fa-list"></i> List</a></li>
</ul>
</div>
</div>
The angular
<div class="content" ng-switch="selection">
<div ng-if="selected === selection.grid">
<ng-include src="'/Content/template/course/grid-view.html'"></ng-include>
</div>
<div ng-if="selected === selection.list">
<ng-include src="'/Content/template/course/list-view.html'"></ng-include>
</div>
</div>
I've played around with media queries, ng-class etc, but couldn't get it work as intended. Anyone figured this one out before?

Try setting the state of selected when the page loads. How you do this depends a lot on how you are structuring the rest of the app. For example, if $scope is being intialized then perhaps similar to this in the controller might work:
$scope.init = function () {
if(window.innerWidth <= 800 && window.innerHeight <= 600) {
$scope.selected = selection.list
} else {
$scope.selected = selection.grid
}
}

Getting issue while using ui-router of Angular.js

I am getting some issue while using Angular.js Ui-router.First let me to explain my code below.
<ul class="nav navbar-nav">
<li ui-sref-active="active" ><a ui-sref=".profile">College Profile</a></li>
<li ui-sref-active="active" ><a ui-sref=".stream">College stream</a></li>
<li ui-sref-active="active"><a ui-sref=".dept" >College Department</a></li>
<li class="dropdown " ui-sref-active="active">
<a ui-sref=".res.userrole" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Resource Management <span class="caret"></span></a>
</li>
<li ui-sref-active="active"><a ui-sref=".usermanagement">User Management</a></li>
<li ui-sref-active="active"><a ui-sref=".role">User Role</a></li>
</ul>
When user is clicking on Resource Management menu the below page is opening.
<div class="container">
<tabset>
<tab ui-sref="dashboard.res.userrole" ui-sref-active="active">
<tab-heading>Add User Role</tab-heading>
</tab>
<tab ui-sref="dashboard.res.course" ui-sref-active="active">
<tab-heading>Add Course</tab-heading>
</tab>
</tabset>
<div ui-view></div>
</div>
Here i need if user will select Add course tab the main menu Resource Management will be hignlight/active.In this case only it is active when user is clicking Add User Role tab.Please check my below route file.
.state('dashboard.res', {
url: '/res',
templateUrl: 'dashboardview/res.html',
controller: 'resController'
})
.state('dashboard.res.userrole', {
url: '/userrole',
templateUrl: 'dashboardview/userrole.html',
controller: 'resourceuserroleController'
})
.state('dashboard.res.course', {
url: '/course',
templateUrl: 'dashboardview/course.html',
controller: 'resourcecourseController'
})
Here i have also another issue.Suppose user is refreshing the page staying on any tab select the ,the both tab are getting highlighted.Actually here i need if Add user roletab will select the parent menu will be highlight and same forAdd course`.I was following this plunkr link but in my case its not working as per required.Please help me to resolve this issue.

Display content on click of navigation menu in angularjs

My html page contain two sections. Left side I have navigation(code is below) and right side is to display contents for respective navigation menu.
On click of each navigation menu, particular section should be rendered on my content part.
I have done it using ng-show/ng-hide by setting flag in my js file. But since I am setting flags for each sections and show/hide , my js code file looks very odd. I know this is not the correct way to do it.
I am new to angularjs. Kindly help me to achieve this efficiently.
HTML code: (only navigation part)
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li class="active">Home</li>
<div class="collapse" id="Login">
<ul class="nav nav-pills nav-stacked">
<li><a class="glyphicon glyphicon-log-in" href="#" ng-click="LoginScreen()">Login</a></li>
<li><a class="glyphicon glyphicon-user" href="#" ng-click="RegisterScreen()">Register</a></li>
</ul>
</div>
<li>About</li>
<div class="collapse" id="Contact">
<ul class="nav nav-pills nav-stacked">
<li><a class="glyphicon glyphicon-save" href="#" ng-click="LoadUserDetailsScreen()">LoadUserDetails</a></li>
<li><a class="glyphicon glyphicon-phone-alt" href="#">Contact</a></li>
</ul>
</div>
</ul>
</div>
JS code:
var app = angular.module('myApp', []);
app.controller('mycontroller', function($scope) {
$scope.FlagHomeScreen = true;
$scope.LoadData=false;
$scope.showtable=false;
$scope.showstatus=false;
$scope.FlagLoginScreen = false;
$scope.RegisterScreenFlag= false;
$scope.menuitems =[10,20,30];
$scope.LoginScreen = function(){
$scope.FlagLoginScreen = true;
$scope.FlagHomeScreen =false;
$scope.LoadData=false;
$scope.RegisterScreenFlag=false;
};
$scope.LoadUserDetailsScreen =function(){
$scope.LoadData=true;
$scope.FlagLoginScreen = false;
$scope.FlagHomeScreen =false;
$scope.RegisterScreenFlag=false;
};
$scope.RegisterScreen=function(){
$scope.RegisterScreenFlag=true;
$scope.LoadData=false;
$scope.FlagLoginScreen = false;
$scope.FlagHomeScreen =false;
};
});

You can handle your navigation in your app using ui-router. For your case you need a main template which includes your navigation bar and in each state of your app you want to show a different view.
Here is a fiddle which shows you how you can use ui-router to handle your views. For clarity I only implemented login and user details in the example below. You can add remaining parts yourself, it would be a good practice for you.
Define your states as such:
var myApp = angular.module('myApp', ['ui.router'])
.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('home', {
url: "/",
template: '<div ui-view=""/>' // templates of child states will fill components with ui-view attribute
})
.state('home.userDetails', {
url: "userDetails",
template: '<div>user details</div>',
controller: "UserDetailsCtrl"
})
.state('home.login', {
url: "login",
//templateUrl: "path/to/login.html" // instead of giving inline templates as below, you can include your template into a html file, and use it in your state by templateUrl property
template: '<div>user login</div>',
controller: "LoginCtrl"
})
}])
And you can navigate within your states using ui-sref instead of using ng-show and ng-click.
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li class="active">Home</li>
<div class="collapse" id="Login">
<ul class="nav nav-pills nav-stacked">
<li><a class="glyphicon glyphicon-log-in" ui-sref="home.login">Login</a></li>
<li><a class="glyphicon glyphicon-user" href="#" ng-click="RegisterScreen()">Register</a></li>
</ul>
</div>
<li>About</li>
<div class="collapse" id="Contact">
<ul class="nav nav-pills nav-stacked">
<li><a class="glyphicon glyphicon-save" ui-sref="home.userDetails">LoadUserDetails</a></li>
<li><a class="glyphicon glyphicon-phone-alt" href="#">Contact</a></li>
</ul>
</div>
</ul>
</div>
<div ui-view=""/>
Don't forget to check documentation of ui-router:
http://angular-ui.github.io/ui-router/site/#/api
JSFiddle:
http://jsfiddle.net/7tzXh/48/