docbrown/app/javascript/admin/controllers/sidebar_controller.js
Ridhwana c53cfc5951
RFC#50-P4: Feature Flagged Routes and Interaction Design (#12967)
* feat: add the nested sidebar with some elements

* feat: create a tabbed nav item menu

* feat: add the tabbed nav_item partial to the views that need tabbed nav items

* fix: change variable back

* feat: style the sidebar a bit more

* chore: add some more styles

* feat: add a spec for the nested navigational items

* refactor: a more dynamic tabbed admin helper

* feat: add some more nav items

* fix: controller for reports

* refactor: shorthand if statement

* chore: add the whitespace back

* refactor: rubocop fixes

* chore: use any

* chore: remove whitespace

* refactor: rename the variable

* refactor: use a DSL style admin helper

* chore: variable renaming and routes

* rubocop: fixes

* refactor: move files to more apt places

* chore: keep overview as it was previously

* Update app/views/admin/secrets/index.html.erb

Co-authored-by: Michael Kohl <me@citizen428.net>

* Update app/views/admin/shared/_tabbed_navbar.erb

Co-authored-by: Michael Kohl <me@citizen428.net>

* Update app/views/admin/badges/index.html.erb

Co-authored-by: Michael Kohl <me@citizen428.net>

* chore: disable blocklength

* refactor: move the logic to the model instead of in the view

* chore: remove get_ prefix

* chore: move the request mangling to a helper that finds the controller and scope

* Update app/helpers/admin_helper.rb

Co-authored-by: rhymes <rhymes@hey.com>

* Update app/helpers/admin_helper.rb

Co-authored-by: rhymes <rhymes@hey.com>

* refactor: Address feedback

* oops

* oops use tr

* feat: update specs

* feat: make the navbar a dropdown

* feat: add a cursor pointer to the dropdown

* feat: add the icons which results in changed data structure

* fix: badge achievements

* feat: rename to an html file, show and collapse links + show active links

* chore: rename tabbed view to an html file

* fix: scope should be apps not app

* feat: add icons for the admin menu

* feat: increase the margin left

* feat: move the overview into the feature flag block and add an icon

* chore:remove files

* chore: indent

* feat: update crayons -link to have no text-decoration

* feat: current link for a scope with one controller

* Update app/lib/menu.rb

Co-authored-by: Michael Kohl <me@citizen428.net>

* Update app/models/admin_menu.rb

Co-authored-by: Michael Kohl <me@citizen428.net>

* refactor: we added svg to the builder so remove it from creating the hash

* feat: undo change to crayons and add it to the admin stylesheet

* Update app/views/admin/shared/_nested_sidebar.html.erb

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* refactor: change to use ul and li's + a button

* chore: add bracket to next line

* feat: add aria-page

* chore: remove brackets

* feat: added focus specifically for the sidebar

* Update app/views/admin/shared/_nested_sidebar.html.erb

Co-authored-by: Jamie Gaskins <jgaskins@hey.com>

* chore: remove additional title

* chore: indent

* feat: add a visibilee keyword to the payload and set it to true by default

* feat: move the feature flagged routes into the correct sections

* feat: check if an item is visible before rendering it

* feat: amend the tabbed_navbar to be more accessible and add in visibilty checks

* chore: update comment

* chore: amend the styles

* chore: change url to path

* chore: comment

* test: add more tests

* Update app/assets/stylesheets/admin.scss

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* Update app/views/admin/shared/_nested_sidebar.html.erb

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* Update app/views/layouts/admin.html.erb

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* chore: merge

* feat: use focus for browsers that dont support focus-visible (I'm looking at you Safari) and move it within the crayons-link so we dont see it on mouse click

* WIP: first pass of stimulus controller code

* feat: interaction design

* chore: remove unnecessary condiition

* chore: only add transparent background when not the current link

* Update app/models/admin_menu.rb

Co-authored-by: Michael Kohl <me@citizen428.net>

* feat; comment explaining

* feat: add an id on the button to be clicked

* feat: disable currentNavItem

* chore: remove event params

* chore: update cursor

* feat: (safe fail)
only show the tabbed navbar when the roures contain values form the data structure

* chore: pass events through + tests

* trigger an onload event and test the disabling of the menu item

* refactor: tabbed menu items

* feat: account for the visibility  of the feature flags

* chore: rubocop fixes

* chore: indentation

* feat: some refactors and updates for rubocop

* Update app/javascript/admin/controllers/sidebar_controller.js

Co-authored-by: Vaidehi Joshi <vaidehi.sj@gmail.com>

* feat: set to true

Co-authored-by: Michael Kohl <me@citizen428.net>
Co-authored-by: rhymes <rhymes@hey.com>
Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
Co-authored-by: Jamie Gaskins <jgaskins@hey.com>
Co-authored-by: Vaidehi Joshi <vaidehi.sj@gmail.com>
2021-03-23 11:12:54 +02:00

35 lines
987 B
JavaScript

import { Controller } from 'stimulus';
// eslint-disable-next-line no-restricted-syntax
export default class SidebarController extends Controller {
static targets = [
'submenu'
];
disableCurrentNavItem() {
const activeMenuId = this.submenuTargets.filter((item) => item.classList.contains("show"))[0].id
const activeButton = document.getElementById(`${activeMenuId}_button`);
activeButton.setAttribute("disabled", true)
}
expandDropdown(event) {
this.redirectToFirstChildNavItem(event);
this.closeOtherMenus();
}
redirectToFirstChildNavItem(event) {
window.location.href = event.target.getAttribute('data-target-href');
}
closeOtherMenus() {
const expandedList = ['expand', 'show'];
const collapsedList = ['collapse', 'hide'];
this.submenuTargets.map((item) => {
if (item.classList.contains("show")) {
item.classList.remove(...expandedList);
item.classList.add(...collapsedList);
}
});
}
}