ui-default: init

将ui-default合并至主存储库便于维护

packages/ui-default/components/navigation/hamburgers.page.styl

@@ -0,0 +1,87 @@
+// extracted from:
+// https://github.com/jonsuh/hamburgers/blob/master/dist/hamburgers.css
+// copyright @jonsuh
+.hamburger
+  padding: 0px 0px
+  display: inline-block
+  cursor: pointer
+  transition-property: opacity, -webkit-filter
+  transition-property: opacity, filter
+  transition-property: opacity, filter, -webkit-filter
+  transition-duration: 0.15s
+  transition-timing-function: linear
+  font: inherit
+  color: inherit
+  text-transform: none
+  background-color: transparent
+  border: 0
+  margin: 0
+  overflow: visible
+
+.hamburger:hover
+  opacity: 0.7
+
+.hamburger-box
+  width: rem(18px)
+  height: rem(12px)
+  display: inline-block
+  position: relative
+
+.hamburger-inner
+  display: block
+  top: 50%
+  margin-top: rem(-1px)
+
+.hamburger-inner,
+.hamburger-inner::before,
+.hamburger-inner::after
+  width: rem(18px)
+  height: rem(2px)
+  background-color: #FFF
+  border-radius: 1px
+  position: absolute
+  transition-property: transform
+  transition-duration: 0.15s
+  transition-timing-function: ease
+
+.layout--immersive
+  .hamburger-inner,
+  .hamburger-inner::before,
+  .hamburger-inner::after
+    background-color: #FFF
+
+.hamburger-inner::before,
+.hamburger-inner::after
+  content: ""
+  display: block
+
+.hamburger-inner::before
+  top: rem(-5px)
+
+.hamburger-inner::after
+  bottom: rem(-5px)
+
+.hamburger--spin .hamburger-inner
+  transition-duration: 0.3s
+  transition-timing-function: ease-out-cubic
+
+.hamburger--spin .hamburger-inner::before
+  transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in
+
+.hamburger--spin .hamburger-inner::after
+  transition: bottom 0.1s 0.34s ease-in, transform 0.3s ease-in-cubic
+
+.hamburger--spin.is-active .hamburger-inner
+  transform: rotate(225deg)
+  transition-delay: 0.14s
+  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
+
+.hamburger--spin.is-active .hamburger-inner::before
+  top: 0
+  opacity: 0
+  transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out
+
+.hamburger--spin.is-active .hamburger-inner::after
+  bottom: 0
+  transform: rotate(-90deg)
+  transition: bottom 0.1s ease-out, transform 0.3s 0.14s ease-out-cubic

packages/ui-default/components/navigation/index.js

@@ -0,0 +1,97 @@
+import _ from 'lodash';
+import responsiveCutoff from 'vj/breakpoints.json';
+import { isBelow } from 'vj/utils/mediaQuery';
+
+class MultipleStateContainer {
+  constructor(onStateChange, initialState = false) {
+    this.onStateChange = onStateChange;
+    this.states = {};
+    this.currentState = initialState;
+  }
+
+  set(name, value, update = true) {
+    this.states[name] = value;
+    if (update) {
+      this.update();
+    }
+  }
+
+  get(name) {
+    return this.states[name];
+  }
+
+  update() {
+    const newState = this.getState();
+    if (newState !== this.currentState) {
+      this.onStateChange(newState);
+      this.currentState = newState;
+    }
+  }
+
+  getState() {
+    return _.values(this.states).indexOf(true) > -1;
+  }
+}
+
+class Navigation {
+  constructor($nav, $navShadow) {
+    this.updateExpandWidth = _.throttle(this.updateExpandWidthImmediate.bind(this), 200);
+    this.$nav = $nav;
+    this.$navRow = $nav.children('.row');
+    this.$navShadow = $navShadow;
+    this.floating = new MultipleStateContainer(this.updateFloating.bind(this));
+    this.logoVisible = new MultipleStateContainer(this.updateLogoVisibility.bind(this));
+    this.expanded = new MultipleStateContainer(this.updateExpandState.bind(this));
+  }
+
+  updateFloating(state) {
+    if (state) {
+      this.$nav.addClass('floating');
+      this.$navShadow.addClass('floating');
+      $('body').addClass('nav--floating');
+    } else {
+      this.$nav.removeClass('floating');
+      this.$navShadow.removeClass('floating');
+      $('body').removeClass('nav--floating');
+    }
+  }
+
+  updateLogoVisibility(state) {
+    if (state) {
+      this.$nav.addClass('showlogo');
+    } else {
+      this.$nav.removeClass('showlogo');
+    }
+  }
+
+  updateExpandWidthImmediate() {
+    this.$navRow.css('max-width', `${window.innerWidth}px`);
+  }
+
+  updateExpandState(state) {
+    if (state) {
+      $(window).on('resize', this.updateExpandWidth);
+      this.updateExpandWidthImmediate();
+    } else {
+      $(window).off('resize', this.updateExpandWidth);
+      this.$navRow.css('max-width', '');
+    }
+  }
+
+  getHeight() {
+    if (isBelow(responsiveCutoff.mobile)) {
+      return 0;
+    }
+    if (this.$nav.length === 0) {
+      return 0;
+    }
+    if (!this._navHeight) {
+      this._navHeight = this.$nav.height();
+    }
+    return this._navHeight;
+  }
+}
+
+Navigation.instance = new Navigation($('.nav'), $('.nav--shadow'));
+
+export default Navigation;

