diff options
author | Sam Rose <sam@gitlab.com> | 2017-03-01 05:59:55 +0300 |
---|---|---|
committer | Sam Rose <sam@gitlab.com> | 2017-03-14 02:25:13 +0300 |
commit | db59e735ae9c30bfa1e9d0800b6edfaaf6981f2a (patch) | |
tree | 2d645047a5a692b49f516feb158d057ef82f344e /app/assets/javascripts/group_name.js | |
parent | cc64eda987d2b1dfc7c0af4255bd09f072301f9c (diff) |
Toggle project name if too long
Diffstat (limited to 'app/assets/javascripts/group_name.js')
-rw-r--r-- | app/assets/javascripts/group_name.js | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/app/assets/javascripts/group_name.js b/app/assets/javascripts/group_name.js new file mode 100644 index 00000000000..6a028f299b1 --- /dev/null +++ b/app/assets/javascripts/group_name.js @@ -0,0 +1,40 @@ +const GROUP_LIMIT = 2; + +export default class GroupName { + constructor() { + this.titleContainer = document.querySelector('.title'); + this.groups = document.querySelectorAll('.group-path'); + this.groupTitle = document.querySelector('.group-title'); + this.toggle = null; + this.isHidden = false; + this.init(); + } + + init() { + if (this.groups.length > GROUP_LIMIT) { + this.groups[this.groups.length - 1].classList.remove('hidable'); + this.addToggle(); + } + this.render(); + } + + addToggle() { + const header = document.querySelector('.header-content'); + this.toggle = document.createElement('button'); + this.toggle.className = 'text-expander group-name-toggle'; + this.toggle.setAttribute('aria-label', 'Toggle full path'); + this.toggle.innerHTML = '...'; + this.toggle.addEventListener('click', this.toggleGroups.bind(this)); + header.insertBefore(this.toggle, this.titleContainer); + this.toggleGroups(); + } + + toggleGroups() { + this.isHidden = !this.isHidden; + this.groupTitle.classList.toggle('is-hidden'); + } + + render() { + this.titleContainer.classList.remove('initializing'); + } +} |