编辑权限弹窗修改成抽屉模式

app/public/js/bootstrap/drawer.js

@@ -0,0 +1,83 @@
+var drawer = function() {
+    if (!Element.prototype.closest) {
+        if (!Element.prototype.matches) {
+            Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+        }
+        Element.prototype.closest = function(s) {
+            var el = this;
+            var ancestor = this;
+            if (!document.documentElement.contains(el))
+                return null;
+            do {
+                if (ancestor.matches(s))
+                    return ancestor;
+                ancestor = ancestor.parentElement;
+            } while (ancestor !== null);
+            return null;
+        }
+        ;
+    }
+
+    var settings = {
+        speedOpen: 50,
+        speedClose: 350,
+        activeClass: 'is-active',
+        visibleClass: 'is-visible',
+        selectorTarget: '[data-drawer-target]',
+        selectorTrigger: '[data-drawer-trigger]',
+        selectorClose: '[data-drawer-close]',
+    };
+    var toggleccessibility = function(event) {
+        if (event.getAttribute('aria-expanded') === 'true') {
+            event.setAttribute('aria-expanded', false);
+        } else {
+            event.setAttribute('aria-expanded', true);
+        }
+    };
+    var openDrawer = function(trigger) {
+        var target = document.getElementById(trigger.getAttribute('aria-controls'));
+        target.classList.add(settings.activeClass);
+        document.documentElement.style.overflow = 'hidden';
+        toggleccessibility(trigger);
+        setTimeout(function() {
+            target.classList.add(settings.visibleClass);
+        }, settings.speedOpen);
+    };
+    var closeDrawer = function(event) {
+        var closestParent = event.closest(settings.selectorTarget)
+            , childrenTrigger = document.querySelector('[aria-controls="' + closestParent.id + '"');
+        closestParent.classList.remove(settings.visibleClass);
+        document.documentElement.style.overflow = '';
+        toggleccessibility(childrenTrigger);
+        setTimeout(function() {
+            closestParent.classList.remove(settings.activeClass);
+        }, settings.speedClose);
+    };
+    var clickHandler = function(event) {
+        var toggle = event.target
+            , open = toggle.closest(settings.selectorTrigger)
+            , close = toggle.closest(settings.selectorClose);
+        if (open) {
+            openDrawer(open);
+        }
+        if (close) {
+            closeDrawer(close);
+        }
+        if (open || close) {
+            event.preventDefault();
+        }
+    };
+    // var keydownHandler = function(event) {
+    //     if (event.key === 'Escape' || event.keyCode === 27) {
+    //         var drawers = document.querySelectorAll(settings.selectorTarget), i;
+    //         for (i = 0; i < drawers.length; ++i) {
+    //             if (drawers[i].classList.contains(settings.activeClass)) {
+    //                 closeDrawer(drawers[i]);
+    //             }
+    //         }
+    //     }
+    // };
+    document.addEventListener('click', clickHandler, false);
+    // document.addEventListener('keydown', keydownHandler, false);
+};
+drawer();

app/public/js/setting.js

@@ -135,7 +135,7 @@ $(document).ready(() => {
     });
 
     // 选中创建标段才可以选择协作办公
-    $('a[data-target="#edit-user2"]').on('click', function () {
+    $('a[aria-controls="edit-user2"]').on('click', function () {
         $('#edit-user2 input:radio').prop('checked', false);
         $('#edit-user2 input:checkbox').prop('checked', false);
         const account = $(this).data('account');

app/view/setting/user_permission.ejs

@@ -1,3 +1,4 @@
+<link rel="stylesheet" href="/public/css/bootstrap/draw.css">
 <% include ./sub_menu.ejs %>
 <div class="panel-content">
     <div class="panel-title">
@@ -75,7 +76,7 @@
                                                         <% } %>
                                                     <% } %>
                                                 <% } %>
-                                                <a href="#edit-user2" data-account="<%= JSON.stringify(account) %>" data-toggle="modal" data-target="#edit-user2" class="btn btn-sm btn-outline-primary pull-right">编辑</a></td>
+                                                <a href="javascript:void(0);" data-drawer-trigger="" aria-controls="edit-user2" data-account="<%= JSON.stringify(account) %>" class="btn btn-sm btn-outline-primary pull-right">编辑</a></td>
                                         </tr>
                                     <% } %>
                                     </tbody>
@@ -93,5 +94,6 @@
     const allPermission = JSON.parse('<%- permissionStr %>');
     const unitList = JSON.parse(unescape('<%- escape(JSON.stringify(unitList)) %>'));
 </script>
+<script src="/public/js/bootstrap/drawer.js"></script>
 <script src="/public/js/setting.js"></script>
 <script>autoFlashHeight();</script>

app/view/setting/user_permission_modal.ejs

@@ -68,54 +68,6 @@
         </div>
     </div>
 </div>
