Create site wide search bar
This commit is contained in:
parent
b2a83e147f
commit
cfe8c644f4
|
@ -1,4 +1,4 @@
|
||||||
// Compile ECMA6 to ECMA5
|
// Compile ES2015 to JS
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
module.exports = function (grunt) {
|
module.exports = function (grunt) {
|
||||||
|
@ -15,6 +15,7 @@ module.exports = function (grunt) {
|
||||||
'build/js/dist/Widget.js' : 'build/js/src/Widget.js',
|
'build/js/dist/Widget.js' : 'build/js/src/Widget.js',
|
||||||
'build/js/dist/ControlSidebar.js': 'build/js/src/ControlSidebar.js',
|
'build/js/dist/ControlSidebar.js': 'build/js/src/ControlSidebar.js',
|
||||||
'build/js/dist/Search.js' : 'build/js/src/Search.js',
|
'build/js/dist/Search.js' : 'build/js/src/Search.js',
|
||||||
|
'build/js/dist/SiteSearch.js' : 'build/js/src/SiteSearch.js',
|
||||||
'dist/js/adminlte.js' : 'build/js/src/AdminLTE.js'
|
'dist/js/adminlte.js' : 'build/js/src/AdminLTE.js'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,7 +14,8 @@ module.exports = function (grunt) {
|
||||||
'build/js/src/PushMenu.js',
|
'build/js/src/PushMenu.js',
|
||||||
'build/js/src/Widget.js',
|
'build/js/src/Widget.js',
|
||||||
'build/js/src/ControlSidebar.js',
|
'build/js/src/ControlSidebar.js',
|
||||||
'build/js/src/Search.js'
|
'build/js/src/Search.js',
|
||||||
|
'build/js/src/SiteSearch.js'
|
||||||
],
|
],
|
||||||
dest: 'build/js/src/AdminLTE.js'
|
dest: 'build/js/src/AdminLTE.js'
|
||||||
}
|
}
|
||||||
|
|
2
build/js/dist/Layout.js.map
vendored
2
build/js/dist/Layout.js.map
vendored
File diff suppressed because one or more lines are too long
146
build/js/dist/SiteSearch.js
vendored
Normal file
146
build/js/dist/SiteSearch.js
vendored
Normal file
|
@ -0,0 +1,146 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||||
|
|
||||||
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* --------------------------------------------
|
||||||
|
* AdminLTE SiteSearch.js
|
||||||
|
* License MIT
|
||||||
|
* --------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
var SiteSearch = function ($) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constants
|
||||||
|
* ====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
var NAME = 'SiteSearch';
|
||||||
|
var DATA_KEY = 'lte.site-search';
|
||||||
|
var EVENT_KEY = '.' + DATA_KEY;
|
||||||
|
var JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||||
|
|
||||||
|
var Event = {};
|
||||||
|
|
||||||
|
var Selector = {
|
||||||
|
TOGGLE_BUTTON: '[data-widget="site-search"]',
|
||||||
|
SEARCH_BLOCK: '.site-search-block',
|
||||||
|
SEARCH_BACKDROP: '.site-search-backdrop',
|
||||||
|
SEARCH_INPUT: '.site-search-block .form-control'
|
||||||
|
};
|
||||||
|
|
||||||
|
var ClassName = {
|
||||||
|
OPEN: 'site-search-open'
|
||||||
|
};
|
||||||
|
|
||||||
|
var Default = {
|
||||||
|
transitionSpeed: 300
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Class Definition
|
||||||
|
* ====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
var SiteSearch = function () {
|
||||||
|
function SiteSearch(_element, _options) {
|
||||||
|
_classCallCheck(this, SiteSearch);
|
||||||
|
|
||||||
|
this.element = _element;
|
||||||
|
this.options = $.extend({}, Default, _options);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public
|
||||||
|
|
||||||
|
_createClass(SiteSearch, [{
|
||||||
|
key: 'open',
|
||||||
|
value: function open() {
|
||||||
|
$(Selector.SEARCH_BLOCK).slideDown(this.options.transitionSpeed);
|
||||||
|
$(Selector.SEARCH_BACKDROP).show(0);
|
||||||
|
$(Selector.SEARCH_INPUT).focus();
|
||||||
|
$(Selector.SEARCH_BLOCK).addClass(ClassName.OPEN);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'close',
|
||||||
|
value: function close() {
|
||||||
|
$(Selector.SEARCH_BLOCK).slideUp(this.options.transitionSpeed);
|
||||||
|
$(Selector.SEARCH_BACKDROP).hide(0);
|
||||||
|
$(Selector.SEARCH_BLOCK).removeClass(ClassName.OPEN);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'toggle',
|
||||||
|
value: function toggle() {
|
||||||
|
if ($(Selector.SEARCH_BLOCK).hasClass(ClassName.OPEN)) {
|
||||||
|
this.close();
|
||||||
|
} else {
|
||||||
|
this.open();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Static
|
||||||
|
|
||||||
|
}], [{
|
||||||
|
key: '_jQueryInterface',
|
||||||
|
value: function _jQueryInterface(options) {
|
||||||
|
return this.each(function () {
|
||||||
|
var data = $(this).data(DATA_KEY);
|
||||||
|
|
||||||
|
if (!data) {
|
||||||
|
data = new SiteSearch(this, options);
|
||||||
|
$(this).data(DATA_KEY, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!/toggle|close/.test(options)) {
|
||||||
|
throw Error('Undefined method ' + options);
|
||||||
|
}
|
||||||
|
|
||||||
|
data[options]();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}]);
|
||||||
|
|
||||||
|
return SiteSearch;
|
||||||
|
}();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Data API
|
||||||
|
* ====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
$(document).on('click', Selector.TOGGLE_BUTTON, function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
var button = $(event.currentTarget);
|
||||||
|
|
||||||
|
if (button.data('widget') !== 'site-search') {
|
||||||
|
button = button.closest(Selector.TOGGLE_BUTTON);
|
||||||
|
}
|
||||||
|
|
||||||
|
SiteSearch._jQueryInterface.call(button, 'toggle');
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).on('click', Selector.SEARCH_BACKDROP, function (event) {
|
||||||
|
var backdrop = $(event.currentTarget);
|
||||||
|
SiteSearch._jQueryInterface.call(backdrop, 'close');
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* jQuery API
|
||||||
|
* ====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
$.fn[NAME] = SiteSearch._jQueryInterface;
|
||||||
|
$.fn[NAME].Constructor = SiteSearch;
|
||||||
|
$.fn[NAME].noConflict = function () {
|
||||||
|
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
||||||
|
return SiteSearch._jQueryInterface;
|
||||||
|
};
|
||||||
|
|
||||||
|
return SiteSearch;
|
||||||
|
}(jQuery);
|
||||||
|
//# sourceMappingURL=SiteSearch.js.map
|
1
build/js/dist/SiteSearch.js.map
vendored
Normal file
1
build/js/dist/SiteSearch.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
|
@ -1,6 +1,6 @@
|
||||||
/*!
|
/*!
|
||||||
* AdminLTE v3.0.0-alpha (https://almsaeedstudio.com)
|
* AdminLTE v3.0.0-alpha (https://almsaeedstudio.com)
|
||||||
* Copyright 2014-2016 Abdullah Almsaeed <abdullah@almsaeedstudio.com>
|
* Copyright 2014-2017 Abdullah Almsaeed <abdullah@almsaeedstudio.com>
|
||||||
* Project website Almsaeed Studio (https://almsaeedstudio.com)
|
* Project website Almsaeed Studio (https://almsaeedstudio.com)
|
||||||
* Licensed under MIT (https://github.com/almasaeed2010/AdminLTE/blob/master/LICENSE)
|
* Licensed under MIT (https://github.com/almasaeed2010/AdminLTE/blob/master/LICENSE)
|
||||||
*/
|
*/
|
||||||
|
@ -22,19 +22,19 @@ const Layout = (($) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const Selector = {
|
const Selector = {
|
||||||
SIDEBAR: '.main-sidebar',
|
SIDEBAR : '.main-sidebar',
|
||||||
HEADER: '.main-header',
|
HEADER : '.main-header',
|
||||||
CONTENT: '.content-wrapper',
|
CONTENT : '.content-wrapper',
|
||||||
CONTENT_HEADER: '.content-header',
|
CONTENT_HEADER : '.content-header',
|
||||||
WRAPPER: '.wrapper',
|
WRAPPER : '.wrapper',
|
||||||
CONTROL_SIDEBAR: '.control-sidebar',
|
CONTROL_SIDEBAR: '.control-sidebar',
|
||||||
LAYOUT_FIXED: '.layout-fixed',
|
LAYOUT_FIXED : '.layout-fixed',
|
||||||
FOOTER: '.main-footer'
|
FOOTER : '.main-footer'
|
||||||
}
|
}
|
||||||
|
|
||||||
const ClassName = {
|
const ClassName = {
|
||||||
HOLD: 'hold-transition',
|
HOLD : 'hold-transition',
|
||||||
SIDEBAR: 'main-sidebar',
|
SIDEBAR : 'main-sidebar',
|
||||||
LAYOUT_FIXED: 'layout-fixed'
|
LAYOUT_FIXED: 'layout-fixed'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -763,3 +763,125 @@ const Search = (($) => {
|
||||||
return Search
|
return Search
|
||||||
|
|
||||||
})(jQuery)
|
})(jQuery)
|
||||||
|
|
||||||
|
const SiteSearch = (($) => {
|
||||||
|
'use strict'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constants
|
||||||
|
* ====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
const NAME = 'SiteSearch'
|
||||||
|
const DATA_KEY = 'lte.site-search'
|
||||||
|
const EVENT_KEY = `.${DATA_KEY}`
|
||||||
|
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||||
|
|
||||||
|
const Event = {}
|
||||||
|
|
||||||
|
const Selector = {
|
||||||
|
TOGGLE_BUTTON : '[data-widget="site-search"]',
|
||||||
|
SEARCH_BLOCK : '.site-search-block',
|
||||||
|
SEARCH_BACKDROP: '.site-search-backdrop',
|
||||||
|
SEARCH_INPUT : `.site-search-block .form-control`
|
||||||
|
}
|
||||||
|
|
||||||
|
const ClassName = {
|
||||||
|
OPEN: 'site-search-open'
|
||||||
|
}
|
||||||
|
|
||||||
|
const Default = {
|
||||||
|
transitionSpeed: 300
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Class Definition
|
||||||
|
* ====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
class SiteSearch {
|
||||||
|
|
||||||
|
constructor(_element, _options) {
|
||||||
|
this.element = _element
|
||||||
|
this.options = $.extend({}, Default, _options);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public
|
||||||
|
|
||||||
|
open() {
|
||||||
|
$(Selector.SEARCH_BLOCK).slideDown(this.options.transitionSpeed)
|
||||||
|
$(Selector.SEARCH_BACKDROP).show(0)
|
||||||
|
$(Selector.SEARCH_INPUT).focus();
|
||||||
|
$(Selector.SEARCH_BLOCK).addClass(ClassName.OPEN)
|
||||||
|
}
|
||||||
|
|
||||||
|
close() {
|
||||||
|
$(Selector.SEARCH_BLOCK).slideUp(this.options.transitionSpeed)
|
||||||
|
$(Selector.SEARCH_BACKDROP).hide(0)
|
||||||
|
$(Selector.SEARCH_BLOCK).removeClass(ClassName.OPEN)
|
||||||
|
}
|
||||||
|
|
||||||
|
toggle() {
|
||||||
|
if ($(Selector.SEARCH_BLOCK).hasClass(ClassName.OPEN)) {
|
||||||
|
this.close()
|
||||||
|
} else {
|
||||||
|
this.open()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Static
|
||||||
|
|
||||||
|
static _jQueryInterface(options) {
|
||||||
|
return this.each(function () {
|
||||||
|
let data = $(this).data(DATA_KEY)
|
||||||
|
|
||||||
|
if (!data) {
|
||||||
|
data = new SiteSearch(this, options)
|
||||||
|
$(this).data(DATA_KEY, data)
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!/toggle|close/.test(options)) {
|
||||||
|
throw Error(`Undefined method ${options}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
data[options]()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Data API
|
||||||
|
* ====================================================
|
||||||
|
*/
|
||||||
|
$(document).on('click', Selector.TOGGLE_BUTTON, (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
let button = $(event.currentTarget)
|
||||||
|
|
||||||
|
if (button.data('widget') !== 'site-search') {
|
||||||
|
button = button.closest(Selector.TOGGLE_BUTTON)
|
||||||
|
}
|
||||||
|
|
||||||
|
SiteSearch._jQueryInterface.call(button, 'toggle')
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).on('click', Selector.SEARCH_BACKDROP, (event) => {
|
||||||
|
let backdrop = $(event.currentTarget)
|
||||||
|
SiteSearch._jQueryInterface.call(backdrop, 'close')
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* jQuery API
|
||||||
|
* ====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
$.fn[NAME] = SiteSearch._jQueryInterface
|
||||||
|
$.fn[NAME].Constructor = SiteSearch
|
||||||
|
$.fn[NAME].noConflict = function () {
|
||||||
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||||
|
return SiteSearch._jQueryInterface
|
||||||
|
}
|
||||||
|
|
||||||
|
return SiteSearch
|
||||||
|
|
||||||
|
})(jQuery)
|
||||||
|
|
|
@ -23,19 +23,19 @@ const Layout = (($) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const Selector = {
|
const Selector = {
|
||||||
SIDEBAR: '.main-sidebar',
|
SIDEBAR : '.main-sidebar',
|
||||||
HEADER: '.main-header',
|
HEADER : '.main-header',
|
||||||
CONTENT: '.content-wrapper',
|
CONTENT : '.content-wrapper',
|
||||||
CONTENT_HEADER: '.content-header',
|
CONTENT_HEADER : '.content-header',
|
||||||
WRAPPER: '.wrapper',
|
WRAPPER : '.wrapper',
|
||||||
CONTROL_SIDEBAR: '.control-sidebar',
|
CONTROL_SIDEBAR: '.control-sidebar',
|
||||||
LAYOUT_FIXED: '.layout-fixed',
|
LAYOUT_FIXED : '.layout-fixed',
|
||||||
FOOTER: '.main-footer'
|
FOOTER : '.main-footer'
|
||||||
}
|
}
|
||||||
|
|
||||||
const ClassName = {
|
const ClassName = {
|
||||||
HOLD: 'hold-transition',
|
HOLD : 'hold-transition',
|
||||||
SIDEBAR: 'main-sidebar',
|
SIDEBAR : 'main-sidebar',
|
||||||
LAYOUT_FIXED: 'layout-fixed'
|
LAYOUT_FIXED: 'layout-fixed'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
128
build/js/src/SiteSearch.js
Normal file
128
build/js/src/SiteSearch.js
Normal file
|
@ -0,0 +1,128 @@
|
||||||
|
/**
|
||||||
|
* --------------------------------------------
|
||||||
|
* AdminLTE SiteSearch.js
|
||||||
|
* License MIT
|
||||||
|
* --------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
const SiteSearch = (($) => {
|
||||||
|
'use strict'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constants
|
||||||
|
* ====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
const NAME = 'SiteSearch'
|
||||||
|
const DATA_KEY = 'lte.site-search'
|
||||||
|
const EVENT_KEY = `.${DATA_KEY}`
|
||||||
|
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||||
|
|
||||||
|
const Event = {}
|
||||||
|
|
||||||
|
const Selector = {
|
||||||
|
TOGGLE_BUTTON : '[data-widget="site-search"]',
|
||||||
|
SEARCH_BLOCK : '.site-search-block',
|
||||||
|
SEARCH_BACKDROP: '.site-search-backdrop',
|
||||||
|
SEARCH_INPUT : `.site-search-block .form-control`
|
||||||
|
}
|
||||||
|
|
||||||
|
const ClassName = {
|
||||||
|
OPEN: 'site-search-open'
|
||||||
|
}
|
||||||
|
|
||||||
|
const Default = {
|
||||||
|
transitionSpeed: 300
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Class Definition
|
||||||
|
* ====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
class SiteSearch {
|
||||||
|
|
||||||
|
constructor(_element, _options) {
|
||||||
|
this.element = _element
|
||||||
|
this.options = $.extend({}, Default, _options);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public
|
||||||
|
|
||||||
|
open() {
|
||||||
|
$(Selector.SEARCH_BLOCK).slideDown(this.options.transitionSpeed)
|
||||||
|
$(Selector.SEARCH_BACKDROP).show(0)
|
||||||
|
$(Selector.SEARCH_INPUT).focus();
|
||||||
|
$(Selector.SEARCH_BLOCK).addClass(ClassName.OPEN)
|
||||||
|
}
|
||||||
|
|
||||||
|
close() {
|
||||||
|
$(Selector.SEARCH_BLOCK).slideUp(this.options.transitionSpeed)
|
||||||
|
$(Selector.SEARCH_BACKDROP).hide(0)
|
||||||
|
$(Selector.SEARCH_BLOCK).removeClass(ClassName.OPEN)
|
||||||
|
}
|
||||||
|
|
||||||
|
toggle() {
|
||||||
|
if ($(Selector.SEARCH_BLOCK).hasClass(ClassName.OPEN)) {
|
||||||
|
this.close()
|
||||||
|
} else {
|
||||||
|
this.open()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Static
|
||||||
|
|
||||||
|
static _jQueryInterface(options) {
|
||||||
|
return this.each(function () {
|
||||||
|
let data = $(this).data(DATA_KEY)
|
||||||
|
|
||||||
|
if (!data) {
|
||||||
|
data = new SiteSearch(this, options)
|
||||||
|
$(this).data(DATA_KEY, data)
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!/toggle|close/.test(options)) {
|
||||||
|
throw Error(`Undefined method ${options}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
data[options]()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Data API
|
||||||
|
* ====================================================
|
||||||
|
*/
|
||||||
|
$(document).on('click', Selector.TOGGLE_BUTTON, (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
let button = $(event.currentTarget)
|
||||||
|
|
||||||
|
if (button.data('widget') !== 'site-search') {
|
||||||
|
button = button.closest(Selector.TOGGLE_BUTTON)
|
||||||
|
}
|
||||||
|
|
||||||
|
SiteSearch._jQueryInterface.call(button, 'toggle')
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).on('click', Selector.SEARCH_BACKDROP, (event) => {
|
||||||
|
let backdrop = $(event.currentTarget)
|
||||||
|
SiteSearch._jQueryInterface.call(backdrop, 'close')
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* jQuery API
|
||||||
|
* ====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
$.fn[NAME] = SiteSearch._jQueryInterface
|
||||||
|
$.fn[NAME].Constructor = SiteSearch
|
||||||
|
$.fn[NAME].noConflict = function () {
|
||||||
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||||
|
return SiteSearch._jQueryInterface
|
||||||
|
}
|
||||||
|
|
||||||
|
return SiteSearch
|
||||||
|
|
||||||
|
})(jQuery)
|
|
@ -40,6 +40,7 @@
|
||||||
@import "labels";
|
@import "labels";
|
||||||
@import "direct-chat";
|
@import "direct-chat";
|
||||||
@import "users-list";
|
@import "users-list";
|
||||||
|
@import "_site-search";
|
||||||
@import "carousel";
|
@import "carousel";
|
||||||
@import "modal";
|
@import "modal";
|
||||||
@import "social-widgets";
|
@import "social-widgets";
|
||||||
|
|
|
@ -268,10 +268,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-pane {
|
.box-pane {
|
||||||
@include border-radius-sides(0, 0, $box-border-radius, 0);
|
//@include border-radius-sides(0, 0, $box-border-radius, 0);
|
||||||
}
|
}
|
||||||
.box-pane-right {
|
.box-pane-right {
|
||||||
@include border-radius-sides(0, 0, 0, $box-border-radius);
|
border-bottom-right-radius: $box-border-radius;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -52,7 +52,7 @@
|
||||||
|
|
||||||
.open > .nav-link,
|
.open > .nav-link,
|
||||||
.nav-link:hover {
|
.nav-link:hover {
|
||||||
background: rgba(#000, .1);
|
background: rgba(0, 0, 0, .1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.has-img {
|
.has-img {
|
||||||
|
|
62
build/scss/_site-search.scss
Normal file
62
build/scss/_site-search.scss
Normal file
|
@ -0,0 +1,62 @@
|
||||||
|
.site-search-block {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1100;
|
||||||
|
box-shadow: 0 5px 5px rgba(0, 0, 0, .2);
|
||||||
|
background: $input-bg;
|
||||||
|
|
||||||
|
.site-search-backdrop {
|
||||||
|
content: ' ';
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control {
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
padding-left: 60px;
|
||||||
|
padding-right: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&,
|
||||||
|
.form-control,
|
||||||
|
.site-search-close {
|
||||||
|
height: $main-header-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-search-close,
|
||||||
|
.site-search-submit {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
display: block;
|
||||||
|
color: #444;
|
||||||
|
width: 50px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: $main-header-height;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
color: #999;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-search-close {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-search-submit {
|
||||||
|
right: 0;
|
||||||
|
background: #fff;
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
71
dist/css/adminlte.css
vendored
71
dist/css/adminlte.css
vendored
|
@ -7888,12 +7888,8 @@ body,
|
||||||
margin: -9px;
|
margin: -9px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-body .box-pane {
|
|
||||||
border-radius: 0 0 3px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box-body .box-pane-right {
|
.box-body .box-pane-right {
|
||||||
border-radius: 0 0 0 3px;
|
border-bottom-right-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-footer {
|
.box-footer {
|
||||||
|
@ -9190,6 +9186,71 @@ table.text-xs-center, table.text-xs-center td, table.text-xs-center th {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.site-search-block {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1100;
|
||||||
|
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-search-block .site-search-backdrop {
|
||||||
|
content: ' ';
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-search-block .form-control {
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
padding-left: 60px;
|
||||||
|
padding-right: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-search-block,
|
||||||
|
.site-search-block .form-control,
|
||||||
|
.site-search-block .site-search-close {
|
||||||
|
height: 54px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-search-block .site-search-close,
|
||||||
|
.site-search-block .site-search-submit {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
display: block;
|
||||||
|
color: #444;
|
||||||
|
width: 50px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 54px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-search-block .site-search-close:hover,
|
||||||
|
.site-search-block .site-search-submit:hover {
|
||||||
|
color: #999;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-search-block .site-search-close {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-search-block .site-search-submit {
|
||||||
|
right: 0;
|
||||||
|
background: #fff;
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Component: Carousel
|
* Component: Carousel
|
||||||
* -------------------
|
* -------------------
|
||||||
|
|
3
dist/css/adminlte.css.map
vendored
3
dist/css/adminlte.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/adminlte.min.css
vendored
2
dist/css/adminlte.min.css
vendored
File diff suppressed because one or more lines are too long
3
dist/css/adminlte.min.css.map
vendored
3
dist/css/adminlte.min.css.map
vendored
File diff suppressed because one or more lines are too long
135
dist/js/adminlte.js
vendored
135
dist/js/adminlte.js
vendored
|
@ -6,7 +6,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
||||||
|
|
||||||
/*!
|
/*!
|
||||||
* AdminLTE v3.0.0-alpha (https://almsaeedstudio.com)
|
* AdminLTE v3.0.0-alpha (https://almsaeedstudio.com)
|
||||||
* Copyright 2014-2016 Abdullah Almsaeed <abdullah@almsaeedstudio.com>
|
* Copyright 2014-2017 Abdullah Almsaeed <abdullah@almsaeedstudio.com>
|
||||||
* Project website Almsaeed Studio (https://almsaeedstudio.com)
|
* Project website Almsaeed Studio (https://almsaeedstudio.com)
|
||||||
* Licensed under MIT (https://github.com/almasaeed2010/AdminLTE/blob/master/LICENSE)
|
* Licensed under MIT (https://github.com/almasaeed2010/AdminLTE/blob/master/LICENSE)
|
||||||
*/
|
*/
|
||||||
|
@ -858,4 +858,137 @@ var Search = function ($) {
|
||||||
|
|
||||||
return Search;
|
return Search;
|
||||||
}(jQuery);
|
}(jQuery);
|
||||||
|
|
||||||
|
var SiteSearch = function ($) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constants
|
||||||
|
* ====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
var NAME = 'SiteSearch';
|
||||||
|
var DATA_KEY = 'lte.site-search';
|
||||||
|
var EVENT_KEY = '.' + DATA_KEY;
|
||||||
|
var JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||||
|
|
||||||
|
var Event = {};
|
||||||
|
|
||||||
|
var Selector = {
|
||||||
|
TOGGLE_BUTTON: '[data-widget="site-search"]',
|
||||||
|
SEARCH_BLOCK: '.site-search-block',
|
||||||
|
SEARCH_BACKDROP: '.site-search-backdrop',
|
||||||
|
SEARCH_INPUT: '.site-search-block .form-control'
|
||||||
|
};
|
||||||
|
|
||||||
|
var ClassName = {
|
||||||
|
OPEN: 'site-search-open'
|
||||||
|
};
|
||||||
|
|
||||||
|
var Default = {
|
||||||
|
transitionSpeed: 300
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Class Definition
|
||||||
|
* ====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
var SiteSearch = function () {
|
||||||
|
function SiteSearch(_element, _options) {
|
||||||
|
_classCallCheck(this, SiteSearch);
|
||||||
|
|
||||||
|
this.element = _element;
|
||||||
|
this.options = $.extend({}, Default, _options);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public
|
||||||
|
|
||||||
|
_createClass(SiteSearch, [{
|
||||||
|
key: 'open',
|
||||||
|
value: function open() {
|
||||||
|
$(Selector.SEARCH_BLOCK).slideDown(this.options.transitionSpeed);
|
||||||
|
$(Selector.SEARCH_BACKDROP).show(0);
|
||||||
|
$(Selector.SEARCH_INPUT).focus();
|
||||||
|
$(Selector.SEARCH_BLOCK).addClass(ClassName.OPEN);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'close',
|
||||||
|
value: function close() {
|
||||||
|
$(Selector.SEARCH_BLOCK).slideUp(this.options.transitionSpeed);
|
||||||
|
$(Selector.SEARCH_BACKDROP).hide(0);
|
||||||
|
$(Selector.SEARCH_BLOCK).removeClass(ClassName.OPEN);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
key: 'toggle',
|
||||||
|
value: function toggle() {
|
||||||
|
if ($(Selector.SEARCH_BLOCK).hasClass(ClassName.OPEN)) {
|
||||||
|
this.close();
|
||||||
|
} else {
|
||||||
|
this.open();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Static
|
||||||
|
|
||||||
|
}], [{
|
||||||
|
key: '_jQueryInterface',
|
||||||
|
value: function _jQueryInterface(options) {
|
||||||
|
return this.each(function () {
|
||||||
|
var data = $(this).data(DATA_KEY);
|
||||||
|
|
||||||
|
if (!data) {
|
||||||
|
data = new SiteSearch(this, options);
|
||||||
|
$(this).data(DATA_KEY, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!/toggle|close/.test(options)) {
|
||||||
|
throw Error('Undefined method ' + options);
|
||||||
|
}
|
||||||
|
|
||||||
|
data[options]();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}]);
|
||||||
|
|
||||||
|
return SiteSearch;
|
||||||
|
}();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Data API
|
||||||
|
* ====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
$(document).on('click', Selector.TOGGLE_BUTTON, function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
var button = $(event.currentTarget);
|
||||||
|
|
||||||
|
if (button.data('widget') !== 'site-search') {
|
||||||
|
button = button.closest(Selector.TOGGLE_BUTTON);
|
||||||
|
}
|
||||||
|
|
||||||
|
SiteSearch._jQueryInterface.call(button, 'toggle');
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).on('click', Selector.SEARCH_BACKDROP, function (event) {
|
||||||
|
var backdrop = $(event.currentTarget);
|
||||||
|
SiteSearch._jQueryInterface.call(backdrop, 'close');
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* jQuery API
|
||||||
|
* ====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
$.fn[NAME] = SiteSearch._jQueryInterface;
|
||||||
|
$.fn[NAME].Constructor = SiteSearch;
|
||||||
|
$.fn[NAME].noConflict = function () {
|
||||||
|
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
||||||
|
return SiteSearch._jQueryInterface;
|
||||||
|
};
|
||||||
|
|
||||||
|
return SiteSearch;
|
||||||
|
}(jQuery);
|
||||||
//# sourceMappingURL=adminlte.js.map
|
//# sourceMappingURL=adminlte.js.map
|
||||||
|
|
2
dist/js/adminlte.js.map
vendored
2
dist/js/adminlte.js.map
vendored
File diff suppressed because one or more lines are too long
2
dist/js/adminlte.min.js
vendored
2
dist/js/adminlte.min.js
vendored
File diff suppressed because one or more lines are too long
23
starter.html
23
starter.html
|
@ -38,8 +38,18 @@ to get the desired effect
|
||||||
| | sidebar-mini |
|
| | sidebar-mini |
|
||||||
|---------------------------------------------------------|
|
|---------------------------------------------------------|
|
||||||
-->
|
-->
|
||||||
<body class="hold-transition skin-blue">
|
<body class="hold-transition skin-blue sidebar-mini">
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
|
<!-- Site Wide Search -->
|
||||||
|
<div class="site-search-block">
|
||||||
|
<a href="#" class="site-search-close" data-widget="site-search"><i class="fa fa-arrow-left"></i></a>
|
||||||
|
<form action="#" method="get">
|
||||||
|
<input name="query" type="search" class="form-control" placeholder="Site Search">
|
||||||
|
<button type="submit" class="site-search-submit"><i class="fa fa-search"></i></button>
|
||||||
|
</form>
|
||||||
|
<div class="site-search-backdrop"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Navbar -->
|
<!-- Navbar -->
|
||||||
<nav class="main-header navbar navbar-sticky-top bg-primary navbar-dark">
|
<nav class="main-header navbar navbar-sticky-top bg-primary navbar-dark">
|
||||||
<!-- Logo -->
|
<!-- Logo -->
|
||||||
|
@ -144,14 +154,9 @@ to get the desired effect
|
||||||
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
|
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item dropdown">
|
<!-- SEARCH FORM -->
|
||||||
<a class="nav-link" data-toggle="dropdown" href="#"><i class="fa fa-search"></i></a>
|
<li class="nav-item">
|
||||||
<div class="dropdown-menu">
|
<a href="#" class="nav-link" data-widget="site-search"><i class="fa fa-search"></i></a>
|
||||||
<a href="#" class="dropdown-item"><i class="fa fa-user margin-r-5"></i> Profile</a>
|
|
||||||
<a href="#" class="dropdown-item"><i class="fa fa-user margin-r-5"></i> History</a>
|
|
||||||
<a href="#" class="dropdown-item"><i class="fa fa-user margin-r-5"></i> Usage</a>
|
|
||||||
<a href="#" class="dropdown-item"><i class="fa fa-user margin-r-5"></i> Logout</a>
|
|
||||||
</div>
|
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#"><i class="fa fa-th-large"></i></a>
|
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#"><i class="fa fa-th-large"></i></a>
|
||||||
|
|
Loading…
Reference in a new issue