Commit a739451d authored by Hermann Mayer's avatar Hermann Mayer

Replaced Bootstrap-Modal with a advanced Fork. (Resposive features added) Added…

Replaced Bootstrap-Modal with a advanced Fork. (Resposive features added) Added some style hotfixes. (See i22/i23)
parent 4cc9d4ac
......@@ -23,14 +23,14 @@
<script>theme = {current: "{{ theme }}"};</script>
{% stylesheets '@JityHomepageBundle/Resources/public/css/theme/10_jity_dark.css' filter='?yui_css' %}
{% stylesheets '@JityHomepageBundle/Resources/public/css/theme/10_jity-dark.css' filter='?yui_css' %}
{% if theme == 'dark' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endif %}
<script>theme.dark = "{{ asset_url }}";</script>
{% endstylesheets %}
{% stylesheets '@JityHomepageBundle/Resources/public/css/theme/10_jity_bright.css' filter='?yui_css' %}
{% stylesheets '@JityHomepageBundle/Resources/public/css/theme/10_jity-bright.css' filter='?yui_css' %}
{% if theme == 'bright' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endif %}
......
......@@ -69,10 +69,11 @@ class EditorController extends Controller
* @param mixed $label
* @param mixed $body
* @param mixed $enableJS
* @param mixed $class
* @access public
* @return void
*/
public function modalAction($name, $buttons = array(), $label = null, $body = null, $enableJS = false)
public function modalAction($name, $buttons = array(), $label = null, $body = null, $enableJS = false, $class = null)
{
$reqBtn = array(
'id' => '',
......@@ -94,6 +95,7 @@ class EditorController extends Controller
'buttons' => $validBtns,
'label' => $label,
'body' => $body,
'class' => $class
));
}
......
/* MODALS */
.modal-open.has-modal-container {
position: relative; /* safari */
overflow: hidden;
}
/* add a scroll bar to stop page from jerking around */
.modal-open.page-overflow .page-container,
.modal-open.page-overflow .page-container .navbar-fixed-top,
.modal-open.page-overflow .page-container .navbar-fixed-bottom,
.modal-open.page-overflow .modal-container {
overflow-y: scroll;
}
.modal-container {
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
z-index: 9999;
}
.modal-open > .modal-container {
display: block;
}
.modal {
outline: none;
position: absolute;
margin-top: 0;
top: 50%;
overflow: visible; /* allow content to popup out (i.e tooltips) */
}
.modal.fade {
top: -100%;
-webkit-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
-moz-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
-o-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
}
.modal.fade.in {
top: 50%;
}
.modal-body {
max-height: none;
overflow: visible;
}
.modal.modal-absolute {
position: absolute;
z-index: 950;
}
.modal .loading-mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-radius: 6px;
}
.modal-spinner {
position: absolute;
top: 50%;
left: 50%;
}
.modal-backdrop.modal-absolute{
position: absolute;
z-index: 940;
}
.modal-backdrop,
.modal-backdrop.fade.in{
opacity: 0.7;
filter: alpha(opacity=70);
background: #fff;
}
.modal.container {
width: 940px;
margin-left: -470px;
}
/* Modal Overflow */
.modal-overflow.modal {
top: 1%;
/*bottom: 1%;*/
}
.modal-overflow.modal.fade {
top: -100%;
}
.modal-overflow.modal.fade.in {
top: 1%;
/*bottom: 1%;*/
}
.modal-overflow .modal-body {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/*.modal-overflow .modal-body {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin-top: 48px; // header height
margin-bottom: 60px; // footer height
overflow: auto;
}
.modal-overflow .modal-footer {
position: absolute;
bottom: 0;
right: 0;
left: 0;
}*/
/* Responsive */
@media (min-width: 1200px) {
.modal.container {
width: 1170px;
margin-left: -585px;
}
}
@media (max-width: 979px) {
.modal,
.modal.container,
.modal.modal-overflow {
top: 1%;
right: 1%;
left: 1%;
bottom: auto;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.modal.fade.in,
.modal.container.fade.in,
.modal.modal-overflow.fade.in {
top: 1%;
bottom: auto;
}
.modal-body,
.modal-overflow .modal-body {
position: static;
margin: 0;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
.modal-footer,
.modal-overflow .modal-footer {
position: static;
}
}
.loading-spinner {
position: absolute;
top: 50%;
left: 50%;
margin: -12px 0 0 -12px;
}
......@@ -146,18 +146,40 @@ p {
font-size: 14px;
}
#editor {
.modal-backdrop, .modal-backdrop.fade.in {
background: none repeat scroll 0 0 #000000;
}
.modal-header {
border-radius: 6px 6px 0 0;
}
.editor-container {
position: relative;
width: 910px;
height: 400px;
min-width: 100%;
min-height: 100%;
}
#editor_modal {
width: 940px;
margin-left: -470px;
margin-top: -350px;
#editor {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/* #editor { */
/* position: relative; */
/* width: 910px; */
/* height: 400px; */
/* } */
/* #editor_modal { */
/* width: 940px; */
/* margin-left: -470px; */
/* margin-top: -350px; */
/* } */
input::-moz-focus-inner, button::-moz-focus-inner {
border: 0;
}
......@@ -545,3 +567,18 @@ code, pre {
cursor: pointer;
}
.collection {
min-height: 50px;
border-radius: 6px;
padding: 0 20px 0 20px;
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.35), 7px 7px 15px rgba(0, 0, 0, 0.15);
border-style: solid;
border-width: 1px;
margin-top: 10px;
margin-bottom: 10px;
}
.ui-state-highlight {
margin: 15px 0 15px 0;
}
.collection {
min-height: 50px;
border-radius: 6px;
padding: 0 20px 0 20px;
/* padding: 20px; */
/* padding-bottom: 1px; */
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.35), 7px 7px 15px rgba(0, 0, 0, 0.15);
border-style: solid;
border-width: 1px;
border-top-color: rgba(0, 0, 0, 0.5);
border-left-color: rgba(0, 0, 0, 0.5);
border-right-color: rgba(255, 255, 255, 0.15);
border-bottom-color: rgba(255, 255, 255, 0.15);
margin-top: 10px;
margin-bottom: 10px;
}
.ui-state-highlight {
/* margin: 30px; */
margin: 15px 0 15px 0;
}
#tags-list-100 {
/* background-color: rgba(185, 74, 72, 0.2); */
background-color: rgba(90, 0, 0, 0.2);
}
#tags-list-66 {
background-color: rgba(185, 109, 73, 0.2);
}
#tags-list-33 {
background-color: rgba(51, 51, 51, 0.5);
}
/* #tag-lists > div { */
/* margin-bottom: 20px; */
/* } */
body, html {
/*
* Hotfix for non-anti-aliased fonts
* @see http://projects.hermann-mayer.net/issues/23
*/
font-smooth: always;
-webkit-font-smoothing: subpixel-antialiased;
/* transform: rotate(-0.0000000001deg) */
}
.fancybox-wrap, .modal {
/*
* Hotfix for z-index issues on webkit browsers
* @see http://projects.hermann-mayer.net/issues/22
*/
-webkit-transform: translate3d(0,0,0);
}
......@@ -298,4 +298,22 @@ hr {
background-color: #2C2A28;
}
.collection {
border-top-color: rgba(0, 0, 0, 0.5);
border-left-color: rgba(0, 0, 0, 0.5);
border-right-color: rgba(255, 255, 255, 0.15);
border-bottom-color: rgba(255, 255, 255, 0.15);
}
#tags-list-100 {
background-color: rgba(90, 0, 0, 0.2);
}
#tags-list-66 {
background-color: rgba(185, 109, 73, 0.2);
}
#tags-list-33 {
background-color: rgba(51, 51, 51, 0.5);
}
......@@ -270,3 +270,22 @@ hr {
color: #8F8F8F;
}
.collection {
border-top-color: rgba(0, 0, 0, 0.5);
border-left-color: rgba(0, 0, 0, 0.5);
border-right-color: rgba(255, 255, 255, 0.15);
border-bottom-color: rgba(255, 255, 255, 0.15);
}
#tags-list-100 {
background-color: rgba(90, 0, 0, 0.2);
}
#tags-list-66 {
background-color: rgba(185, 109, 73, 0.2);
}
#tags-list-33 {
background-color: rgba(51, 51, 51, 0.5);
}
!function($){
"use strict"; // jshint ;_;
var $baseModal = $('<div class="modal" />').appendTo('body'),
$baseBackdrop = $('<div class="modal-backdrop" />').appendTo('body'),
$baseModalAbs = $('<div class="modal modal-absolute" />').appendTo('body'),
$baseBackdropAbs = $('<div class="modal-backdrop modal-absolute" />').appendTo('body');
var baseModalzIndex = +$baseModal.css('z-index'),
baseModalAbszIndex = +$baseModalAbs.css('z-index'),
baseBackdropzIndex = +$baseBackdrop.css('z-index'),
baseBackdropAbszIndex = +$baseBackdropAbs.css('z-index'),
zIndexFactor = baseModalzIndex - baseBackdropzIndex;
$baseModal.remove();
$baseBackdrop.remove();
$baseModalAbs.remove();
$baseBackdropAbs.remove();
$baseBackdrop = null;
$baseModal = null;
$baseModalAbs = null;
$baseBackdrop = null;
/* MODAL MANAGER CLASS DEFINITION
* ====================== */
var ModalManager = function (element, options) {
this.init(element, options);
}
window.ModalManager = ModalManager;
ModalManager.prototype = {
constructor: ModalManager,
init: function(element, options){
this.$element = $(element);
this.options = $.extend({}, $.fn.modalmanager.defaults, this.$element.data(), typeof options == 'object' && options);
this.stack = [];
this.isBody = this.$element[0] === $('body')[0];
this.$container = this.$element.find('.modal-container');
this.$parent = this.$container.length ? this.$container : this.$element;
this.$element.toggleClass('has-modal-container', !!this.$container.length);
},
createModal: function(element, options){
$(element).modal($.extend({ manager: this }, options));
},
appendModal: function(modal){
this.stack.push(modal);
var that = this;
modal.$element.on('show.modalmanager', function(e){
modal.isShown = true;
that.$element
.toggleClass('modal-open', that.hasOpenModal())
.toggleClass('page-overflow', $(window).height() < that.$element.height());
var $scrollElement = (that.$container.length ? that.$container :
(that.isBody ? $(window) : that.$element));
modal.$element
.css('margin-top', $scrollElement.scrollTop() - ($(window).height() < modal.$element.height() ?
0 : modal.$element.height()/2))
.css('z-index', (!that.isBody ? baseModalAbszIndex : baseModalzIndex)
+ (zIndexFactor * that.getIndexOfModal(modal)));
that.backdrop(modal, function () {
var transition = $.support.transition && modal.$element.hasClass('fade')
modal.$parent = modal.$element.parent();
if (!modal.$parent.length || modal.$parent[0] !== that.$parent[0]) {
modal.$element.detach().appendTo(that.$parent);
}
modal.$element.show();
if (transition) {
modal.$element[0].style.display = 'run-in';
modal.$element[0].offsetWidth;
modal.$element.one($.support.transition.end, function () { modal.$element[0].style.display = 'block' });
}
modal.$element
.addClass('in')
.attr('aria-hidden', false)
.toggleClass('modal-absolute', !that.isBody);
transition ?
modal.$element.one($.support.transition.end, function () { modal.$element.triggerHandler('shown') }) :
modal.$element.triggerHandler('shown');
})
modal.$element.on('shown.modalmanager', function(e){
that.setFocus();
})
});
modal.$element.on('hidden.modalmanager', function(e){
that.backdrop(modal);
if (modal.$backdrop){
$.support.transition && modal.$element.hasClass('fade')?
modal.$backdrop.one($.support.transition.end, function(){ that.destroyModal(modal) }) :
that.destroyModal(modal);
} else {
that.destroyModal(modal);
}
});
modal.$element.on('destroy.modalmanager', function(e){
that.removeModal(modal);
});
},
destroyModal: function(modal){
modal.destroy();
var hasOpenModal = this.hasOpenModal();
this.$element.toggleClass('modal-open', hasOpenModal);
if (!hasOpenModal){
this.$element.removeClass('page-overflow');
}
this.setFocus();
},
hasOpenModal: function(){
for (var i = 0; i < this.stack.length; i++){
if (this.stack[i].isShown) return true;
}
return false;
},
setFocus: function () {
var topModal;
for (var i = 0; i < this.stack.length; i++){
if (this.stack[i].isShown) topModal = this.stack[i];
}
topModal && topModal.$element.focus();
},
removeModal: function(modal){
modal.$element.off('.modalmanager');
if (modal.$backdrop) this.removeBackdrop.call(modal);
this.stack.splice(this.getIndexOfModal(modal), 1);
},
getModalAt: function(index){
return this.stack[index];
},
getIndexOfModal: function(modal){
for (var i = 0; i < this.stack.length; i++){
if (modal === this.stack[i]) return i;
}
},
removeBackdrop: function (modal) {
modal.$backdrop.remove();
modal.$backdrop = null;
},
createBackdrop: function(animate){
var $backdrop;
if (!this.isLoading) {
$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(this.$parent)
.toggleClass('modal-absolute', !this.isBody);
} else {
$backdrop = this.$loading;
$backdrop.off('.modalmanager');
this.$spinner.remove();
this.isLoading = false;
this.$loading = this.$spinner = null;
}
return $backdrop
},
backdrop: function (modal, callback) {
var animate = modal.$element.hasClass('fade') ? 'fade' : '',
showBackdrop = $.extend({}, this.options, modal.options).backdrop;
if (modal.isShown && showBackdrop) {
var doAnimate = $.support.transition && animate && !this.isLoading;
modal.$backdrop = this.createBackdrop(animate);
modal.$backdrop.css('z-index',
(!this.isBody ? baseBackdropAbszIndex : baseBackdropzIndex)
+ (zIndexFactor * this.getIndexOfModal(modal)));
if (modal.options.backdrop != 'static') {
modal.$backdrop.on('click.modal', $.proxy(modal.hide, modal));
}
if (doAnimate) modal.$backdrop[0].offsetWidth // force reflow
modal.$backdrop.addClass('in')
doAnimate ?
modal.$backdrop.one($.support.transition.end, callback) :
callback();
} else if (!modal.isShown && modal.$backdrop) {
modal.$backdrop.removeClass('in');
var that = this;
$.support.transition && modal.$element.hasClass('fade')?
modal.$backdrop.one($.support.transition.end, function(){ that.removeBackdrop(modal) }) :
that.removeBackdrop(modal);
} else if (callback) {
callback();
}
},
removeLoading: function(){
this.$loading && this.$loading.remove();
this.$loading = null;
this.$spinner.remove();
this.$spinner = null;
},
loading: function(callback){
callback = callback || function(){ };
this.$element.toggleClass('modal-open', !this.isLoading || this.hasOpenModal());
if (!this.isLoading) {
this.$loading = this.createBackdrop('fade');
this.$loading[0].offsetWidth // force reflow
this.$loading
.css('z-index',
(!this.isBody ? baseBackdropAbszIndex : baseBackdropzIndex)
+ (zIndexFactor * this.stack.length))
.on('click.modalmanager', $.proxy(this.loading, this))
.addClass('in');
var $scrollElement = (this.$container.length ? this.$container :
(this.isBody ? $(window) : this.$element));
this.$spinner = $('<div class="modal-spinner fade">')
.append(this.options.spinner)
.css('z-index', this.$loading.css('z-index'))
.css('margin-top', $scrollElement.scrollTop())
.appendTo(this.$parent)
.addClass('in');