diff options
author | Lin Jen-Shin <godfat@godfat.org> | 2017-03-27 21:36:36 +0800 |
---|---|---|
committer | Lin Jen-Shin <godfat@godfat.org> | 2017-03-27 21:36:36 +0800 |
commit | a236e4132e92304ee5d77f507fb98b3f98fd03bd (patch) | |
tree | 377710f67abd62b69606773b8ae6b38775afccc9 /app/assets/javascripts/group_name.js | |
parent | 03cb7935187955ad68a4304a562a94a2eb1f246d (diff) | |
parent | 40e3a70165a97526edc0caee228bc7b75f62534c (diff) | |
download | gitlab-ce-a236e4132e92304ee5d77f507fb98b3f98fd03bd.tar.gz |
Merge remote-tracking branch 'upstream/master' into test-pg-mysql
* upstream/master: (127 commits)
Fixed up issue boards JS specs
Implement new service for creating user
Add Changelog entry for pipeline retry fix
Do not retry jobs multiple times when retrying a pipeline
Update sentry-raven 2.0.2 -> 2.4.0
Update webmock 1.21.0 -> 1.24.6
Update spring 1.7.2 -> 2.0.1
Update simplecov 0.12.0 -> 0.14.1
Update pry-rails 0.3.4 -> 0.3.5
Update pry-byebug 3.4.1 -> 3.4.2
Update flay 2.6.1 -> 2.8.1
Optimize labels finder query
Remove Tags filter from Projects Explore dropdown
Update capybara-screenshot 1.0.11 -> 1.0.14
Update bullet 5.2.0 -> 5.5.1
Update brakeman 3.4.1 -> 3.6.1
Remove web-console gem
Update better_errors 1.0.1 -> 2.1.1
Display flash message to unauthenticated user when creating new issue
Activate group name toggle based on horizontal space
...
Diffstat (limited to 'app/assets/javascripts/group_name.js')
-rw-r--r-- | app/assets/javascripts/group_name.js | 42 |
1 files changed, 33 insertions, 9 deletions
diff --git a/app/assets/javascripts/group_name.js b/app/assets/javascripts/group_name.js index 6a028f299b1..62675d7e67e 100644 --- a/app/assets/javascripts/group_name.js +++ b/app/assets/javascripts/group_name.js @@ -1,40 +1,64 @@ -const GROUP_LIMIT = 2; + +import _ from 'underscore'; export default class GroupName { constructor() { - this.titleContainer = document.querySelector('.title'); - this.groups = document.querySelectorAll('.group-path'); + this.titleContainer = document.querySelector('.title-container'); + this.title = document.querySelector('.title'); + this.titleWidth = this.title.offsetWidth; this.groupTitle = document.querySelector('.group-title'); + this.groups = document.querySelectorAll('.group-path'); this.toggle = null; this.isHidden = false; this.init(); } init() { - if (this.groups.length > GROUP_LIMIT) { + if (this.groups.length > 0) { this.groups[this.groups.length - 1].classList.remove('hidable'); - this.addToggle(); + this.toggleHandler(); + window.addEventListener('resize', _.debounce(this.toggleHandler.bind(this), 100)); } this.render(); } - addToggle() { - const header = document.querySelector('.header-content'); + toggleHandler() { + if (this.titleWidth > this.titleContainer.offsetWidth) { + if (!this.toggle) this.createToggle(); + this.showToggle(); + } else if (this.toggle) { + this.hideToggle(); + } + } + + createToggle() { 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.titleContainer.insertBefore(this.toggle, this.title); this.toggleGroups(); } + showToggle() { + this.title.classList.add('wrap'); + this.toggle.classList.remove('hidden'); + if (this.isHidden) this.groupTitle.classList.add('is-hidden'); + } + + hideToggle() { + this.title.classList.remove('wrap'); + this.toggle.classList.add('hidden'); + if (this.isHidden) this.groupTitle.classList.remove('is-hidden'); + } + toggleGroups() { this.isHidden = !this.isHidden; this.groupTitle.classList.toggle('is-hidden'); } render() { - this.titleContainer.classList.remove('initializing'); + this.title.classList.remove('initializing'); } } |