rework calendar filter

api/pages/homepage.php

@@ -39,7 +39,7 @@ function get_page_homepage($Organizr = null)
 			    filterCalendar: {
 			      text: \'Filter\',
 			      click: function() {
-			        $(\'#calendar-filter-modal\').modal(\'show\');
+			        toggleCalendarFilter();
 			      },
 			      //icon: \'x\'
 			    },
@@ -105,42 +105,6 @@ $(".homepage-loading-box").fadeOut(5000);
     <div class="col-md-8 col-md-offset-2 youtube-div">  </div>
 </div>
 <!-- /.container-fluid -->
-<!--  modal content -->
-<div id="calendar-filter-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" style="display: none;">
-    <div class="modal-dialog modal-sm">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-                <h4 class="modal-title" id="mySmallModalLabel" lane="en">Filter Calendar</h4> </div>
-            <div class="modal-body">
-            	<div class="row">
-                    
-                    <div class="col-md-12">
-                        <label class="control-label" lang="en">Choose Media Type</label>
-                        <select class="form-control form-white" data-placeholder="Choose media type" id="choose-calender-filter">
-                            <option value="all" lang="en">All</option>
-                            <option value="tv" lang="en">TV</option>
-                            <option value="film" lang="en">Movie</option>
-                            <option value="music" lang="en">Music</option>
-                        </select>
-                    </div>
-                    <div class="col-md-12">
-                        <label class="control-label" lang="en">Choose Media Status</label>
-                        <select class="form-control form-white" data-placeholder="Choose media status" id="choose-calender-filter-status">
-                            <option value="all" lang="en">All</option>
-                            <option value="text-success" lang="en">Downloaded</option>
-                            <option value="text-info" lang="en">Unaired</option>
-                            <option value="text-danger" lang="en">Missing</option>
-                            <option value="text-primary animated flash" lang="en">Premier</option>
-                        </select>
-                    </div>
-                </div>
-			</div>
-        </div>
-        <!-- /.modal-content -->
-    </div>
-    <!-- /.modal-dialog -->
-</div>
-<!-- /.modal -->
+
 ';
 }

js/custom.js

@@ -1713,9 +1713,6 @@ $(document).on('change', "#edit-tab-form-chooseIcon", function (e) {
 $(document).on('change', "#choose-calender-filter, #choose-calender-filter-status", function (e) {
     filter = $('#choose-calender-filter').val();
     filterDownload = $('#choose-calender-filter-status').val();
-    $('#calendar-filter-modal').modal('hide');
-    console.log("Calendar Filter: "+filter);
-    console.log("Calendar Filter: "+filterDownload);
     $('#calendar').fullCalendar('rerenderEvents');
     new SimpleBar($('.fc-scroller')[0]);
 });

js/functions.js

@@ -9775,6 +9775,43 @@ function toggleDebug(){
 	});
 	getDebugPreInfo();
 }
+function toggleCalendarFilter(){
+	var div = `
+	<div id="calendar-filter-modal" class="panel panel-inverse">
+        <div class="panel-heading"><span class="text-uppercase" lang="en">Filter Calendar</span></div>
+        <div class="panel-wrapper collapse in" aria-expanded="true">
+            <div class="panel-body">
+	            <div class="row">
+                    <div class="col-md-12">
+                        <label class="control-label" lang="en">Choose Media Type</label>
+                        <select class="form-control form-white" data-placeholder="Choose media type" id="choose-calender-filter">
+                            <option value="all" lang="en">All</option>
+                            <option value="tv" lang="en">TV</option>
+                            <option value="film" lang="en">Movie</option>
+                            <option value="music" lang="en">Music</option>
+                        </select>
+                    </div>
+                    <div class="col-md-12">
+                        <label class="control-label" lang="en">Choose Media Status</label>
+                        <select class="form-control form-white" data-placeholder="Choose media status" id="choose-calender-filter-status">
+                            <option value="all" lang="en">All</option>
+                            <option value="text-success" lang="en">Downloaded</option>
+                            <option value="text-info" lang="en">Unaired</option>
+                            <option value="text-danger" lang="en">Missing</option>
+                            <option value="text-primary animated flash" lang="en">Premier</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+	</div>
+	`;
+	swal({
+		content: createElementFromHTML(div),
+		className: 'bg-org',
+		button: false
+	});
+}
 function closeOrgError(){
     $('#main-org-error-container').removeClass('show');
     $('#main-org-error').html('');