Commit c7ec7578 authored by colemanw's avatar colemanw
Browse files

Update KAM to 1.0.beta2

parent 2db3c3a0
......@@ -30,8 +30,7 @@ By default the bar will appear at the top of the screen with a toggle arrow to m
| Event | Description | Example |
| ------ | ----------- | ------- |
| `crmMenuLoad` | Triggered on the page body after menu data loads but *before* the menu is rendered in the dom.<br />This is a good time to add/remove items if you already know what they are at page load. | `$(document).on('crmMenuLoad', function() {` <br /> ` CRM.menubar.addItems(-1, 'Search', myItems);` <br /> `});` |
| `crmLoad` | Triggered on the `#civicrm-menu` element after menu is rendered in the dom. | `$(document).on('crmLoad', '#civicrm-menu', function() {` <br /> ` // Do something now that the menu is rendered` <br /> `});` |
| `crmLoad` | Triggered on the `#civicrm-menu` element after menu is added to the dom.<br />This is a good time to add/remove items if you already know what they are at page load. | `$(document).on('crmLoad', '#civicrm-menu', function() {` <br /> ` CRM.menubar.addItems(-1, 'Search', myItems);` <br /> `});` |
#### Properties
......@@ -56,7 +55,7 @@ By default the bar will appear at the top of the screen with a toggle arrow to m
| `removeItem( itemName )` | Deletes an item from the menu (and all its children).<br />`itemName`: name of item to remove. | `CRM.menubar.removeItem('New Household');` |
| `show( [speed] )` | Shows the menubar if hidden.<br />`speed`: if a number is given, a slidedown animation is used. | `CRM.menubar.show(250);` |
| `spin( [spin] )` | Spins the icon in the home menu.<br />`spin`: pass a boolean to start or stop the spinning, or pass no arguments to toggle. | `CRM.menubar.spin(true); // start` <br /> `CRM.menubar.spin(false); // stop` |
| `togglePosition()` | Toggles between 'over-cms-menu' and 'below-cms-menu'. | `CRM.menubar.togglePosition();` |
| `togglePosition( [persist] )` | Toggles between 'over-cms-menu' and 'below-cms-menu'. By default, persist the change to localStorage. | `CRM.menubar.togglePosition();` |
| `updateItem( item )` | Updates the properties of a menu item (label, url, separator, icon, etc.<br />`item`: object with at least a `name` plus properties to update. | `CRM.menubar.updateItem({name: 'Search', label: 'Find'});` |
Tip: Try pasting those examples into your browser console.
......
......@@ -138,10 +138,19 @@ input#crm-qsearch-input {
}
a.highlighted #crm-qsearch-input,
#crm-qsearch-input:focus,
#crm-qsearch-input:not(:placeholder-shown) {
#crm-qsearch-input.has-user-input {
background-color: white;
width: 130px;
}
input#crm-qsearch-input:-ms-input-placeholder {
font-family: 'FontAwesome';
}
input#crm-qsearch-input::-webkit-input-placeholder {
font-family: 'FontAwesome';
}
input#crm-qsearch-input::-moz-placeholder {
font-family: 'FontAwesome';
}
input#crm-qsearch-input::placeholder {
font-family: 'FontAwesome';
}
......@@ -233,7 +242,7 @@ body.crm-menubar-over-cms-menu #crm-menubar-toggle-position a i {
}
body.crm-menubar-over-cms-menu #civicrm-menu {
z-index: 100000;
z-index: 99999;
}
body.crm-menubar-hidden #civicrm-menu {
......
body.crm-menubar-visible.crm-menubar-over-cms-menu #toolbar-home,
body.crm-menubar-visible.crm-menubar-over-cms-menu #toolbar-menu {
display: none;
}
@media (min-width: 768px) {
body.crm-menubar-visible.crm-menubar-over-cms-menu #toolbar-user {
visibility: hidden;
body.crm-menubar-visible.crm-menubar-over-cms-menu #toolbar {
display: none;
}
body.crm-menubar-visible.crm-menubar-over-cms-menu {
......@@ -87,9 +82,12 @@ body.crm-menubar-visible.crm-menubar-over-cms-menu #toolbar-menu {
@media (max-width: 768px) {
body.toolbar.crm-menubar-visible.crm-menubar-below-cms-menu #toolbar-home {
body.toolbar.crm-menubar-visible #toolbar-home {
visibility: hidden;
}
body.crm-menubar-visible #toolbar-menu {
display: none;
}
body #civicrm-menu-nav .crm-menubar-toggle-btn {
margin-top: 0;
......
......@@ -28,6 +28,9 @@
body.crm-menubar-below-cms-menu.crm-menubar-visible.crm-menubar-wrapped #wpbody {
padding-top: 80px;
}
body.crm-menubar-over-cms-menu.crm-menubar-visible.crm-menubar-wrapped #adminmenuwrap {
margin-top: 40px;
}
}
@media (min-width: 768px) and (max-width: 960px) {
......
......@@ -14,8 +14,8 @@
<url desc="Support">https://github.com/aydun/uk.squiffle.kam</url>
<url desc="Licensing">http://www.gnu.org/licenses/agpl-3.0.html</url>
</urls>
<releaseDate>2018-12-04</releaseDate>
<version>1.0.beta1</version>
<releaseDate>2018-12-11</releaseDate>
<version>1.0.beta2</version>
<develStage>stable</develStage>
<compatibility>
<ver>5.8</ver>
......
......@@ -19,7 +19,7 @@ localStorage.setItem('Drupal.toolbar.activeTabID', JSON.stringify('toolbar-item-
$(function($) {
// Need Drupal's jQuery to listen to this event
jQuery(document).on('drupalToolbarTabChange', function(event, tab) {
if (CRM.menubar.position === 'below-cms-menu') {
if (CRM.menubar && CRM.menubar.position === 'below-cms-menu') {
var action = jQuery(tab).is('#toolbar-item-civicrm') ? 'show' : 'hide';
CRM.menubar[action]();
}
......
// https://civicrm.org/licensing
(function($, _) {
"use strict";
var branchTpl, searchTpl, treeTpl, initialized,
var templates, initialized,
ENTER_KEY = 13;
CRM.menubar = _.extend({
data: null,
......@@ -9,28 +9,61 @@
position: 'over-cms-menu',
attachTo: (CRM.menubar && CRM.menubar.position === 'above-crm-container') ? '#crm-container' : 'body',
initialize: function() {
$('body')
.addClass('crm-menubar-visible crm-menubar-' + CRM.menubar.position)
.trigger('crmMenuLoad', [CRM.menubar.data]);
initialized = true;
branchTpl = _.template(CRM.menubar.branchTpl, {imports: {_: _, attr: attr}});
searchTpl = _.template(CRM.menubar.searchTpl, {imports: {_: _, ts: ts, CRM: CRM}});
treeTpl = _.template(CRM.menubar.treeTpl, {imports: {branchTpl: branchTpl, searchTpl: searchTpl, ts: ts}});
var attachFn = CRM.menubar.attachTo === 'body' ? 'append' : 'prepend';
$(CRM.menubar.attachTo)[attachFn](treeTpl(CRM.menubar.data));
$('#civicrm-menu')
.on('click', 'a[href="#"]', function() {
// For empty links - keep the menu open and don't jump the page anchor
return false;
})
.on('click', 'a[href="#hidemenu"]', function(e) {
e.preventDefault();
CRM.menubar.hide(250, true);
})
.smartmenus(CRM.menubar.settings).trigger('crmLoad');
CRM.menubar.initializeToggle();
CRM.menubar.initializeSearch();
CRM.menubar.initializeResponsive();
var cache = CRM.cache.get('menubar');
if (cache && cache.code === CRM.config.menuCacheCode && cache.lang === CRM.config.lcMessages && localStorage.civiMenubar) {
CRM.menubar.data = cache.data;
insert(localStorage.civiMenubar);
} else {
$.getJSON(CRM.url('civicrm/ajax/navmenu', {c: CRM.config.menuCacheCode, l: CRM.config.lcMessages}))
.done(function(data) {
var markup = getTpl('tree')(data);
CRM.cache.set('menubar', {code: CRM.config.menuCacheCode, lang: CRM.config.lcMessages, data: data});
CRM.menubar.data = data;
localStorage.setItem('civiMenubar', markup);
insert(markup);
});
}
// Wait for crm-container present on the page as it's faster than document.ready
function insert(markup) {
if ($('#crm-container').length) {
render(markup);
} else {
new MutationObserver(function(mutations, observer) {
_.each(mutations, function(mutant) {
_.each(mutant.addedNodes, function(node) {
if ($(node).is('#crm-container')) {
render(markup);
observer.disconnect();
}
});
});
}).observe(document, {childList: true, subtree: true});
}
}
function render(markup) {
var position = CRM.menubar.attachTo === 'body' ? 'beforeend' : 'afterbegin';
$(CRM.menubar.attachTo)[0].insertAdjacentHTML(position, markup);
CRM.menubar.initializePosition();
$('#civicrm-menu').trigger('crmLoad');
$(document).ready(function() {
handleResize();
$('#civicrm-menu')
.on('click', 'a[href="#"]', function() {
// For empty links - keep the menu open and don't jump the page anchor
return false;
})
.on('click', 'a[href="#hidemenu"]', function(e) {
e.preventDefault();
CRM.menubar.hide(250, true);
})
.smartmenus(CRM.menubar.settings);
initialized = true;
CRM.menubar.initializeResponsive();
CRM.menubar.initializeSearch();
});
}
},
destroy: function() {
$.SmartMenus.destroy();
......@@ -128,14 +161,12 @@
} else {
list.splice.apply(list, [position, 0].concat(items));
}
if (initialized) {
if (targetName && !$ul.is('#civicrm-menu')) {
$ul.html(branchTpl({items: list, branchTpl: branchTpl}));
} else {
$('#civicrm-menu > li').eq(position).after(branchTpl({items: items, branchTpl: branchTpl}));
}
CRM.menubar.refresh();
if (targetName && !$ul.is('#civicrm-menu')) {
$ul.html(getTpl('branch')({items: list, branchTpl: getTpl('branch')}));
} else {
$('#civicrm-menu > li').eq(position).after(getTpl('branch')({items: items, branchTpl: getTpl('branch')}));
}
CRM.menubar.refresh();
},
removeItem: function(itemName) {
traverse(CRM.menubar.data.menu, itemName, 'delete');
......@@ -151,20 +182,24 @@
throw item.name + ' not found';
}
_.extend(menuItem, item);
if (initialized) {
$('li[data-name="' + item.name + '"]', '#civicrm-menu').replaceWith(branchTpl({items: [menuItem], branchTpl: branchTpl}));
CRM.menubar.refresh();
}
$('li[data-name="' + item.name + '"]', '#civicrm-menu').replaceWith(getTpl('branch')({items: [menuItem], branchTpl: getTpl('branch')}));
CRM.menubar.refresh();
},
refresh: function() {
$('#civicrm-menu').smartmenus('refresh');
if (initialized) {
$('#civicrm-menu').smartmenus('refresh');
handleResize();
}
},
togglePosition: function() {
togglePosition: function(persist) {
$('body').toggleClass('crm-menubar-over-cms-menu crm-menubar-below-cms-menu');
CRM.menubar.position = CRM.menubar.position === 'over-cms-menu' ? 'below-cms-menu' : 'over-cms-menu';
CRM.cache.set('menubarPosition', CRM.menubar.position);
handleResize();
if (persist !== false) {
CRM.cache.set('menubarPosition', CRM.menubar.position);
}
},
initializeToggle: function() {
initializePosition: function() {
if (CRM.menubar.position === 'over-cms-menu' || CRM.menubar.position === 'below-cms-menu') {
$('#civicrm-menu')
.on('click', 'a[href="#toggle-position"]', function(e) {
......@@ -172,10 +207,9 @@
CRM.menubar.togglePosition();
})
.append('<li id="crm-menubar-toggle-position"><a href="#toggle-position" title="' + ts('Adjust menu position') + '"><i class="crm-i fa-arrow-up"></i></a>');
if (CRM.cache.get('menubarPosition', CRM.menubar.position) !== CRM.menubar.position) {
CRM.menubar.togglePosition();
}
CRM.menubar.position = CRM.cache.get('menubarPosition', CRM.menubar.position);
}
$('body').addClass('crm-menubar-visible crm-menubar-' + CRM.menubar.position);
},
initializeResponsive: function() {
var $mainMenuState = $('#crm-menubar-state');
......@@ -187,24 +221,16 @@
}
})
.on('resize', function() {
var mobileSize = $(window).width() < 768;
if (!mobileSize && $mainMenuState[0].checked) {
if ($(window).width() >= 768 && $mainMenuState[0].checked) {
$mainMenuState[0].click();
}
if (!mobileSize && $('#civicrm-menu').height() > 50) {
$('body').addClass('crm-menubar-wrapped');
} else {
$('body').removeClass('crm-menubar-wrapped');
}
handleResize();
});
if ($('#civicrm-menu').height() > 52) {
$('body').addClass('crm-menubar-wrapped');
}
$mainMenuState.click(function() {
// Use absolute position instead of fixed when open to allow scrolling menu
var open = $(this).is(':checked');
if (open) {
window.scroll({top:0});
window.scroll({top: 0});
}
$('#civicrm-menu-nav')
.css('position', open ? 'absolute' : '')
......@@ -260,6 +286,9 @@
$(this).autocomplete('widget').addClass('crm-quickSearch-results');
}
})
.on('keyup change', function() {
$(this).toggleClass('has-user-input', !!$(this).val());
})
.keyup(function(e) {
CRM.menubar.close();
if (e.which === ENTER_KEY) {
......@@ -287,6 +316,13 @@
}
}
});
$('#civicrm-menu').on('show.smapi', function(e, menu) {
if ($(menu).parent().attr('data-name') === 'QuickSearch') {
$('#crm-qsearch-input').focus();
} else if ($('#crm-qsearch-input').is(':focus')) {
$('#crm-qsearch-input').blur();
}
});
function setQuickSearchValue() {
var $selection = $('.crm-quickSearchField input:checked'),
label = _.last($selection.parent().text().split(': ')),
......@@ -311,54 +347,73 @@
},
treeTpl:
'<nav id="civicrm-menu-nav">' +
' <input id="crm-menubar-state" type="checkbox" />' +
' <label class="crm-menubar-toggle-btn" for="crm-menubar-state">' +
' <span class="crm-menu-logo"></span>' +
' <span class="crm-menubar-toggle-btn-icon"></span>' +
' <%- ts("Toggle main menu") %>' +
' </label>' +
' <ul id="civicrm-menu" class="sm sm-civicrm">' +
' <%= searchTpl({items: search}) %>' +
' <%= branchTpl({items: menu, branchTpl: branchTpl}) %>' +
' </ul>' +
'<input id="crm-menubar-state" type="checkbox" />' +
'<label class="crm-menubar-toggle-btn" for="crm-menubar-state">' +
'<span class="crm-menu-logo"></span>' +
'<span class="crm-menubar-toggle-btn-icon"></span>' +
'<%- ts("Toggle main menu") %>' +
'</label>' +
'<ul id="civicrm-menu" class="sm sm-civicrm">' +
'<%= searchTpl({items: search}) %>' +
'<%= branchTpl({items: menu, branchTpl: branchTpl}) %>' +
'</ul>' +
'</nav>',
searchTpl:
'<li id="crm-qsearch" data-name="QuickSearch">' +
' <a href="#"> ' +
' <form action="<%= CRM.url(\'civicrm/contact/search/advanced\') %>" name="search_block" method="post">' +
' <div>' +
' <input type="text" id="crm-qsearch-input" name="sort_name" placeholder="\uf002" />' +
' <input type="hidden" name="hidden_location" value="1" />' +
' <input type="hidden" name="hidden_custom" value="1" />' +
' <input type="hidden" name="qfKey" value="<%= CRM.menubar.qfKey %>" />' +
' <input type="hidden" name="_qf_Advanced_refresh" value="Search" />' +
' </div>' +
' </form>' +
' </a>' +
' <ul>' +
' <% _.forEach(items, function(item) { %>' +
' <li><a href="#" class="crm-quickSearchField"><label><input type="radio" value="<%= item.key %>" name="quickSearchField"> <%- item.value %></label></a></li>' +
' <% }) %>' +
' </ul>' +
'<a href="#"> ' +
'<form action="<%= CRM.url(\'civicrm/contact/search/advanced\') %>" name="search_block" method="post">' +
'<div>' +
'<input type="text" id="crm-qsearch-input" name="sort_name" placeholder="\uf002" />' +
'<input type="hidden" name="hidden_location" value="1" />' +
'<input type="hidden" name="hidden_custom" value="1" />' +
'<input type="hidden" name="qfKey" value="<%= CRM.menubar.qfKey %>" />' +
'<input type="hidden" name="_qf_Advanced_refresh" value="Search" />' +
'</div>' +
'</form>' +
'</a>' +
'<ul>' +
'<% _.forEach(items, function(item) { %>' +
'<li><a href="#" class="crm-quickSearchField"><label><input type="radio" value="<%= item.key %>" name="quickSearchField"> <%- item.value %></label></a></li>' +
'<% }) %>' +
'</ul>' +
'</li>',
branchTpl:
'<% _.forEach(items, function(item) { %>' +
' <li <%= attr(item) %>>' +
' <a href="<%= item.url || "#" %>">' +
' <% if (item.icon) { %>' +
' <i class="<%- item.icon %>"></i>' +
' <% } %>' +
' <% if (item.label) { %>' +
' <span><%- item.label %></span>' +
' <% } %>' +
' </a>' +
' <% if (item.child) { %>' +
' <ul><%= branchTpl({items: item.child, branchTpl: branchTpl}) %></ul>' +
' <% } %>' +
' </li>' +
'<li <%= attr(item) %>>' +
'<a href="<%= item.url || "#" %>">' +
'<% if (item.icon) { %>' +
'<i class="<%- item.icon %>"></i>' +
'<% } %>' +
'<% if (item.label) { %>' +
'<span><%- item.label %></span>' +
'<% } %>' +
'</a>' +
'<% if (item.child) { %>' +
'<ul><%= branchTpl({items: item.child, branchTpl: branchTpl}) %></ul>' +
'<% } %>' +
'</li>' +
'<% }) %>'
}, CRM.menubar || {});
function getTpl(name) {
if (!templates) {
templates = {
branch: _.template(CRM.menubar.branchTpl, {imports: {_: _, attr: attr}}),
search: _.template(CRM.menubar.searchTpl, {imports: {_: _, ts: ts, CRM: CRM}})
};
templates.tree = _.template(CRM.menubar.treeTpl, {imports: {branchTpl: templates.branch, searchTpl: templates.search, ts: ts}});
}
return templates[name];
}
function handleResize() {
if ($(window).width() >= 768 && $('#civicrm-menu').height() > 50) {
$('body').addClass('crm-menubar-wrapped');
} else {
$('body').removeClass('crm-menubar-wrapped');
}
}
function traverse(items, itemName, op) {
var found;
_.each(items, function(item, index) {
......@@ -391,14 +446,6 @@
return ret.join(' ');
}
$.getJSON(CRM.url('civicrm/ajax/navmenu', {c: CRM.config.menuCacheCode, l: CRM.config.lcMessages}))
.done(function(data) {
CRM.menubar.data = data;
if (CRM.menubar.attachTo === 'body') {
CRM.menubar.initialize();
} else {
$(CRM.menubar.initialize);
}
});
CRM.menubar.initialize();
})(CRM.$, CRM._);
// http://civicrm.org/licensing
CRM.$(function($) {
$(document)
.on('dialogopen', function(e) {
// Make admin bar hide behind popup windows
$('#adminmenuwrap').css('z-index', '100');
})
.on('dialogclose', function(e) {
if ($('.ui-dialog-content:visible').not(e.target).length < 1) {
// Restore admin bar position
$('#adminmenuwrap').css('z-index', '');
}
})
.on('crmWysiwygCreate', function(e, type, editor) {
if (type === 'ckeditor') {
editor.on('maximize', function(e) {
$('#wpadminbar').toggle(e.data === 2);
});
}
});
// Prevent screen reader shortcuts from changing the document hash and breaking angular routes
$('a.screen-reader-shortcut').click(function() {
var href = $(this).attr('href');
// Show toolbar if hidden
if (href === '#wp-toolbar' && CRM.menubar.position === 'over-cms-menu') {
CRM.menubar.togglePosition(false);
}
$(href).focus();
return false;
});
$('<a href="#crm-qsearch-input" class="screen-reader-shortcut">' + ts("Open CiviCRM Menu") + '</a>')
.prependTo('#adminmenumain')
.click(function() {
CRM.menubar.open('Home');
return false;
});
});
......@@ -30,11 +30,11 @@ function kam_civicrm_coreResourceList(&$list, $region) {
$cms = $cms === 'drupal' ? 'drupal7' : $cms;
$path = 'packages/smartmenus-1.1.0/';
Civi::resources()
->addScriptFile('uk.squiffle.kam', $path . 'jquery.smartmenus.js', 0, 'html-header')
->addScriptFile('uk.squiffle.kam', $path . 'addons/keyboard/jquery.smartmenus.keyboard.js', 1, 'html-header')
->addScriptFile('uk.squiffle.kam', 'js/crm.menubar.js', -9)
->addStyleFile('uk.squiffle.kam', "css/menubar-$cms.css")
->addStyleUrl(\Civi::service('asset_builder')->getUrl('sm-civicrm.css'));
->addStyleFile('uk.squiffle.kam', "css/menubar-$cms.css", -99, 'html-header')
->addStyleUrl(\Civi::service('asset_builder')->getUrl('sm-civicrm.css'), -98, 'html-header')
->addScriptFile('uk.squiffle.kam', $path . 'jquery.smartmenus.js', -99, 'html-header')
->addScriptFile('uk.squiffle.kam', $path . 'addons/keyboard/jquery.smartmenus.keyboard.js', -98, 'html-header')
->addScriptFile('uk.squiffle.kam', 'js/crm.menubar.js', -97, 'html-header');
$list[] = [
'menubar' => [
'position' => $position,
......@@ -69,6 +69,12 @@ function kam_civicrm_alterContent(&$content, $context, $tplName, &$object) {
$override = ['scriptUrl' => $resources->getUrl('uk.squiffle.kam', 'js/crm.drupal8.js', TRUE)];
$region->update($drupal8['name'], $override);
}
// Override wordpress.js file
$wordpress = $region->get($resources->getUrl('civicrm', 'js/crm.wordpress.js', TRUE));
if ($wordpress) {
$override = ['scriptUrl' => $resources->getUrl('uk.squiffle.kam', 'js/crm.wordpress.js', TRUE)];
$region->update($wordpress['name'], $override);
}
// Override core joomla.css file
$joomlaCss = $region->get($resources->getUrl('civicrm', 'css/joomla.css', TRUE));
if ($joomlaCss) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment