mirror of
https://github.com/processwire/processwire.git
synced 2025-08-19 13:01:26 +02:00
Update to convert several css selectors to be "pw-" selectors, as part of longer term goal to work nicely with other css frameworks.
This commit is contained in:
Ryan Cramer
@@ -84,27 +84,27 @@ var ProcessWireAdmin = {
|
||||
var $a = $(this);
|
||||
var $ul;
|
||||
|
||||
if($a.attr('data-dropdown')) {
|
||||
if($a.attr('data-pw-dropdown')) {
|
||||
// see if it is specifying a certain <ul>
|
||||
// first check if the selector matches a sibling
|
||||
$ul = $a.siblings($a.attr('data-dropdown'));
|
||||
$ul = $a.siblings($a.attr('data-pw-dropdown'));
|
||||
// if no match for sibling, check entire document
|
||||
if(!$ul.length) $ul = $($a.attr('data-dropdown'));
|
||||
if(!$ul.length) $ul = $($a.attr('data-pw-dropdown'));
|
||||
} else {
|
||||
// otherwise use the <ul> that is the sibling
|
||||
$ul = $a.siblings('.dropdown-menu');
|
||||
$ul = $a.siblings('.pw-dropdown-menu');
|
||||
}
|
||||
|
||||
$ul.hide();
|
||||
$a.data('dropdown-ul', $ul);
|
||||
$a.data('pw-dropdown-ul', $ul);
|
||||
|
||||
if($a.is('button')) {
|
||||
if($a.find('.ui-button-text').length == 0) $a.button();
|
||||
if($a.attr('type') == 'submit') {
|
||||
$a.click(function() {
|
||||
$a.addClass('dropdown-disabled');
|
||||
$a.addClass('pw-dropdown-disabled');
|
||||
setTimeout(function() {
|
||||
$a.removeClass('dropdown-disabled');
|
||||
$a.removeClass('pw-dropdown-disabled');
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
@@ -119,8 +119,8 @@ var ProcessWireAdmin = {
|
||||
});
|
||||
|
||||
// prepend icon to dropdown items that themselves have more items
|
||||
$ul.find(".has-items").each(function() {
|
||||
var $icon = $("<i class='has-items-icon fa fa-angle-right ui-priority-secondary'></i>");
|
||||
$ul.find(".pw-has-items").each(function() {
|
||||
var $icon = $("<i class='pw-has-items-icon fa fa-angle-right ui-priority-secondary'></i>");
|
||||
$(this).prepend($icon);
|
||||
});
|
||||
|
||||
@@ -136,30 +136,30 @@ var ProcessWireAdmin = {
|
||||
function mouseenterDropdownToggle(e) {
|
||||
|
||||
var $a = $(this);
|
||||
var $ul = $a.data('dropdown-ul');
|
||||
var delay = $a.hasClass('dropdown-toggle-delay') ? 700 : 0;
|
||||
var lastOffset = $ul.data('dropdown-last-offset');
|
||||
var timeout = $a.data('dropdown-timeout');
|
||||
var $ul = $a.data('pw-dropdown-ul');
|
||||
var delay = $a.hasClass('pw-dropdown-toggle-delay') ? 700 : 0;
|
||||
var lastOffset = $ul.data('pw-dropdown-last-offset');
|
||||
var timeout = $a.data('pw-dropdown-timeout');
|
||||
|
||||
if($a.hasClass('dropdown-toggle-click')) {
|
||||
if($a.hasClass('pw-dropdown-toggle-click')) {
|
||||
if(e.type != 'mousedown') return;
|
||||
$a.removeClass('ui-state-focus');
|
||||
}
|
||||
if($a.hasClass('dropdown-disabled')) return;
|
||||
if($a.hasClass('pw-dropdown-disabled')) return;
|
||||
|
||||
timeout = setTimeout(function() {
|
||||
if($a.hasClass('dropdown-disabled')) return;
|
||||
if($a.hasClass('pw-dropdown-disabled')) return;
|
||||
var offset = $a.offset();
|
||||
if(lastOffset != null) {
|
||||
if(offset.top != lastOffset.top || offset.left != lastOffset.left) {
|
||||
// dropdown-toggle has moved, destroy and re-create
|
||||
$ul.menu('destroy').removeClass('dropdown-ready');
|
||||
$ul.menu('destroy').removeClass('pw-dropdown-ready');
|
||||
}
|
||||
}
|
||||
|
||||
if(!$ul.hasClass('dropdown-ready')) {
|
||||
if(!$ul.hasClass('pw-dropdown-ready')) {
|
||||
$ul.css('position', 'absolute');
|
||||
$ul.prependTo($('body')).addClass('dropdown-ready').menu();
|
||||
$ul.prependTo($('body')).addClass('pw-dropdown-ready').menu();
|
||||
var position = {my: 'right top', at: 'right bottom', of: $a};
|
||||
var my = $ul.attr('data-my');
|
||||
var at = $ul.attr('data-at');
|
||||
@@ -170,18 +170,18 @@ var ProcessWireAdmin = {
|
||||
|
||||
$a.addClass('hover');
|
||||
$ul.show();
|
||||
$ul.data('dropdown-last-offset', offset);
|
||||
$ul.data('pw-dropdown-last-offset', offset);
|
||||
|
||||
}, delay);
|
||||
|
||||
$a.data('dropdown-timeout', timeout);
|
||||
$a.data('pw-dropdown-timeout', timeout);
|
||||
}
|
||||
|
||||
function mouseleaveDropdownToggle() {
|
||||
|
||||
var $a = $(this);
|
||||
var $ul = $a.data('dropdown-ul');
|
||||
var timeout = $a.data('dropdown-timeout');
|
||||
var $ul = $a.data('pw-dropdown-ul');
|
||||
var timeout = $a.data('pw-dropdown-timeout');
|
||||
|
||||
if(timeout) clearTimeout(timeout);
|
||||
setTimeout(function() {
|
||||
@@ -220,12 +220,12 @@ var ProcessWireAdmin = {
|
||||
if(!hoveredDropdownAjaxItem) return;
|
||||
if(hoveredDropdownAjaxItem != $a) return;
|
||||
|
||||
$a.addClass('ajax-items-loaded');
|
||||
$a.addClass('pw-ajax-items-loaded');
|
||||
// var url = $a.attr('href');
|
||||
var url = $a.attr('data-json');
|
||||
var $ul = $a.siblings('ul');
|
||||
var setupDropdownHover = false;
|
||||
var $itemsIcon = $a.children('.has-items-icon');
|
||||
var $itemsIcon = $a.children('.pw-has-items-icon');
|
||||
$itemsIcon.removeClass('fa-angle-right').addClass('fa-spinner fa-spin');
|
||||
|
||||
$.getJSON(url, function(data) {
|
||||
@@ -235,7 +235,7 @@ var ProcessWireAdmin = {
|
||||
if(!dropdownPositionsMonitored && data.list.length > 10) {
|
||||
dropdownPositionsMonitored = true;
|
||||
setupDropdownHover = true;
|
||||
$(document).on('hover', 'ul.dropdown-menu a', function() {
|
||||
$(document).on('hover', 'ul.pw-dropdown-menu a', function() {
|
||||
hoverDropdownAjaxItem($(this));
|
||||
});
|
||||
}
|
||||
@@ -290,21 +290,21 @@ var ProcessWireAdmin = {
|
||||
function init() {
|
||||
|
||||
if($("body").hasClass('touch-device')) {
|
||||
$('#topnav').on("click", "a.dropdown-toggle, a.has-items", touchClick);
|
||||
$('#topnav').on("click", "a.pw-dropdown-toggle, a.pw-has-items", touchClick);
|
||||
}
|
||||
|
||||
$(".dropdown-menu").on("click", "a:not(.pw-modal)", function(e) {
|
||||
$(".pw-dropdown-menu").on("click", "a:not(.pw-modal)", function(e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
$(".dropdown-toggle").each(setupDropdown);
|
||||
$(".pw-dropdown-toggle").each(setupDropdown);
|
||||
|
||||
$(document)
|
||||
.on('mousedown', '.dropdown-toggle-click', mouseenterDropdownToggle)
|
||||
.on('mouseenter', '.dropdown-toggle:not(.dropdown-toggle-click)', mouseenterDropdownToggle)
|
||||
.on('mouseleave', '.dropdown-toggle', mouseleaveDropdownToggle)
|
||||
.on('mouseenter', '.dropdown-menu a.has-ajax-items:not(.ajax-items-loaded)', mouseenterDropdownAjaxItem) // navJSON
|
||||
.on('mouseleave', '.dropdown-menu a.has-ajax-items', function() { // navJSON
|
||||
.on('mousedown', '.pw-dropdown-toggle-click', mouseenterDropdownToggle)
|
||||
.on('mouseenter', '.pw-dropdown-toggle:not(.pw-dropdown-toggle-click)', mouseenterDropdownToggle)
|
||||
.on('mouseleave', '.pw-dropdown-toggle', mouseleaveDropdownToggle)
|
||||
.on('mouseenter', '.pw-dropdown-menu a.pw-has-ajax-items:not(.pw-ajax-items-loaded)', mouseenterDropdownAjaxItem) // navJSON
|
||||
.on('mouseleave', '.pw-dropdown-menu a.pw-has-ajax-items', function() { // navJSON
|
||||
hoveredDropdownAjaxItem = null;
|
||||
});
|
||||
}
|
||||
|
||||
2
wire/templates-admin/scripts/main.min.js
vendored
2
wire/templates-admin/scripts/main.min.js
vendored
File diff suppressed because one or more lines are too long
32
wire/templates-admin/styles/AdminTheme.css
Normal file
32
wire/templates-admin/styles/AdminTheme.css
Normal file
@@ -0,0 +1,32 @@
|
||||
.pw-bullets li {
|
||||
display: list-item;
|
||||
list-style: disc;
|
||||
margin: 0 0 0 1.25em; }
|
||||
|
||||
.pw-numbers li {
|
||||
display: list-item;
|
||||
list-style: decimal;
|
||||
margin: 0 0 0 1.25em; }
|
||||
|
||||
.pw-align-left, .align_left, .align-left {
|
||||
float: left;
|
||||
margin: 0 1em 0.5em 0; }
|
||||
|
||||
.pw-align-right, .align_right, .align-right {
|
||||
float: right;
|
||||
margin: 0 0 0.5em 1em; }
|
||||
|
||||
.pw-align-center, .align_center, .align-center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
|
||||
.pw-no-select {
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
/* prevent selection of this element */ }
|
||||
|
||||
/*# sourceMappingURL=AdminTheme.css.map */
|
||||
70
wire/templates-admin/styles/AdminTheme.scss
Normal file
70
wire/templates-admin/styles/AdminTheme.scss
Normal file
@@ -0,0 +1,70 @@
|
||||
// Common styles for AdminTheme modules
|
||||
|
||||
// element containing generated PW content (also may have id=content)
|
||||
.pw-content {}
|
||||
|
||||
// wrapping element for an an area that may contain .pw-content
|
||||
.pw-container {}
|
||||
|
||||
// bulleted list
|
||||
.pw-bullets li {
|
||||
display: list-item;
|
||||
list-style: disc;
|
||||
margin: 0 0 0 1.25em;
|
||||
}
|
||||
|
||||
// decimal numbered list
|
||||
.pw-numbers li {
|
||||
display: list-item;
|
||||
list-style: decimal;
|
||||
margin: 0 0 0 1.25em;
|
||||
}
|
||||
|
||||
// dropdown menu
|
||||
.pw-dropdown-menu {
|
||||
// rounded dropdown menu
|
||||
&.pw-dropdown-menu-rounded { }
|
||||
}
|
||||
|
||||
// dropdown menu connected to a <button> element with actions
|
||||
.pw-button-dropdown { }
|
||||
|
||||
// class applied to <button> elements that should automatically repeat in the header
|
||||
.pw-head-button { }
|
||||
|
||||
// alignment: left
|
||||
.pw-align-left, .align_left, .align-left {
|
||||
float: left;
|
||||
margin: 0 1em 0.5em 0;
|
||||
}
|
||||
|
||||
// alignment: right
|
||||
.pw-align-right, .align_right, .align-right {
|
||||
float: right;
|
||||
margin: 0 0 0.5em 1em;
|
||||
}
|
||||
|
||||
// alignment: center
|
||||
.pw-align-center, .align_center, .align-center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// added to elements that should not be selectable via highlight
|
||||
.pw-no-select {
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none; /* prevent selection of this element */
|
||||
}
|
||||
|
||||
// Smaller notes text as used under input elements in Inputfields and elsewhere
|
||||
.pw-notes {}
|
||||
|
||||
// Description text as used above input elements in Inputfields and elsewhere
|
||||
.pw-description {}
|
||||
|
||||
// Small muted text
|
||||
.pw-detail {}
|
||||
Reference in New Issue
Block a user