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)

app/Resources/views/base.html.twig

@@ -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 %}

src/Jity/HomepageBundle/Controller/EditorController.php

@@ -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
         ));
     }
 

src/Jity/HomepageBundle/Resources/public/css/02_bootstrap-modal.css

+/* 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;
+}

src/Jity/HomepageBundle/Resources/public/css/90_jity_structure.css → src/Jity/HomepageBundle/Resources/public/css/90_jity-structure.css

@@ -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;
+}
+

src/Jity/HomepageBundle/Resources/public/css/95_jity-testing.css

+

src/Jity/HomepageBundle/Resources/public/css/95_jity_testing.css

-.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; */
-/* } */
-

src/Jity/HomepageBundle/Resources/public/css/96_jity-hotfix.css

+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);
+}
+

src/Jity/HomepageBundle/Resources/public/css/theme/10_jity_bright.css → src/Jity/HomepageBundle/Resources/public/css/theme/10_jity-bright.css

@@ -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);
+}
 

src/Jity/HomepageBundle/Resources/public/css/theme/10_jity_dark.css → src/Jity/HomepageBundle/Resources/public/css/theme/10_jity-dark.css

@@ -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);
+}
+

src/Jity/HomepageBundle/Resources/public/js/23_bootstrap-modalmanager.js

+!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');
+
+