sai menu is now autocollapsing (little hide issue)
This commit is contained in:
Messerbill
parent
1c22b3a907
commit
31b1adfe35
@ -4,22 +4,23 @@
|
||||
<h4 class="text-info">${sai_start_welcome_description}</h4>
|
||||
</div>
|
||||
<div class="clearfix row-same-height row-full-height">
|
||||
<div class="col-xs-3 col-xs-height col-full-height well">
|
||||
<div class="col-sm-6 col-xs-3 col-xs-height col-full-height well">
|
||||
<h2 class="muted"><a href="#!config">${basic_project}</a></h2>
|
||||
<b>${basic_name}:</b> ${project_name}<br/>
|
||||
<b>${basic_URL}:</b> <a href="${project_url}" target="_blank">${project_url}</a><br/>
|
||||
<b>${basic_progress}:</b> ${project}%
|
||||
</div>
|
||||
<div class="col-xs-3 col-xs-height col-full-height well">
|
||||
<div class="col-sm-6 col-xs-3 col-xs-height col-full-height well">
|
||||
<h2 class="muted"><a href="#!log(stats)">${basic_analytics}</a></h2>
|
||||
${analytics}
|
||||
</div>
|
||||
<div class="col-xs-3 col-xs-height col-full-height well">
|
||||
<div class="clearfix visible-sm-block"></div>
|
||||
<div class="col-sm-6 col-xs-3 col-xs-height col-full-height well">
|
||||
<h2 class="muted">Git</h2>
|
||||
<b>Current Project Version:</b> ${git_project}<br/>
|
||||
<b>Current SYSTEM Version:</b> ${git_system}
|
||||
</div>
|
||||
<div class="col-xs-3 col-xs-height col-full-height well">
|
||||
<div class="col-sm-6 col-xs-3 col-xs-height col-full-height well">
|
||||
<h2 class="muted"><a href="#!login">${basic_logout}</a></h2>
|
||||
<table class="table table-hover table-condensed">
|
||||
<tr>
|
||||
|
||||
@ -40,6 +40,7 @@ class default_page extends \SYSTEM\PAGE\Page {
|
||||
private static function js(){
|
||||
$result = '<script src="'.\SYSTEM\WEBPATH(new \SYSTEM\PSAI(),'page/js/libs/jquery.min.js').'" type="text/javascript"></script>'.
|
||||
'<script src="'.\SYSTEM\WEBPATH(new \SYSTEM\PSAI(),'page/js/libs/bootstrap.min.js').'" type="text/javascript"></script>'.
|
||||
'<script src="'.\SYSTEM\WEBPATH(new \SYSTEM\PSAI(),'page/js/libs/collapse.js').'" type="text/javascript"></script>'.
|
||||
'<script type="text/javascript" language="JavaScript" src="./sai.php?call=files&cat=sys&id=system.js"></script>'.
|
||||
'<script src="'.\SYSTEM\WEBPATH(new \SYSTEM\PSAI(),'page/js/sai.js').'" type="text/javascript"></script>'.
|
||||
'<script src="https://www.google.com/jsapi" type="text/javascript"></script>'.
|
||||
|
||||
211
sai/page/js/libs/collapse.js
Normal file
211
sai/page/js/libs/collapse.js
Normal file
@ -0,0 +1,211 @@
|
||||
/* ========================================================================
|
||||
* Bootstrap: collapse.js v3.3.4
|
||||
* http://getbootstrap.com/javascript/#collapse
|
||||
* ========================================================================
|
||||
* Copyright 2011-2015 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* ======================================================================== */
|
||||
|
||||
|
||||
+function ($) {
|
||||
'use strict';
|
||||
|
||||
// COLLAPSE PUBLIC CLASS DEFINITION
|
||||
// ================================
|
||||
|
||||
var Collapse = function (element, options) {
|
||||
this.$element = $(element)
|
||||
this.options = $.extend({}, Collapse.DEFAULTS, options)
|
||||
this.$trigger = $('[data-toggle="collapse"][href="#' + element.id + '"],' +
|
||||
'[data-toggle="collapse"][data-target="#' + element.id + '"]')
|
||||
this.transitioning = null
|
||||
|
||||
if (this.options.parent) {
|
||||
this.$parent = this.getParent()
|
||||
} else {
|
||||
this.addAriaAndCollapsedClass(this.$element, this.$trigger)
|
||||
}
|
||||
|
||||
if (this.options.toggle) this.toggle()
|
||||
}
|
||||
|
||||
Collapse.VERSION = '3.3.4'
|
||||
|
||||
Collapse.TRANSITION_DURATION = 350
|
||||
|
||||
Collapse.DEFAULTS = {
|
||||
toggle: true
|
||||
}
|
||||
|
||||
Collapse.prototype.dimension = function () {
|
||||
var hasWidth = this.$element.hasClass('width')
|
||||
return hasWidth ? 'width' : 'height'
|
||||
}
|
||||
|
||||
Collapse.prototype.show = function () {
|
||||
if (this.transitioning || this.$element.hasClass('in')) return
|
||||
|
||||
var activesData
|
||||
var actives = this.$parent && this.$parent.children('.panel').children('.in, .collapsing')
|
||||
|
||||
if (actives && actives.length) {
|
||||
activesData = actives.data('bs.collapse')
|
||||
if (activesData && activesData.transitioning) return
|
||||
}
|
||||
|
||||
var startEvent = $.Event('show.bs.collapse')
|
||||
this.$element.trigger(startEvent)
|
||||
if (startEvent.isDefaultPrevented()) return
|
||||
|
||||
if (actives && actives.length) {
|
||||
Plugin.call(actives, 'hide')
|
||||
activesData || actives.data('bs.collapse', null)
|
||||
}
|
||||
|
||||
var dimension = this.dimension()
|
||||
|
||||
this.$element
|
||||
.removeClass('collapse')
|
||||
.addClass('collapsing')[dimension](0)
|
||||
.attr('aria-expanded', true)
|
||||
|
||||
this.$trigger
|
||||
.removeClass('collapsed')
|
||||
.attr('aria-expanded', true)
|
||||
|
||||
this.transitioning = 1
|
||||
|
||||
var complete = function () {
|
||||
this.$element
|
||||
.removeClass('collapsing')
|
||||
.addClass('collapse in')[dimension]('')
|
||||
this.transitioning = 0
|
||||
this.$element
|
||||
.trigger('shown.bs.collapse')
|
||||
}
|
||||
|
||||
if (!$.support.transition) return complete.call(this)
|
||||
|
||||
var scrollSize = $.camelCase(['scroll', dimension].join('-'))
|
||||
|
||||
this.$element
|
||||
.one('bsTransitionEnd', $.proxy(complete, this))
|
||||
.emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])
|
||||
}
|
||||
|
||||
Collapse.prototype.hide = function () {
|
||||
if (this.transitioning || !this.$element.hasClass('in')) return
|
||||
|
||||
var startEvent = $.Event('hide.bs.collapse')
|
||||
this.$element.trigger(startEvent)
|
||||
if (startEvent.isDefaultPrevented()) return
|
||||
|
||||
var dimension = this.dimension()
|
||||
|
||||
this.$element[dimension](this.$element[dimension]())[0].offsetHeight
|
||||
|
||||
this.$element
|
||||
.addClass('collapsing')
|
||||
.removeClass('collapse in')
|
||||
.attr('aria-expanded', false)
|
||||
|
||||
this.$trigger
|
||||
.addClass('collapsed')
|
||||
.attr('aria-expanded', false)
|
||||
|
||||
this.transitioning = 1
|
||||
|
||||
var complete = function () {
|
||||
this.transitioning = 0
|
||||
this.$element
|
||||
.removeClass('collapsing')
|
||||
.addClass('collapse')
|
||||
.trigger('hidden.bs.collapse')
|
||||
}
|
||||
|
||||
if (!$.support.transition) return complete.call(this)
|
||||
|
||||
this.$element
|
||||
[dimension](0)
|
||||
.one('bsTransitionEnd', $.proxy(complete, this))
|
||||
.emulateTransitionEnd(Collapse.TRANSITION_DURATION)
|
||||
}
|
||||
|
||||
Collapse.prototype.toggle = function () {
|
||||
this[this.$element.hasClass('in') ? 'hide' : 'show']()
|
||||
}
|
||||
|
||||
Collapse.prototype.getParent = function () {
|
||||
return $(this.options.parent)
|
||||
.find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
|
||||
.each($.proxy(function (i, element) {
|
||||
var $element = $(element)
|
||||
this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)
|
||||
}, this))
|
||||
.end()
|
||||
}
|
||||
|
||||
Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) {
|
||||
var isOpen = $element.hasClass('in')
|
||||
|
||||
$element.attr('aria-expanded', isOpen)
|
||||
$trigger
|
||||
.toggleClass('collapsed', !isOpen)
|
||||
.attr('aria-expanded', isOpen)
|
||||
}
|
||||
|
||||
function getTargetFromTrigger($trigger) {
|
||||
var href
|
||||
var target = $trigger.attr('data-target')
|
||||
|| (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
|
||||
|
||||
return $(target)
|
||||
}
|
||||
|
||||
|
||||
// COLLAPSE PLUGIN DEFINITION
|
||||
// ==========================
|
||||
|
||||
function Plugin(option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
var data = $this.data('bs.collapse')
|
||||
var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)
|
||||
|
||||
if (!data && options.toggle && /show|hide/.test(option)) options.toggle = false
|
||||
if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
|
||||
if (typeof option == 'string') data[option]()
|
||||
})
|
||||
}
|
||||
|
||||
var old = $.fn.collapse
|
||||
|
||||
$.fn.collapse = Plugin
|
||||
$.fn.collapse.Constructor = Collapse
|
||||
|
||||
|
||||
// COLLAPSE NO CONFLICT
|
||||
// ====================
|
||||
|
||||
$.fn.collapse.noConflict = function () {
|
||||
$.fn.collapse = old
|
||||
return this
|
||||
}
|
||||
|
||||
|
||||
// COLLAPSE DATA-API
|
||||
// =================
|
||||
|
||||
$(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
|
||||
var $this = $(this)
|
||||
|
||||
if (!$this.attr('data-target')) e.preventDefault()
|
||||
|
||||
var $target = getTargetFromTrigger($this)
|
||||
var data = $target.data('bs.collapse')
|
||||
var option = data ? 'toggle' : $this.data()
|
||||
|
||||
Plugin.call($target, option)
|
||||
})
|
||||
|
||||
}(jQuery);
|
||||
@ -1,6 +1,5 @@
|
||||
$(document).ready(function() {
|
||||
new SYSTEM('./sai.php',42,'start',sys_hashchange);
|
||||
|
||||
$('#sai_navbar ul li a, #project_navbar ul li a').click(function () {
|
||||
$('#sai_navbar li, #project_navbar li').each(function(){
|
||||
$(this).removeClass('active');});
|
||||
@ -11,8 +10,11 @@ $(document).ready(function() {
|
||||
$('.brand').click(function(){
|
||||
location.reload();
|
||||
});
|
||||
$(document).on('ready', autocollapse);
|
||||
$(window).on('resize', autocollapse);
|
||||
$(".navbar-toggle").click(function(){
|
||||
$('#navbar-collapse-1').collapse('toggle');
|
||||
});
|
||||
$(document).on('ready', autocollapse);
|
||||
$(window).on('resize', autocollapse);
|
||||
});
|
||||
|
||||
function sys_hashchange(state){
|
||||
|
||||
@ -10,21 +10,24 @@
|
||||
</head>
|
||||
<body>
|
||||
<nav id="sys_autocollapse" class="navbar navbar-default" role="navigation">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a id="sai_brand" class="navbar-brand" href="#!start">SAI</a>
|
||||
</div>
|
||||
<div id="navbar-collapse-1" class="collapse navbar-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
${menu_start}
|
||||
${menu_sys}
|
||||
</ul>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a id="sai_brand" class="navbar-brand" href="#!start">SAI</a>
|
||||
</div>
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div id="navbar-collapse-1" class="collapse navbar-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
${menu_start}
|
||||
${menu_sys}
|
||||
</ul>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
</div>
|
||||
</nav>
|
||||
<div class="sai_wrapper">
|
||||
<div class="container-fluid">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user