* @module WoltLab/WCF/Ui/Mobile
*/
define(
- [ 'Core', 'Environment', 'EventHandler', 'Language', 'Dom/ChangeListener', 'Ui/CloseOverlay', 'Ui/Screen', './Page/Menu/Main', './Page/Menu/User'],
- function(Core, Environment, EventHandler, Language, DomChangeListener, UiCloseOverlay, UiScreen, UiPageMenuMain, UiPageMenuUser)
+ [ 'Core', 'Environment', 'EventHandler', 'Language', 'List', 'Dom/ChangeListener', 'Ui/CloseOverlay', 'Ui/Screen', './Page/Menu/Main', './Page/Menu/User'],
+ function(Core, Environment, EventHandler, Language, List, DomChangeListener, UiCloseOverlay, UiScreen, UiPageMenuMain, UiPageMenuUser)
{
"use strict";
- var _buttonGroupNavigations = null;
+ var _buttonGroupNavigations = elByClass('buttonGroupNavigation');
var _enabled = false;
+ var _knownMessages = new List();
var _main = null;
+ var _messages = elByClass('message');
var _options = {};
var _pageMenuMain = null;
var _pageMenuUser = null;
enableMobileMenu: true
}, options);
- _buttonGroupNavigations = elByClass('buttonGroupNavigation');
_main = elById('main');
if (Environment.touch()) {
},
_init: function() {
+ _enabled = true;
+
this._initSearchBar();
this._initButtonGroupNavigation();
+ this._initMessages();
this._initMobileMenu();
UiCloseOverlay.add('WoltLab/WCF/Ui/Mobile', this._closeAllMenus.bind(this));
}
},
+ _initMessages: function() {
+ Array.prototype.forEach.call(_messages, function(message) {
+ if (_knownMessages.has(message)) {
+ return;
+ }
+
+ var navigation = elBySel('.jsMobileNavigation', message);
+ var quickOptions = elBySel('.messageQuickOptions', message);
+
+ if (quickOptions) {
+ quickOptions.addEventListener(WCF_CLICK_EVENT, function (event) {
+ if (_enabled) {
+ event.preventDefault();
+ event.stopPropagation();
+
+ navigation.classList.toggle('open');
+ }
+ });
+
+ navigation.addEventListener(WCF_CLICK_EVENT, function(event) {
+ event.stopPropagation();
+ });
+ }
+
+ _knownMessages.add(message);
+ });
+ },
+
_initMobileMenu: function() {
if (_options.enableMobileMenu) {
_pageMenuMain = new UiPageMenuMain();
},
_closeAllMenus: function() {
- elBySelAll('.jsMobileButtonGroupNavigation.open, .boxMenu.open', null, function (menu) {
+ elBySelAll('.jsMobileButtonGroupNavigation.open, .jsMobileNavigation.open, .boxMenu.open', null, function (menu) {
menu.classList.remove('open');
});
}
--- /dev/null
+@mixin dropdownMenu {
+ background-color: $wcfDropdownBackground;
+ border-radius: 2px;
+ box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
+ color: $wcfDropdownText;
+ display: none;
+ min-width: 160px;
+ padding: 3px 0;
+ pointer-events: all;
+ position: absolute;
+ text-align: left;
+ visibility: hidden;
+ z-index: 450;
+
+ &.dropdownMenuPageSearch {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+
+ &.dropdownArrowRight {
+ &::after {
+ left: auto;
+ right: 9px;
+ }
+
+ &::before {
+ left: auto;
+ right: 10px;
+ }
+ }
+
+ &.dropdownArrowBottom {
+ &::after {
+ border: 10px transparent solid;
+ border-top-color: $wcfDropdownBorder;
+ border-bottom-width: 0;
+ bottom: -10px;
+ top: auto;
+ }
+
+ &::before {
+ border: 9px transparent solid;
+ border-top-color: $wcfDropdownBackground;
+ border-bottom-width: 0;
+ bottom: -9px;
+ top: auto;
+ }
+ }
+
+ &.dropdownOpen {
+ display: block;
+ visibility: visible;
+ }
+
+ li {
+ display: block;
+
+ &:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText),
+ &.dropdownList > li:hover:not(.dropdownDivider),
+ &.dropdownNavigationItem,
+ &.active {
+ background-color: $wcfDropdownBackgroundActive;
+ color: $wcfDropdownLinkActive;
+
+ > a {
+ color: $wcfDropdownLinkActive;
+ }
+ }
+
+ &.dropdownDivider {
+ border-top: 1px solid $wcfDropdownBorderInner;
+ margin: 3px 0;
+ }
+
+ &.dropdownText {
+ padding: $wcfGapTiny $wcfGapMedium;
+
+ @include wcfFontSmall;
+ }
+
+ &.boxFlag {
+ padding-top: 2px;
+ }
+
+ /*
+ // @TODO
+ &.missingValue > span {
+ position: relative;
+
+ &:after {
+ color: @wcfWarningBackgroundColor;
+ content: @fa-var-exclamation-triangle;
+ font-family: FontAwesome;
+ position: absolute;
+ right: @wcfGapMedium;
+ top: @wcfGapTiny;
+ }
+ }
+ */
+
+ > a,
+ > span {
+ clear: both;
+ cursor: pointer;
+ display: block;
+ max-width: 350px;
+ overflow: hidden;
+ padding: 5px 20px;
+ text-decoration: none;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ word-wrap: normal;
+
+ > div > h3 {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+
+ > a {
+ color: $wcfDropdownLink;
+ }
+
+ > a > small {
+ display: block;
+ }
+
+ > a + span.badge {
+ display: none;
+ }
+
+ > .box16 {
+ align-items: center;
+ cursor: pointer;
+ min-height: 0;
+ padding: 5px 10px;
+ }
+
+ > label {
+ display: block;
+ }
+
+ .containerHeadline {
+ margin-bottom: 0;
+
+ > p {
+ @include wcfFontSmall;
+ }
+ }
+
+ .icon {
+ color: inherit;
+ }
+ }
+
+ .scrollableDropdownMenu {
+ max-height: 300px;
+ overflow: auto;
+ }
+
+ @include screen-xs {
+ left: 0 !important;
+ right: 0 !important;
+ }
+
+ @include screen-md-down {
+ li {
+ overflow: hidden;
+
+ > a,
+ > span {
+ max-width: none;
+ white-space: normal;
+ }
+ }
+ }
+
+ @include screen-md-up {
+ .dropdownMenu.pageHeaderSearchDropdown {
+ transform: translateY(-10px);
+ }
+ }
+}
}
> .buttonList {
- @extend .dropdownMenu;
+ @include dropdownMenu;
position: static !important;
top: 0;
}
.dropdownMenu {
- background-color: $wcfDropdownBackground;
- border-radius: 2px;
- box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
- color: $wcfDropdownText;
- display: none;
- min-width: 160px;
- padding: 3px 0;
- pointer-events: all;
- position: absolute;
- text-align: left;
- visibility: hidden;
- z-index: 450;
-
- &.dropdownMenuPageSearch {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
-
- &.dropdownArrowRight {
- &::after {
- left: auto;
- right: 9px;
- }
-
- &::before {
- left: auto;
- right: 10px;
- }
- }
-
- &.dropdownArrowBottom {
- &::after {
- border: 10px transparent solid;
- border-top-color: $wcfDropdownBorder;
- border-bottom-width: 0;
- bottom: -10px;
- top: auto;
- }
-
- &::before {
- border: 9px transparent solid;
- border-top-color: $wcfDropdownBackground;
- border-bottom-width: 0;
- bottom: -9px;
- top: auto;
- }
- }
-
- &.dropdownOpen {
- display: block;
- visibility: visible;
- }
-
- li {
- display: block;
-
- &:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText),
- &.dropdownList > li:hover:not(.dropdownDivider),
- &.dropdownNavigationItem,
- &.active {
- background-color: $wcfDropdownBackgroundActive;
- color: $wcfDropdownLinkActive;
-
- > a {
- color: $wcfDropdownLinkActive;
- }
- }
-
- &.dropdownDivider {
- border-top: 1px solid $wcfDropdownBorderInner;
- margin: 3px 0;
- }
-
- &.dropdownText {
- padding: $wcfGapTiny $wcfGapMedium;
-
- @include wcfFontSmall;
- }
-
- &.boxFlag {
- padding-top: 2px;
- }
-
- /*
- // @TODO
- &.missingValue > span {
- position: relative;
-
- &:after {
- color: @wcfWarningBackgroundColor;
- content: @fa-var-exclamation-triangle;
- font-family: FontAwesome;
- position: absolute;
- right: @wcfGapMedium;
- top: @wcfGapTiny;
- }
- }
- */
-
- > a,
- > span {
- clear: both;
- cursor: pointer;
- display: block;
- max-width: 350px;
- overflow: hidden;
- padding: 5px 20px;
- text-decoration: none;
- text-overflow: ellipsis;
- white-space: nowrap;
- word-wrap: normal;
-
- > div > h3 {
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
-
- > a {
- color: $wcfDropdownLink;
- }
-
- > a > small {
- display: block;
- }
-
- > a + span.badge {
- display: none;
- }
-
- > .box16 {
- align-items: center;
- cursor: pointer;
- min-height: 0;
- padding: 5px 10px;
- }
-
- > label {
- display: block;
- }
-
- .containerHeadline {
- margin-bottom: 0;
-
- > p {
- @include wcfFontSmall;
- }
- }
-
- .icon {
- color: inherit;
- }
- }
-
- .scrollableDropdownMenu {
- max-height: 300px;
- overflow: auto;
- }
-
- @include screen-xs {
- left: 0 !important;
- right: 0 !important;
- }
-
- @include screen-md-down {
- li {
- overflow: hidden;
-
- > a,
- > span {
- max-width: none;
- white-space: normal;
- }
- }
- }
-
- @include screen-md-up {
- .dropdownMenu.pageHeaderSearchDropdown {
- transform: translateY(-10px);
- }
- }
+ @include dropdownMenu;
}
.dropdownIndicator::after {
@include screen-sm-down {
margin-top: 20px;
+ position: relative;
}
&.loading {
}
@include screen-sm-down {
- flex: 0 0 24px;
+ flex: 0 0 24px !important;
height: 1.5em;
position: relative;
&::before {
- content: $fa-var-bars;
+ content: $fa-var-ellipsis-v;
font-family: FontAwesome;
font-size: 18px;
+ height: 24px;
position: absolute;
right: 0;
+ text-align: center;
top: -2px;
+ width: 24px;
}
> li {
}
@include screen-sm-down {
- display: none;
+ &:not(.open) {
+ display: none;
+ }
+
+ // uses pointless additional classes to increase selector specificity :(
+ &.buttonList.open {
+ @include dropdownMenu;
+
+ display: block;
+ position: absolute;
+ visibility: visible;
+ top: 10px;
+
+ .button {
+ // these three are required to work around the .button default styling
+ background-color: transparent;
+ color: $wcfDropdownLink;
+
+ @include wcfFontDefault;
+
+ > .invisible {
+ display: inline;
+ margin-left: 5px;
+ }
+ }
+ }
}
}
}
projects / GitHub / WoltLab / WCF.git / commitdiff