From 5a27fedd8e8e4e6d1d10d1eb0e1fb3a105d608f0 Mon Sep 17 00:00:00 2001 From: Koji Tanaka Date: Sun, 12 Mar 2017 21:56:22 +0900 Subject: [PATCH 1/2] Fix dropdown menu doesn't work on some browser (import code from docs) --- templates/cakephp/js/main.js | 9 -- templates/cakephp/js/vendor.js | 131 --------------------- templates/cakephp/resources/css/styles.css | 18 +++ 3 files changed, 18 insertions(+), 140 deletions(-) diff --git a/templates/cakephp/js/main.js b/templates/cakephp/js/main.js index d8ad1959..edcf5c89 100644 --- a/templates/cakephp/js/main.js +++ b/templates/cakephp/js/main.js @@ -422,13 +422,4 @@ $(function() { window.location.hash = hash.join(','); }); - - // Focus support for versions menu. - var dropdown = $('.dropdown'); - dropdown.find('> a').on('focus', function () { - dropdown.find('ul').show(); - }); - dropdown.find('a').last().on('blur', function () { - dropdown.find('ul').css('display', ''); - }); }); diff --git a/templates/cakephp/js/vendor.js b/templates/cakephp/js/vendor.js index eccf8ac4..75606d44 100644 --- a/templates/cakephp/js/vendor.js +++ b/templates/cakephp/js/vendor.js @@ -1,134 +1,3 @@ -/** - * @preserve - * Project: Bootstrap Hover Dropdown - * Author: Cameron Spear - * Version: v2.2.1 - * Contributors: Mattia Larentis - * Dependencies: Bootstrap's Dropdown plugin, jQuery - * Description: A simple plugin to enable Bootstrap dropdowns to active on hover and provide a nice user experience. - * License: MIT - * Homepage: http://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/ - */ -;(function ($, window, undefined) { - // outside the scope of the jQuery plugin to - // keep track of all dropdowns - var $allDropdowns = $(); - - // if instantlyCloseOthers is true, then it will instantly - // shut other nav items when a new one is hovered over - $.fn.dropdownHover = function (options) { - // don't do anything if touch is supported - // (plugin causes some issues on mobile) - if('ontouchstart' in document) return this; // don't want to affect chaining - - // the element we really care about - // is the dropdown-toggle's parent - $allDropdowns = $allDropdowns.add(this.parent()); - - return this.each(function () { - var $this = $(this), - $parent = $this.parent(), - defaults = { - delay: 500, - hoverDelay: 0, - instantlyCloseOthers: true - }, - data = { - delay: $(this).data('delay'), - hoverDelay: $(this).data('hover-delay'), - instantlyCloseOthers: $(this).data('close-others') - }, - showEvent = 'show.bs.dropdown', - hideEvent = 'hide.bs.dropdown', - // shownEvent = 'shown.bs.dropdown', - // hiddenEvent = 'hidden.bs.dropdown', - settings = $.extend(true, {}, defaults, options, data), - timeout, timeoutHover; - - $parent.hover(function (event) { - // so a neighbor can't open the dropdown - if(!$parent.hasClass('open') && !$this.is(event.target)) { - // stop this event, stop executing any code - // in this callback but continue to propagate - return true; - } - - openDropdown(event); - }, function () { - // clear timer for hover event - window.clearTimeout(timeoutHover) - timeout = window.setTimeout(function () { - $this.attr('aria-expanded', 'false'); - $parent.removeClass('open'); - $this.trigger(hideEvent); - }, settings.delay); - }); - - // this helps with button groups! - $this.hover(function (event) { - // this helps prevent a double event from firing. - // see https://github.com/CWSpear/bootstrap-hover-dropdown/issues/55 - if(!$parent.hasClass('open') && !$parent.is(event.target)) { - // stop this event, stop executing any code - // in this callback but continue to propagate - return true; - } - - openDropdown(event); - }); - - // handle submenus - $parent.find('.dropdown-submenu').each(function (){ - var $this = $(this); - var subTimeout; - $this.hover(function () { - window.clearTimeout(subTimeout); - $this.children('.dropdown-menu').show(); - // always close submenu siblings instantly - $this.siblings().children('.dropdown-menu').hide(); - }, function () { - var $submenu = $this.children('.dropdown-menu'); - subTimeout = window.setTimeout(function () { - $submenu.hide(); - }, settings.delay); - }); - }); - - function openDropdown(event) { - if($this.parents(".navbar").find(".navbar-toggle").is(":visible")) { - // If we're inside a navbar, don't do anything when the - // navbar is collapsed, as it makes the navbar pretty unusable. - return; - } - - // clear dropdown timeout here so it doesnt close before it should - window.clearTimeout(timeout); - // restart hover timer - window.clearTimeout(timeoutHover); - - // delay for hover event. - timeoutHover = window.setTimeout(function () { - $allDropdowns.find(':focus').blur(); - - if(settings.instantlyCloseOthers === true) - $allDropdowns.removeClass('open'); - - // clear timer for hover event - window.clearTimeout(timeoutHover); - $this.attr('aria-expanded', 'true'); - $parent.addClass('open'); - $this.trigger(showEvent); - }, settings.hoverDelay); - } - }); - }; - - $(document).ready(function () { - // apply dropdownHover to all elements with the data-hover="dropdown" attribute - $('[data-hover="dropdown"]').dropdownHover(); - }); -})(jQuery, window); - /** * Sticky Headers */ diff --git a/templates/cakephp/resources/css/styles.css b/templates/cakephp/resources/css/styles.css index 8c8630f0..9534bc50 100644 --- a/templates/cakephp/resources/css/styles.css +++ b/templates/cakephp/resources/css/styles.css @@ -1964,6 +1964,24 @@ header { transition: all .0s ease-out; } +@media (min-width:992px) { + .dropdown > .dropdown-menu { + display: block; + visibility: hidden; + opacity: 0; + -webkit-transition: all 0s ease .5s; + transition: all 0s ease .5s; + } + + .dropdown:hover > .dropdown-menu { + display: block; + visibility: visible; + opacity: 1; + -webkit-transition: all 0s ease 0s; + transition: all 0s ease 0s; + } +} + .navbar-nav > li > .dropdown-menu { margin-top: 0; border-top-left-radius: 2px; From 5f4f2071aef85927f6e67a4493109538235fb87e Mon Sep 17 00:00:00 2001 From: Koji Tanaka Date: Wed, 15 Mar 2017 01:19:08 +0900 Subject: [PATCH 2/2] Fix dropdown menu doesn't work on some browser (import code from docs) --- templates/cakephp/header.latte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/cakephp/header.latte b/templates/cakephp/header.latte index b506c777..b8582095 100644 --- a/templates/cakephp/header.latte +++ b/templates/cakephp/header.latte @@ -117,7 +117,7 @@ {var $versions = $config->template->options->versions} {var $activeVersion = $config->template->options->activeVersion} {if $activeVersion != 'master' && !empty($versions)} -