-<!--弹出编辑权限-->
-<div class="modal fade" id="edit-user2" data-backdrop="static">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">编辑权限</h5>
-            </div>
-            <form method="post" action="/setting/user/permission?_csrf_j=<%= ctx.csrf %>">
-            <div class="modal-body">
-                <% let index = 0; %>
-                <% for (const pm in permission) { %>
-                <% index ++ %>
-                <div class="form-group">
-                    <label><i <% if (permission[pm].class !== '') { %>class="<%= permission[pm].class %>"<% } %>></i> <%= permission[pm].title %> <sup><%= index %></sup></label>
-                    <div>
-                        <% for (const ip of permission[pm].children) { %>
-                        <% if (ip.show === undefined && ip.show !== false) { %>
-                        <div class="form-check form-check-inline">
-                            <input class="form-check-input" type="<%= permission[pm].type %>" id="<%= pm %>_<%= ip.value %>" name="<%= pm %><% if (permission[pm].type === 'checkbox') { %>[]<% } %>" value="<%= ip.value %>">
-                            <label class="form-check-label" for="<%= pm %>_<%= ip.value %>"><%= ip.title %></label>
-                            <% if (ip.hint && ip.hintIcon) { %>
-                            <a href="" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="<%- ip.hint%>"><i class="fa <%- ip.hintIcon%>"></i></a>
-                            <% } %>
-                        </div>
-                        <% } %>
-                        <% } %>
-                    </div>
-                    <% if (permission[pm].tips) { %>
-                    <!--需要勾选  创建标段 ，协作办公才能勾选-->
-                    <div class="alert alert-secondary">
-                        <p class="mb-0"><%- permission[pm].tips %></p>
-                    </div>
-                    <% } %>
-                </div>
-                <% if (ctx.helper._.size(permission) !== index) { %>
-                <hr>
-                <% } %>
-                <% } %>
-            </div>
-            <div class="modal-footer">
-                <input type="hidden" name="id" value="">
-                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
-                <button type="submit" class="btn btn-primary btn-sm">提交修改</button>
-            </div>
-            </form>
-        </div>
-    </div>
-</div>
 <!--弹出账号受限-->
 <div class="modal" tabindex="-1" role="dialog" id="add-unpass">
     <div class="modal-dialog" role="document">
@@ -136,3 +88,53 @@
         </div>
     </div>
 </div>
+<section class="drawer" id="edit-user2" data-drawer-target="">
+    <div class="drawer__overlay" tabindex="-1"></div>
+    <form class="drawer__wrapper" method="post" action="/setting/user/permission?_csrf_j=<%= ctx.csrf %>">
+        <div class="modal-header">
+            <h5 class="modal-title">
+                编辑权限
+            </h5>
+            <!--            <button type="button" class="close" data-drawer-close="" aria-label="Close Drawer">-->
+            <!--                <span aria-hidden="true">&times;</span>-->
+            <!--            </button>-->
+            <!--            <button class="drawer__close" data-drawer-close="" aria-label="Close Drawer"></button>-->
+        </div>
+        <div class="drawer__content">
+            <% let index = 0; %>
+            <% for (const pm in permission) { %>
+                <% index ++ %>
+                <div class="form-group">
+                    <label><i <% if (permission[pm].class !== '') { %>class="<%= permission[pm].class %>"<% } %>></i> <%= permission[pm].title %> <sup><%= index %></sup></label>
+                    <div>
+                        <% for (const ip of permission[pm].children) { %>
+                            <% if (ip.show === undefined && ip.show !== false) { %>
+                                <div class="form-check form-check-inline">
+                                    <input class="form-check-input" type="<%= permission[pm].type %>" id="<%= pm %>_<%= ip.value %>" name="<%= pm %><% if (permission[pm].type === 'checkbox') { %>[]<% } %>" value="<%= ip.value %>">
+                                    <label class="form-check-label" for="<%= pm %>_<%= ip.value %>"><%= ip.title %></label>
+                                    <% if (ip.hint && ip.hintIcon) { %>
+                                        <a href="" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="<%- ip.hint%>"><i class="fa <%- ip.hintIcon%>"></i></a>
+                                    <% } %>
+                                </div>
+                            <% } %>
+                        <% } %>
+                    </div>
+                    <% if (permission[pm].tips) { %>
+                        <!--需要勾选  创建标段 ，协作办公才能勾选-->
+                        <div class="alert alert-secondary">
+                            <p class="mb-0"><%- permission[pm].tips %></p>
+                        </div>
+                    <% } %>
+                </div>
+                <% if (ctx.helper._.size(permission) !== index) { %>
+                    <hr>
+                <% } %>
+            <% } %>
+        </div>
+        <div class="modal-footer">
+            <input type="hidden" name="id" value="">
+            <button type="button" class="btn btn-secondary btn-sm" data-drawer-close="">关闭</button>
+            <button type="submit" class="btn btn-primary btn-sm">提交修改</button>
+        </div>
+    </form>
+</section>