Implement modal without bootstrap.js and jQuery

css/glowingbear.css

@@ -359,15 +359,42 @@ table.notimestampseconds td.time span.seconds {
     display: none !important;
 }
 
-.modal ul {
+.gb-modal {
+     position: absolute;
+     left: 0px;
+     width:100%;
+     height:200%;
+     z-index: 1000;
+     background-color:rgba(0, 0, 0, 0.5)
+}
+.gb-modal[data-state=hidden] {
+    transition: .2s ease-in-out, top .2s ease-in;
+    transition-delay: 0.1s, 0s;
+    top: -150px;
+    visibility: hidden;
+    opacity: 0;
+}
+
+.gb-modal[data-state=visible] {
+    transition: .2s ease-in-out, top .3s ease-out;
+    transition-delay: 0s, 0.1s;
+    top: 0px;
+    visibility: visible;
+    opacity: 1;
+}
+.gb-modal[ng-click], .gb-modal div[ng-click] {
+    cursor: default;
+}
+
+.gb-modal ul {
     list-style: none;
     padding-left: 15px;
 }
-.modal li {
+.gb-modal li {
     font-size: larger;
     margin-bottom: 10px;
 }
-.modal li li {
+.gb-modal li li {
     font-size: medium;
 }
 .modal-header {

index.html

@@ -198,7 +198,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
         <div class="title" ng-bind-html="activeBuffer().title | irclinky:'_blank'" title="{{activeBuffer().title}}"></div>
         <div class="actions pull-right vertical-line-left">
           <div class="pull-left">
-            <a class="" data-toggle="modal" data-target="#settingsModal" title="Options menu">
+            <a class="settings-toggle" ng-click="toggleModal('settingsModal')" title="Options menu">
               <i class="glyphicon glyphicon-cog"></i>
             </a>
           </div>
@@ -265,8 +265,8 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
       </div>
     </div>
     <div id="soundNotification"></div>
-    <div id="settingsModal" class="modal fade">
-      <div class="modal-dialog">
+    <div id="settingsModal" class="gb-modal" data-state="hidden" ng-click="toggleModal('settingsModal')">
+      <div class="modal-dialog" ng-click="preventModalToggle('settingsModal', $event)">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
@@ -385,7 +385,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
             </ul>
           </div>
           <div class="modal-footer">
-            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+            <button type="button" class="btn btn-primary" ng-click="toggleModal('settingsModal')">Close</button>
           </div>
         </div><!-- /.modal-content -->
       </div><!-- /.modal-dialog -->

js/glowingbear.js

@@ -1080,6 +1080,15 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
         }
     };
 
+    // Modal toggles
+    $scope.toggleModal = function(elementId) {
+        var element = document.getElementById(elementId);
+        element.setAttribute('data-state', element.getAttribute('data-state') === "hidden" ? "visible" : "hidden");
+    };
+
+    $scope.preventModalToggle = function(elementId, event) {
+        event.stopPropagation();
+    };
 
     /* Function gets called from bufferLineAdded code if user should be notified */
     $rootScope.createHighlight = function(buffer, message) {