packages/ui-default/components/navigation/navigation.page.js

@@ -0,0 +1,68 @@
+import _ from 'lodash';
+import Slideout from 'slideout';
+
+import { AutoloadPage } from 'vj/misc/Page';
+import request from 'vj/utils/request';
+import responsiveCutoff from 'vj/breakpoints.json';
+import { isAbove } from 'vj/utils/mediaQuery';
+import Navigation from '.';
+
+const nav = Navigation.instance;
+const { $nav } = nav;
+
+function handleScroll() {
+  const currentState = $(window).scrollTop() > 20;
+  if (nav.floating.get('nonTop') !== currentState) {
+    nav.floating.set('nonTop', currentState);
+    nav.logoVisible.set('nonTop', currentState);
+  }
+}
+
+function handleNavLogoutClick(ev) {
+  const $logoutLink = $(ev.currentTarget);
+  request
+    .post($logoutLink.attr('href'))
+    .then(() => window.location.reload());
+  ev.preventDefault();
+}
+
+const navigationPage = new AutoloadPage('navigationPage', () => {
+  if (!document.getElementById('panel') || !document.getElementById('menu')) {
+    return;
+  }
+  if ($nav.length > 0
+    && document.documentElement.getAttribute('data-layout') === 'basic'
+    && isAbove(responsiveCutoff.mobile)
+  ) {
+    $(window).on('scroll', _.throttle(handleScroll, 100));
+    $nav.hover(
+      () => nav.floating.set('hover', true),
+      () => nav.floating.set('hover', false),
+    );
+    $nav.on('vjDropdownShow', () => nav.floating.set('dropdown', true));
+    $nav.on('vjDropdownHide', () => nav.floating.set('dropdown', false));
+    handleScroll();
+  }
+
+  $(document).on('click', '[name="nav_logout"]', handleNavLogoutClick);
+
+  const slideout = new Slideout({
+    panel: document.getElementById('panel'),
+    menu: document.getElementById('menu'),
+    padding: 200,
+    tolerance: 70,
+    side: 'right',
+  });
+  [['beforeopen', 'add'], ['beforeclose', 'remove']].forEach(([event, action]) => {
+    slideout.on(event, () => $('.header__hamburger .hamburger')[`${action}Class`]('is-active'));
+  });
+
+  const $slideoutOverlay = $('.slideout-overlay');
+  $slideoutOverlay.click(() => slideout.close());
+  slideout.on('beforeopen', () => $slideoutOverlay.show());
+  slideout.on('beforeclose', () => $slideoutOverlay.hide());
+
+  $('.header__hamburger').click(() => slideout.toggle());
+});
+
+export default navigationPage;

packages/ui-default/components/navigation/navigation.page.styl

