Implemented Flyout layout control, minor improvements in the file list control and back-end styles.
This commit is contained in:
alekseybobkov
parent
6cf11693b8
commit
5c15f81f96
File diff suppressed because it is too large
Load Diff
|
|
@ -4857,12 +4857,12 @@ return this}
|
|||
$(document).render(function(){$('[data-control=scrollbar]').scrollbar()})}(window.jQuery);+function($){"use strict";var FileList=function(element,options){this.options=options
|
||||
this.$el=$(element)
|
||||
this.init();}
|
||||
FileList.DEFAULTS={}
|
||||
FileList.DEFAULTS={ignoreItemClick:false}
|
||||
FileList.prototype.init=function(){var self=this
|
||||
this.$el.on('click','li.group > h4 > a, li.group > div.group',function(){self.toggleGroup($(this).closest('li'))
|
||||
return false;});this.$el.on('click','li.item > a',function(event){var e=$.Event('open.oc.list',{relatedTarget:$(this).parent().get(0),clickEvent:event})
|
||||
return false;});if(!this.options.ignoreItemClick){this.$el.on('click','li.item > a',function(event){var e=$.Event('open.oc.list',{relatedTarget:$(this).parent().get(0),clickEvent:event})
|
||||
self.$el.trigger(e,this)
|
||||
return false})
|
||||
return false})}
|
||||
this.$el.on('ajaxUpdate',$.proxy(this.update,this))}
|
||||
FileList.prototype.toggleGroup=function(group){var $group=$(group);$group.attr('data-status')=='expanded'?this.collapseGroup($group):this.expandGroup($group)}
|
||||
FileList.prototype.collapseGroup=function(group){var
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
|
||||
FileList.DEFAULTS = {
|
||||
|
||||
ignoreItemClick: false
|
||||
}
|
||||
|
||||
FileList.prototype.init = function (){
|
||||
|
|
@ -42,12 +42,14 @@
|
|||
return false;
|
||||
});
|
||||
|
||||
this.$el.on('click', 'li.item > a', function(event) {
|
||||
var e = $.Event('open.oc.list', {relatedTarget: $(this).parent().get(0), clickEvent: event})
|
||||
self.$el.trigger(e, this)
|
||||
if (!this.options.ignoreItemClick) {
|
||||
this.$el.on('click', 'li.item > a', function(event) {
|
||||
var e = $.Event('open.oc.list', {relatedTarget: $(this).parent().get(0), clickEvent: event})
|
||||
self.$el.trigger(e, this)
|
||||
|
||||
return false
|
||||
})
|
||||
return false
|
||||
})
|
||||
}
|
||||
|
||||
this.$el.on('ajaxUpdate', $.proxy(this.update, this))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,222 @@
|
|||
/*
|
||||
* Flyout plugin.
|
||||
*/
|
||||
+function ($) { "use strict";
|
||||
|
||||
var Base = $.oc.foundation.base,
|
||||
BaseProto = Base.prototype
|
||||
|
||||
// SCROLLPAD CLASS DEFINITION
|
||||
// ============================
|
||||
|
||||
var Flyout = function(element, options) {
|
||||
this.$el = $(element)
|
||||
this.$overlay = null
|
||||
this.options = options
|
||||
|
||||
Base.call(this)
|
||||
|
||||
this.init()
|
||||
}
|
||||
|
||||
Flyout.prototype = Object.create(BaseProto)
|
||||
Flyout.prototype.constructor = Flyout
|
||||
|
||||
Flyout.prototype.dispose = function() {
|
||||
this.removeOverlay()
|
||||
this.$el.removeData('oc.flyout')
|
||||
this.$el = null
|
||||
|
||||
if (this.options.flyoutToggle) {
|
||||
this.removeToggle()
|
||||
}
|
||||
|
||||
BaseProto.dispose.call(this)
|
||||
}
|
||||
|
||||
Flyout.prototype.show = function() {
|
||||
var $cells = this.$el.find('> .layout-cell'),
|
||||
$flyout = this.$el.find('> .flyout')
|
||||
|
||||
this.removeOverlay()
|
||||
|
||||
for (var i = 0; i < $cells.length; i++) {
|
||||
var $cell = $($cells[i]),
|
||||
width = $cell.width()
|
||||
|
||||
$cell.css('width', width)
|
||||
}
|
||||
|
||||
this.createOverlay()
|
||||
|
||||
window.setTimeout(this.proxy(this.setBodyClass), 1)
|
||||
$flyout.css('width', this.options.flyoutWidth)
|
||||
|
||||
this.hideToggle()
|
||||
}
|
||||
|
||||
Flyout.prototype.hide = function() {
|
||||
var $cells = this.$el.find('> .layout-cell'),
|
||||
$flyout = this.$el.find('> .flyout')
|
||||
|
||||
for (var i = 0; i < $cells.length; i++) {
|
||||
var $cell = $($cells[i])
|
||||
|
||||
$cell.css('width', '')
|
||||
}
|
||||
|
||||
$flyout.css('width', 0)
|
||||
|
||||
window.setTimeout(this.proxy(this.removeBodyClass), 1)
|
||||
window.setTimeout(this.proxy(this.removeOverlayAndShowToggle), 300)
|
||||
}
|
||||
|
||||
// FLYOUT INTERNAL METHODS
|
||||
// ============================
|
||||
|
||||
Flyout.prototype.init = function() {
|
||||
this.build()
|
||||
}
|
||||
|
||||
Flyout.prototype.build = function() {
|
||||
if (this.options.flyoutToggle) {
|
||||
this.buildToggle()
|
||||
}
|
||||
}
|
||||
|
||||
Flyout.prototype.buildToggle = function() {
|
||||
var $toggleContainer = $(this.options.flyoutToggle),
|
||||
$toggle = $('<div class="flyout-toggle"><i class="icon-chevron-right"></i></div>')
|
||||
|
||||
$toggleContainer.on('click', this.proxy(this.show))
|
||||
$toggleContainer.append($toggle)
|
||||
}
|
||||
|
||||
Flyout.prototype.removeToggle = function() {
|
||||
var $toggle = this.getToggle()
|
||||
|
||||
$toggle.off('click', this.proxy(this.show))
|
||||
$toggle.remove()
|
||||
}
|
||||
|
||||
Flyout.prototype.hideToggle = function() {
|
||||
if (!this.options.flyoutToggle) {
|
||||
return
|
||||
}
|
||||
|
||||
this.getToggle().hide()
|
||||
}
|
||||
|
||||
Flyout.prototype.showToggle = function() {
|
||||
if (!this.options.flyoutToggle) {
|
||||
return
|
||||
}
|
||||
|
||||
this.getToggle().show()
|
||||
}
|
||||
|
||||
Flyout.prototype.getToggle = function() {
|
||||
var $toggleContainer = $(this.options.flyoutToggle)
|
||||
|
||||
return $toggleContainer.find('.flyout-toggle')
|
||||
}
|
||||
|
||||
Flyout.prototype.setBodyClass = function() {
|
||||
$(document.body).addClass('flyout-visible')
|
||||
}
|
||||
|
||||
Flyout.prototype.removeBodyClass = function() {
|
||||
$(document.body).removeClass('flyout-visible')
|
||||
}
|
||||
|
||||
Flyout.prototype.createOverlay = function() {
|
||||
this.$overlay = $('<div class="flyout-overlay"/>')
|
||||
|
||||
var position = this.$el.offset()
|
||||
|
||||
this.$overlay.css({
|
||||
top: position.top,
|
||||
left: this.options.flyoutWidth
|
||||
})
|
||||
|
||||
this.$overlay.on('click', this.proxy(this.onOverlayClick))
|
||||
$(document.body).on('keydown', this.proxy(this.onDocumentKeydown))
|
||||
|
||||
$(document.body).append(this.$overlay)
|
||||
}
|
||||
|
||||
Flyout.prototype.removeOverlay = function() {
|
||||
if (!this.$overlay) {
|
||||
return
|
||||
}
|
||||
|
||||
this.$overlay.off('click', this.proxy(this.onOverlayClick))
|
||||
$(document.body).off('keydown', this.proxy(this.onDocumentKeydown))
|
||||
|
||||
this.$overlay.remove()
|
||||
this.$overlay = null
|
||||
}
|
||||
|
||||
Flyout.prototype.removeOverlayAndShowToggle = function() {
|
||||
this.removeOverlay()
|
||||
this.showToggle()
|
||||
}
|
||||
|
||||
// EVENT HANDLERS
|
||||
// ============================
|
||||
|
||||
Flyout.prototype.onOverlayClick = function() {
|
||||
this.hide()
|
||||
}
|
||||
|
||||
Flyout.prototype.onDocumentKeydown = function(ev) {
|
||||
if (ev.which == 27) {
|
||||
this.hide();
|
||||
}
|
||||
}
|
||||
|
||||
// FLYOUT PLUGIN DEFINITION
|
||||
// ============================
|
||||
|
||||
Flyout.DEFAULTS = {
|
||||
flyoutWidth: 400,
|
||||
flyoutToggle: null
|
||||
}
|
||||
|
||||
var old = $.fn.flyout
|
||||
|
||||
$.fn.flyout = function (option) {
|
||||
var args = Array.prototype.slice.call(arguments, 1),
|
||||
result = undefined
|
||||
|
||||
this.each(function () {
|
||||
var $this = $(this)
|
||||
var data = $this.data('oc.flyout')
|
||||
var options = $.extend({}, Flyout.DEFAULTS, $this.data(), typeof option == 'object' && option)
|
||||
if (!data) $this.data('oc.flyout', (data = new Flyout(this, options)))
|
||||
if (typeof option == 'string') result = data[option].apply(data, args)
|
||||
if (typeof result != 'undefined') return false
|
||||
})
|
||||
|
||||
return result ? result : this
|
||||
}
|
||||
|
||||
$.fn.flyout.Constructor = Flyout
|
||||
|
||||
// FLYOUT NO CONFLICT
|
||||
// =================
|
||||
|
||||
$.fn.flyout.noConflict = function () {
|
||||
$.fn.flyout = old
|
||||
return this
|
||||
}
|
||||
|
||||
// FLYOUT DATA-API
|
||||
// ===============
|
||||
|
||||
// Currently flyouts don't use the document render event
|
||||
// and can't be created dynamically (performance considerations).
|
||||
$(document).on('ready', function(){
|
||||
$('div[data-control=flyout]').flyout()
|
||||
})
|
||||
}(window.jQuery);
|
||||
|
|
@ -168,6 +168,18 @@
|
|||
}
|
||||
|
||||
&.hero {
|
||||
.a-hover() {
|
||||
background: @color-filelist-hero-hover-bg;
|
||||
border-bottom: 1px solid @color-filelist-hero-hover-bg!important;
|
||||
span.title, span.description {
|
||||
color: @color-filelist-hero-hover-text!important;
|
||||
}
|
||||
|
||||
.list-icon {
|
||||
color: @color-filelist-hero-hover-text!important;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
background: @color-filelist-hero-item-bg;
|
||||
|
|
@ -184,12 +196,16 @@
|
|||
color: @color-filelist-title-hero;
|
||||
}
|
||||
|
||||
.list-icon {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: 20px;
|
||||
font-size: 22px;
|
||||
color: #b7c0c2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: @color-filelist-hero-hover-bg;
|
||||
border-bottom: 1px solid @color-filelist-hero-hover-bg!important;
|
||||
span.title, span.description {
|
||||
color: @color-filelist-hero-hover-text!important;
|
||||
}
|
||||
.a-hover();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -233,6 +249,31 @@
|
|||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid @color-panel-light;
|
||||
}
|
||||
|
||||
> div.controls {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 15px;
|
||||
|
||||
> a.control {
|
||||
width: 16px;
|
||||
height: 23px;
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
color: @color-filelist-hero-hover-text!important;
|
||||
padding: 0;
|
||||
|
||||
&:before {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > div.controls {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
> li.group {
|
||||
|
|
@ -241,6 +282,16 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.single-level {
|
||||
ul li:hover {
|
||||
background: @color-filelist-hero-hover-bg;
|
||||
|
||||
> a {
|
||||
.a-hover();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
.flyout-container {
|
||||
> .flyout {
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
left: 0!important;
|
||||
.transition(width 0.1s);
|
||||
}
|
||||
}
|
||||
|
||||
.flyout-overlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
z-index: 5000;
|
||||
position: absolute;
|
||||
background-color: rgba(0,0,0,0);
|
||||
.transition(background-color 0.3s);
|
||||
}
|
||||
|
||||
.flyout-toggle {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0;
|
||||
width: 23px;
|
||||
height: 25px;
|
||||
background: #2b3e50;
|
||||
cursor: pointer;
|
||||
.border-right-radius(4px);
|
||||
color: #bdc3c7;
|
||||
font-size: 10px;
|
||||
|
||||
i {
|
||||
margin: 7px 0 0 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:hover i {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
body.flyout-visible {
|
||||
overflow: hidden;
|
||||
|
||||
.flyout-overlay {
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
}
|
||||
|
|
@ -59,4 +59,5 @@
|
|||
@import "layout/footer.less";
|
||||
@import "layout/outerlayout.less";
|
||||
@import "layout/fancylayout.less";
|
||||
@import "layout/flyout.less";
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@
|
|||
<script src="<?= Backend::skinAsset('assets/js/october-min.js') ?>?v<?= System\Models\Parameters::get('system::core.build', 1) ?>"></script>
|
||||
<script src="<?= URL::asset('modules/cms/widgets/mediamanager/assets/js/mediamanager-global-min.js') ?>"></script>
|
||||
|
||||
<script src="<?= Backend::skinAsset('assets/js/october.flyout.js') ?>"></script>
|
||||
|
||||
<?= $this->makeAssets() ?>
|
||||
<?= Block::placeholder('head') ?>
|
||||
<?= $this->makeLayoutPartial('custom_styles') ?>
|
||||
|
|
@ -12,8 +12,19 @@
|
|||
<?= $this->makeLayoutPartial('mainmenu') ?>
|
||||
</div>
|
||||
|
||||
<?php $flyoutContent = Block::placeholder('sidepanel-flyout') ?>
|
||||
|
||||
<div class="layout-row">
|
||||
<div class="layout">
|
||||
<div class="layout flyout-container"
|
||||
<?php if ($flyoutContent): ?>
|
||||
data-control="flyout"
|
||||
data-flyout-width="400"
|
||||
data-flyout-toggle="#layout-sidenav"
|
||||
<?php endif ?>
|
||||
>
|
||||
<?php if ($flyoutContent): ?>
|
||||
<div class="layout-cell flyout"> <?= $flyoutContent ?></div>
|
||||
<?php endif ?>
|
||||
|
||||
<!-- Side Navigation -->
|
||||
<?= $this->makeLayoutPartial('sidenav') ?>
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
#layout-side-panel {
|
||||
#layout-side-panel, .panel-contents {
|
||||
.control-toolbar {
|
||||
padding: 20px 0 20px 20px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue