diff options
Diffstat (limited to 'app/dispatch/static/materialize/js/buttons.js')
| -rw-r--r-- | app/dispatch/static/materialize/js/buttons.js | 267 |
1 files changed, 267 insertions, 0 deletions
diff --git a/app/dispatch/static/materialize/js/buttons.js b/app/dispatch/static/materialize/js/buttons.js new file mode 100644 index 0000000..ca923d2 --- /dev/null +++ b/app/dispatch/static/materialize/js/buttons.js @@ -0,0 +1,267 @@ +(function ($) {
+ $(document).ready(function() {
+
+ // jQuery reverse
+ $.fn.reverse = [].reverse;
+
+ // Hover behaviour: make sure this doesn't work on .click-to-toggle FABs!
+ $(document).on('mouseenter.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle):not(.toolbar)', function(e) {
+ var $this = $(this);
+ openFABMenu($this);
+ });
+ $(document).on('mouseleave.fixedActionBtn', '.fixed-action-btn:not(.click-to-toggle):not(.toolbar)', function(e) {
+ var $this = $(this);
+ closeFABMenu($this);
+ });
+
+ // Toggle-on-click behaviour.
+ $(document).on('click.fabClickToggle', '.fixed-action-btn.click-to-toggle > a', function(e) {
+ var $this = $(this);
+ var $menu = $this.parent();
+ if ($menu.hasClass('active')) {
+ closeFABMenu($menu);
+ } else {
+ openFABMenu($menu);
+ }
+ });
+
+ // Toolbar transition behaviour.
+ $(document).on('click.fabToolbar', '.fixed-action-btn.toolbar > a', function(e) {
+ var $this = $(this);
+ var $menu = $this.parent();
+ FABtoToolbar($menu);
+ });
+
+ });
+
+ $.fn.extend({
+ openFAB: function() {
+ openFABMenu($(this));
+ },
+ closeFAB: function() {
+ closeFABMenu($(this));
+ },
+ openToolbar: function() {
+ FABtoToolbar($(this));
+ },
+ closeToolbar: function() {
+ toolbarToFAB($(this));
+ }
+ });
+
+
+ var openFABMenu = function (btn) {
+ var $this = btn;
+ if ($this.hasClass('active') === false) {
+
+ // Get direction option
+ var horizontal = $this.hasClass('horizontal');
+ var offsetY, offsetX;
+
+ if (horizontal === true) {
+ offsetX = 40;
+ } else {
+ offsetY = 40;
+ }
+
+ $this.addClass('active');
+ $this.find('ul .btn-floating').velocity(
+ { scaleY: ".4", scaleX: ".4", translateY: offsetY + 'px', translateX: offsetX + 'px'},
+ { duration: 0 });
+
+ var time = 0;
+ $this.find('ul .btn-floating').reverse().each( function () {
+ $(this).velocity(
+ { opacity: "1", scaleX: "1", scaleY: "1", translateY: "0", translateX: '0'},
+ { duration: 80, delay: time });
+ time += 40;
+ });
+ }
+ };
+
+ var closeFABMenu = function (btn) {
+ var $this = btn;
+ // Get direction option
+ var horizontal = $this.hasClass('horizontal');
+ var offsetY, offsetX;
+
+ if (horizontal === true) {
+ offsetX = 40;
+ } else {
+ offsetY = 40;
+ }
+
+ $this.removeClass('active');
+ var time = 0;
+ $this.find('ul .btn-floating').velocity("stop", true);
+ $this.find('ul .btn-floating').velocity(
+ { opacity: "0", scaleX: ".4", scaleY: ".4", translateY: offsetY + 'px', translateX: offsetX + 'px'},
+ { duration: 80 }
+ );
+ };
+
+
+ /**
+ * Transform FAB into toolbar
+ * @param {Object} object jQuery object
+ */
+ var FABtoToolbar = function(btn) {
+ if (btn.attr('data-open') === "true") {
+ return;
+ }
+
+ var offsetX, offsetY, scaleFactor;
+ var windowWidth = window.innerWidth;
+ var windowHeight = window.innerHeight;
+ var btnRect = btn[0].getBoundingClientRect();
+ var anchor = btn.find('> a').first();
+ var menu = btn.find('> ul').first();
+ var backdrop = $('<div class="fab-backdrop"></div>');
+ var fabColor = anchor.css('background-color');
+ anchor.append(backdrop);
+
+ offsetX = btnRect.left - (windowWidth / 2) + (btnRect.width / 2);
+ offsetY = windowHeight - btnRect.bottom;
+ scaleFactor = windowWidth / backdrop.width();
+ btn.attr('data-origin-bottom', btnRect.bottom);
+ btn.attr('data-origin-left', btnRect.left);
+ btn.attr('data-origin-width', btnRect.width);
+
+ // Set initial state
+ btn.addClass('active');
+ btn.attr('data-open', true);
+ btn.css({
+ 'text-align': 'center',
+ width: '100%',
+ bottom: 0,
+ left: 0,
+ transform: 'translateX(' + offsetX + 'px)',
+ transition: 'none'
+ });
+ anchor.css({
+ transform: 'translateY(' + -offsetY + 'px)',
+ transition: 'none'
+ });
+ backdrop.css({
+ 'background-color': fabColor
+ });
+
+
+ setTimeout(function() {
+ btn.css({
+ transform: '',
+ transition: 'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s'
+ });
+ anchor.css({
+ overflow: 'visible',
+ transform: '',
+ transition: 'transform .2s'
+ });
+
+ setTimeout(function() {
+ btn.css({
+ overflow: 'hidden',
+ 'background-color': fabColor
+ });
+ backdrop.css({
+ transform: 'scale(' + scaleFactor + ')',
+ transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
+ });
+ menu.find('> li > a').css({
+ opacity: 1
+ });
+
+ // Scroll to close.
+ $(window).on('scroll.fabToolbarClose', function() {
+ toolbarToFAB(btn);
+ $(window).off('scroll.fabToolbarClose');
+ $(document).off('click.fabToolbarClose');
+ });
+
+ $(document).on('click.fabToolbarClose', function(e) {
+ if (!$(e.target).closest(menu).length) {
+ toolbarToFAB(btn);
+ $(window).off('scroll.fabToolbarClose');
+ $(document).off('click.fabToolbarClose');
+ }
+ });
+ }, 100);
+ }, 0);
+ };
+
+ /**
+ * Transform toolbar back into FAB
+ * @param {Object} object jQuery object
+ */
+ var toolbarToFAB = function(btn) {
+ if (btn.attr('data-open') !== "true") {
+ return;
+ }
+
+ var offsetX, offsetY, scaleFactor;
+ var windowWidth = window.innerWidth;
+ var windowHeight = window.innerHeight;
+ var btnWidth = btn.attr('data-origin-width');
+ var btnBottom = btn.attr('data-origin-bottom');
+ var btnLeft = btn.attr('data-origin-left');
+ var anchor = btn.find('> .btn-floating').first();
+ var menu = btn.find('> ul').first();
+ var backdrop = btn.find('.fab-backdrop');
+ var fabColor = anchor.css('background-color');
+
+ offsetX = btnLeft - (windowWidth / 2) + (btnWidth / 2);
+ offsetY = windowHeight - btnBottom;
+ scaleFactor = windowWidth / backdrop.width();
+
+
+ // Hide backdrop
+ btn.removeClass('active');
+ btn.attr('data-open', false);
+ btn.css({
+ 'background-color': 'transparent',
+ transition: 'none'
+ });
+ anchor.css({
+ transition: 'none'
+ });
+ backdrop.css({
+ transform: 'scale(0)',
+ 'background-color': fabColor
+ });
+ menu.find('> li > a').css({
+ opacity: ''
+ });
+
+ setTimeout(function() {
+ backdrop.remove();
+
+ // Set initial state.
+ btn.css({
+ 'text-align': '',
+ width: '',
+ bottom: '',
+ left: '',
+ overflow: '',
+ 'background-color': '',
+ transform: 'translate3d(' + -offsetX + 'px,0,0)'
+ });
+ anchor.css({
+ overflow: '',
+ transform: 'translate3d(0,' + offsetY + 'px,0)'
+ });
+
+ setTimeout(function() {
+ btn.css({
+ transform: 'translate3d(0,0,0)',
+ transition: 'transform .2s'
+ });
+ anchor.css({
+ transform: 'translate3d(0,0,0)',
+ transition: 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)'
+ });
+ }, 20);
+ }, 200);
+ };
+
+
+}( jQuery ));
|