@@ -0,0 +1,232 @@
+.nav--placeholder
+  height: $nav-item-height
+
+.nav
+  position: relative
+  left: 0
+  top: 0
+  width: 100%
+  height: rem($nav-item-height)
+  font-size: rem($font-size-secondary)
+  transition: background .2s
+  transition-timing-function: ease-out-cubic
+  z-index: 500
+
+  .hasjs &
+    position: fixed
+
+  .nojs &
+    box-shadow: 0 0 10px rgba(#000, 0.4)
+    margin-bottom: rem(-($nav-item-height))
+    overflow: hidden
+
+.nav > .row
+  transition: max-width .5s ease-out-cubic
+
+.nav--shadow
+  position: fixed
+  left: 0
+  top: 0
+  width: 100%
+  height: rem($nav-item-height)
+  z-index: 300
+  transition: box-shadow .2s
+  transition-timing-function: ease-out-cubic
+
+  .nojs &
+    display: none
+
+.nav__list, .nav__list-item
+  list-style: none
+
+.nav__list--main
+  float: left
+
+.nav__item
+  display: block
+  line-height: rem($nav-item-height - 6)
+  padding: rem(0 20px 3px 20px)
+  border-top: 3px solid transparent
+  color: #FFF
+  transition: border-color .2s, background .2s, color .2s
+  transition-timing-function: ease-out-cubic
+  position: relative
+
+  &:before
+    content: ''
+    position: absolute
+    left: 0
+    top: -1px
+    width: 100%
+    height: 1px
+
+  &:visited, &:active
+    color: #FFF
+
+  &.nav--active
+    border-color: $nav-item-active-immersive-color
+    &:before
+      box-shadow: 0 0 30px #FFF,
+                  0 0 30px #FFF,
+                  0 0 30px #FFF
+
+  &:hover
+    text-decoration: none
+    border-color: lighten($nav-item-hover-color, 60%)
+    background: rgba(#FFF, 0.3)
+
+
+.nav__list--secondary
+  float: right
+
+.nav__item--round
+  display: block
+  line-height: rem($nav-item-round-height - 2 * $nav-item-round-border)
+  margin: rem((($nav-item-height - $nav-item-round-height) / 2) 0)
+  padding: rem(0 25px)
+  border-radius: rem($nav-item-round-height / 2)
+  color: #FFF
+  border: $nav-item-round-border solid #FFF
+  transition: background .2s, color .2s, border-color .2s
+  transition-timing-function: ease-out-cubic
+
+  &:visited, &:active
+    color: #FFF
+
+  &:hover
+    text-decoration: none
+    background: #FFF
+    color: #666
+
+.nav__list-item
+  float: left
+
+.nav__list--main .nav__item--round
+  margin-right: rem(5px)
+
+.nav__list--secondary .nav__item--round
+  margin-left: rem(5px)
+
+.nav__logo__options
+  background-image: url(./nav-logo-small_light.png)
+  background-image: url(./nav-logo-small_dark.png)
+  background-image: url(./nav-logo-small@2x_light.png)
+  background-image: url(./nav-logo-small@2x_dark.png)
+
+.nav__logo
+  display: block
+  width: 0
+  opacity: 0
+  height: rem($nav-logo-height)
+  margin: rem((($nav-item-height - $nav-logo-height) / 2) 0)
+  background: no-repeat
+  transition: width .3s, opacity .3s
+  transition-timing-function: ease-out-cubic
+  +retina()
+    background-size: $nav-logo-width $nav-logo-height
+
+  &:hover
+    text-decoration: none
+
+  +mobile()
+    display: none
+
+.nav.showlogo, .layout--immersive
+  .nav__logo
+    width: rem($nav-logo-width + 10)
+    opacity: 1
+
+.nav.floating, .nojs .nav
+  background: rgba(#FFF, 0.98)
+
+  .nav__item
+    color: $text-1-color
+    &.nav--active
+      border-color: $nav-item-active-color
+      &:before
+        box-shadow: 0 0 30px $nav-item-active-color,
+                    0 0 30px $nav-item-active-color
+    &:hover
+      border-color: $nav-item-hover-color
+      background: #F8F8F8
+      &:before
+        box-shadow: none
+
+  .nav__item--round
+    border-color: $primary-color
+    color: $primary-color
+
+    &:hover
+      background-color: $primary-color
+      color: #FFF
+
+.nav--shadow.floating
+  box-shadow: 0 0 6px rgba(#000, 0.3)
+
+// For Mobile: show a slideout vertical arranged menu
++mobile()
+
+  .nav .columns
+    padding: 0
+
+  .nav--shadow
+    display: none
+
+  .nav.slideout-menu
+    background: #1D1F20
+
+  .nav__list
+    float: none
+
+  .nav__list-item
+    float: none
+
+  .nav__item,
+  .nav__item--round,
+  .nav__list--secondary .nav__item--round,
+  .nav .dropdown-target.menu .menu__link
+    line-height: rem($nav-item-height - 6)
+    padding: rem(0 20px 3px 20px)
+    border: 0
+    border-left: 3px solid transparent
+    margin: 0
+    border-radius: 0
+    background: none
+    color: #FFF
+
+    .icon
+      line-height: inherit
+
+    &.nav--active
+      border-color: $nav-item-active-color
+
+    &:visited, &:active
+      background: none
+      color: #FFF
+
+    &:hover
+      border-color: $nav-item-hover-color
+      background: rgba(#FFF, 0.10)
+      color: #FFF
+
+  .nav__item
+    &:before
+      left: -2px
+      top: 0
+      height: 100%
+      width: 1px
+
+  .nav .dropdown-target.menu
+    display: block
+    background: none
+    border: 0
+    box-shadow: none
+
+    .menu__link
+      padding-left: rem(35px)
+
+    .menu__seperator
+      display: none
+
+  .nav__list--secondary
+    border-top: 1px solid #666