Merge pull request #2761 from weseek/imprv/transplant-gw3735

Imprv/transplant gw3735

src/client/js/components/Page/PageManagement.jsx

@@ -12,6 +12,7 @@ import PageDeleteModal from '../PageDeleteModal';
 import PageRenameModal from '../PageRenameModal';
 import PageDuplicateModal from '../PageDuplicateModal';
 import CreateTemplateModal from '../CreateTemplateModal';
+import PagePresentationModal from '../PagePresentationModal';
 import PresentationIcon from '../Icons/PresentationIcon';
 
 
@@ -26,6 +27,7 @@ const PageManagement = (props) => {
   const [isPageDuplicateModalShown, setIsPageDuplicateModalShown] = useState(false);
   const [isPageTemplateModalShown, setIsPageTempleteModalShown] = useState(false);
   const [isPageDeleteModalShown, setIsPageDeleteModalShown] = useState(false);
+  const [isPagePresentationModalShown, setIsPagePresentationModalShown] = useState(false);
 
   function openPageRenameModalHandler() {
     setIsPageRenameModalShown(true);
@@ -59,6 +61,14 @@ const PageManagement = (props) => {
     setIsPageDeleteModalShown(false);
   }
 
+  function openPagePresentationModalHandler() {
+    setIsPagePresentationModalShown(true);
+  }
+
+  function closePagePresentationModalHandler() {
+    setIsPagePresentationModalShown(false);
+  }
+
 
   // TODO GW-2746 bulk export pages
   // async function getArchivePageData() {
@@ -99,7 +109,7 @@ const PageManagement = (props) => {
         <button className="dropdown-item" type="button" onClick={openPageDuplicateModalHandler}>
           <i className="icon-fw icon-docs"></i> { t('Duplicate') }
         </button>
-        <button className="dropdown-item toggle-presentation" type="button" href="?presentation=1">
+        <button className="dropdown-item" type="button" onClick={openPagePresentationModalHandler}>
           <i className="icon-fw"><PresentationIcon /></i><span className="d-none d-sm-inline"> { t('Presentation Mode') }</span>
         </button>
         <button type="button" className="dropdown-item" onClick={() => { exportPageHandler('md') }}>
@@ -151,6 +161,11 @@ const PageManagement = (props) => {
           path={path}
           isAbleToDeleteCompletely={isAbleToDeleteCompletely}
         />
+        <PagePresentationModal
+          isOpen={isPagePresentationModalShown}
+          onClose={closePagePresentationModalHandler}
+          href="?presentation=1"
+        />
       </>
     );
   }

src/client/js/components/PagePresentationModal.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Modal, ModalBody,
+} from 'reactstrap';
+
+const PagePresentationModal = (props) => {
+
+  function closeModalHandler() {
+    if (props.onClose === null) {
+      return;
+    }
+    props.onClose();
+  }
+
+  return (
+    <Modal isOpen={props.isOpen} toggle={closeModalHandler} className="grw-presentation-modal" unmountOnClose={false}>
+      <ModalBody className="modal-body">
+        <iframe src={props.href} />
+      </ModalBody>
+    </Modal>
+  );
+};
+PagePresentationModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func,
+  href: PropTypes.string.isRequired,
+};
+
+
+export default PagePresentationModal;

src/client/js/legacy/crowi.js

@@ -197,29 +197,6 @@ $(() => {
         }
       });
     }
-
-    // presentation
-    let presentaionInitialized = false;
-
-
-    const $b = $('body');
-
-    $(document).on('click', '.toggle-presentation', function(e) {
-      const $a = $(this);
-
-      e.preventDefault();
-      $b.toggleClass('overlay-on');
-
-      if (!presentaionInitialized) {
-        presentaionInitialized = true;
-
-        $('<iframe />').attr({
-          src: $a.attr('href'),
-        }).appendTo($('#presentation-container'));
-      }
-    }).on('click', '.fullscreen-layer', () => {
-      $b.toggleClass('overlay-on');
-    });
   } // end if pageId
 
   // tab changing handling

src/client/styles/scss/_page-presentation.scss

@@ -0,0 +1,13 @@
+.grw-presentation-modal {
+  @include expand-modal-fullscreen(false, false);
+
+  .modal-body {
+    background: black;
+
+    iframe {
+      width: 100%;
+      height: 100%;
+      border: 0;
+    }
+  }
+}

src/client/styles/scss/_page.scss

@@ -135,51 +135,6 @@
   }
 }
 
-/*
- * for Presentation
- */
-.fullscreen-layer {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 9999;
-  width: 100%;
-  height: 0;
-  background: rgba(0, 0, 0, 0.5);
-  opacity: 0;
-  transition: opacity 0.3s ease-out;
-
-  & > * {
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
-  }
-}
-
-.overlay-on {
-  #wrapper {
-    filter: blur(5px);
-  }
-
-  .fullscreen-layer {
-    height: 100%;
-    opacity: 1;
-  }
-}
-
-#presentation-container {
-  position: absolute;
-  top: 5%;
-  left: 5%;
-  width: 90%;
-  height: 90%;
-  background: black;
-
-  iframe {
-    width: 100%;
-    height: 100%;
-    border: 0;
-  }
-}
-
 .card.grw-page-status-alert {
   $margin-bottom: $grw-navbar-bottom-height + 10px;
 

src/client/styles/scss/style-app.scss

@@ -49,6 +49,7 @@
 @import 'page_list';
 @import 'page-path';
 @import 'page';
+@import 'page-presentation';
 @import 'search';
 @import 'shortcuts';
 @import 'sidebar';