organize tabs and hash

lib/views/modal/create_template.html

@@ -18,7 +18,7 @@
                   <p class="help-block text-center"><small>{{ t('template.children.desc') }}</small></p>
                 </div>
                 <div class="panel-footer text-center">
-                  <a href="{% if page.path.endsWith('/') %}{{ page.path }}{% else %}{{ page.path}}/{% endif %}_template#edit-form"
+                  <a href="{% if page.path.endsWith('/') %}{{ page.path }}{% else %}{{ page.path}}/{% endif %}_template#edit"
                       class="btn btn-sm btn-primary" id="template-button-children">
                       {{ t("Edit") }}
                   </a>
@@ -33,7 +33,7 @@
                   <p class="help-block text-center"><small>{{ t('template.decendants.desc') }}</small></p>
                 </div>
                 <div class="panel-footer text-center">
-                  <a href="{% if page.path.endsWith('/') %}{{ page.path }}{% else %}{{ page.path }}/{% endif %}__template#edit-form"
+                  <a href="{% if page.path.endsWith('/') %}{{ page.path }}{% else %}{{ page.path }}/{% endif %}__template#edit"
                       class="btn btn-sm btn-primary" id="template-button-decendants">
                       {{ t("Edit") }}
                   </a>

lib/views/widget/not_found_content.html

@@ -39,10 +39,10 @@
     </div>
 
     {# edit view #}
-    <div class="tab-pane edit-form {% if req.body.pageForm %}active{% endif %}" id="edit-form">
+    <div class="tab-pane {% if req.body.pageForm %}active{% endif %}" id="edit">
       <div id="page-editor">{% if pageForm.body %}{{ pageForm.body }}{% endif %}</div>
     </div>
-    <div class="tab-pane edit-form" id="hackmd">
+    <div class="tab-pane" id="hackmd">
       <div id="hackmd-editor">
         <iframe width="100%" src="http://localhost:3100/oMx0W0k4Tb-sRkkPrxHDoA?both" frameborder="0"></iframe>
       </div>

lib/views/widget/not_found_tabs.html

@@ -6,7 +6,7 @@
   </li>
 
   <li class="nav-main-left-tab">
-    <a {% if user %}href="#edit-form" data-toggle="tab"{% endif %} class="edit-button {% if not user %}edit-button-disabled{% endif %}">
+    <a {% if user %}href="#edit" data-toggle="tab"{% endif %} class="edit-button {% if not user %}edit-button-disabled{% endif %}">
       <i class="icon-note"></i> {{ t('Create') }}
     </a>
   </li>

lib/views/widget/page_content.html

@@ -31,10 +31,10 @@
 
     {% if not page.isDeleted() %}
       {# edit form #}
-      <div class="tab-pane edit-form {% if req.body.pageForm %}active{% endif %}" id="edit-form">
+      <div class="tab-pane {% if req.body.pageForm %}active{% endif %}" id="edit">
         <div id="page-editor">{% if pageForm.body %}{{ pageForm.body }}{% endif %}</div>
       </div>
-      <div class="tab-pane edit-form" id="hackmd">
+      <div class="tab-pane" id="hackmd">
         <div id="page-editor-with-hackmd"></div>
       </div>
       {% include '../_form.html' %}

lib/views/widget/page_tabs.html

@@ -12,7 +12,7 @@
 
   {% if !isTrashPage() %}
   <li class="nav-main-left-tab nav-tab-edit {% if req.body.pageForm %}active{% endif %}">
-    <a {% if user %}href="#edit-form" data-toggle="tab"{% endif %} class="edit-button {% if not user %}edit-button-disabled{% endif %}">
+    <a {% if user %}href="#edit" data-toggle="tab"{% endif %} class="edit-button {% if not user %}edit-button-disabled{% endif %}">
       <i class="icon-note"></i> {{ t('Edit') }}
     </a>
   </li>

resource/js/components/Page/RevisionPath.js

@@ -110,7 +110,7 @@ export default class RevisionPath extends React.Component {
         {afterElements}
         <CopyButton buttonId="btnCopyRevisionPath" text={this.props.pagePath}
             buttonClassName="btn btn-default btn-copy" iconClassName="ti-clipboard" />
-        <a href="#edit-form" className="btn btn-default btn-edit" style={editButtonStyle}>
+        <a href="#edit" className="btn btn-default btn-edit" style={editButtonStyle}>
           <i className="icon-note"></i>
         </a>
       </span>

resource/js/components/PageEditorByHackmd.jsx

@@ -24,15 +24,15 @@ export default class PageEditorByHackmd extends React.PureComponent {
     const hackMdUri = envVars.HACKMD_URI;
 
     if (hackMdUri == null || this.props.pageIdOnHackmd == null) {
-      return <React.Fragment></React.Fragment>;
+      return <div className="hackmd-nopage">aaa</div>;
     }
 
     return (
       <HackmdEditor
-          markdown={this.props.markdown}
-          hackMdUri={hackMdUri}
-          pageIdOnHackmd={this.props.pageIdOnHackmd}
-        >
+        markdown={this.props.markdown}
+        hackMdUri={hackMdUri}
+        pageIdOnHackmd={this.props.pageIdOnHackmd}
+      >
       </HackmdEditor>
     );
   }

resource/js/legacy/crowi-form.js

@@ -38,13 +38,13 @@ if (!pageId) {
   }
 }
 
-$('a[data-toggle="tab"][href="#edit-form"]').on('show.bs.tab', function() {
+$('a[data-toggle="tab"][href="#edit"]').on('show.bs.tab', function() {
   $('body').addClass('on-edit');
   $('body').addClass('builtin-editor');
   initSlack();
 });
 
-$('a[data-toggle="tab"][href="#edit-form"]').on('hide.bs.tab', function() {
+$('a[data-toggle="tab"][href="#edit"]').on('hide.bs.tab', function() {
   $('body').removeClass('on-edit');
   $('body').removeClass('builtin-editor');
 });

resource/js/legacy/crowi.js

@@ -50,7 +50,7 @@ Crowi.appendEditSectionButtons = function(parentElement) {
     // add button
     $(this).append(`
       <span class="revision-head-edit-button">
-        <a href="#edit-form" onClick="Crowi.setCaretLineData(${line})">
+        <a href="#edit" onClick="Crowi.setCaretLineData(${line})">
           <i class="icon-note"></i>
         </a>
       </span>
@@ -147,7 +147,7 @@ Crowi.handleKeyEHandler = (event) => {
     return;
   }
   // show editor
-  $('a[data-toggle="tab"][href="#edit-form"]').tab('show');
+  $('a[data-toggle="tab"][href="#edit"]').tab('show');
   event.preventDefault();
 };
 
@@ -282,7 +282,7 @@ $(function() {
     if (input2 === '') {
       prefix2 = prefix2.slice(0, -1);
     }
-    top.location.href = prefix1 + input1 + prefix2 + input2 + '#edit-form';
+    top.location.href = prefix1 + input1 + prefix2 + input2 + '#edit';
     return false;
   });
 
@@ -294,7 +294,7 @@ $(function() {
     if (name.match(/.+\/$/)) {
       name = name.substr(0, name.length - 1);
     }
-    top.location.href = pagePathUtil.encodePagePath(name) + '#edit-form';
+    top.location.href = pagePathUtil.encodePagePath(name) + '#edit';
     return false;
   });
 
@@ -504,7 +504,7 @@ $(function() {
       var template = $('#' + templateId).html();
 
       crowi.saveDraft(path, template);
-      top.location.href = `${path}#edit-form`;
+      top.location.href = `${path}#edit`;
     });
 
     /*
@@ -824,9 +824,9 @@ $(function() {
       window.location.hash = '#revision-history';
       window.history.replaceState('', 'History', '#revision-history');
     });
-    $('a[data-toggle="tab"][href="#edit-form"]').on('show.bs.tab', function() {
-      window.location.hash = '#edit-form';
-      window.history.replaceState('', 'Edit', '#edit-form');
+    $('a[data-toggle="tab"][href="#edit"]').on('show.bs.tab', function() {
+      window.location.hash = '#edit';
+      window.history.replaceState('', 'Edit', '#edit');
     });
     $('a[data-toggle="tab"][href="#hackmd"]').on('show.bs.tab', function() {
       window.location.hash = '#hackmd';
@@ -842,8 +842,8 @@ $(function() {
     $('a[data-toggle="tab"][href="#revision-history"]').on('show.bs.tab', function() {
       window.history.replaceState('', 'History', '#revision-history');
     });
-    $('a[data-toggle="tab"][href="#edit-form"]').on('show.bs.tab', function() {
-      window.history.replaceState('', 'Edit', '#edit-form');
+    $('a[data-toggle="tab"][href="#edit"]').on('show.bs.tab', function() {
+      window.history.replaceState('', 'Edit', '#edit');
     });
     $('a[data-toggle="tab"][href="#hackmd"]').on('show.bs.tab', function() {
       window.history.replaceState('', 'HackMD', '#hackmd');
@@ -851,14 +851,14 @@ $(function() {
     $('a[data-toggle="tab"][href="#revision-body"]').on('show.bs.tab', function() {
       window.history.replaceState('', '',  location.href.replace(location.hash, ''));
     });
-    // replace all href="#edit-form" link behaviors
-    $(document).on('click', 'a[href="#edit-form"]', function() {
-      window.location.replace('#edit-form');
+    // replace all href="#edit" link behaviors
+    $(document).on('click', 'a[href="#edit"]', function() {
+      window.location.replace('#edit');
     });
   }
 
   // focus to editor when 'shown.bs.tab' event fired
-  $('a[href="#edit-form"]').on('shown.bs.tab', function(e) {
+  $('a[href="#edit"]').on('shown.bs.tab', function(e) {
     Crowi.setCaretLineAndFocusToEditor();
   });
 });
@@ -918,8 +918,8 @@ Crowi.highlightSelectedSection = function(hash) {
 window.addEventListener('load', function(e) {
   // hash on page
   if (location.hash) {
-    if (location.hash == '#edit-form') {
-      $('a[data-toggle="tab"][href="#edit-form"]').tab('show');
+    if (location.hash === '#edit' || location.hash === '#edit-form') {
+      $('a[data-toggle="tab"][href="#edit"]').tab('show');
       // focus
       Crowi.setCaretLineAndFocusToEditor();
     }
@@ -980,8 +980,8 @@ window.addEventListener('hashchange', function(e) {
 
   // hash on page
   if (location.hash) {
-    if (location.hash == '#edit-form') {
-      $('a[data-toggle="tab"][href="#edit-form"]').tab('show');
+    if (location.hash === '#edit') {
+      $('a[data-toggle="tab"][href="#edit"]').tab('show');
     }
     else if (location.hash == '#hackmd') {
       $('a[data-toggle="tab"][href="#hackmd"]').tab('show');

resource/styles/scss/_on-edit.scss

@@ -151,7 +151,7 @@ body.on-edit {
   }
 
 
-  &.builtin-editor #edit-form {
+  &.builtin-editor .tab-pane#edit {
     @extend %expand-by-flex;
 
     #page-editor {
@@ -369,19 +369,25 @@ body.on-edit {
       }
     }
 
-  } // .builtin-editor #edit-form
+  } // .builtin-editor .tab-pane#edit
 
 
-  &.hackmd #hackmd {
-    @extend %expand-by-flex;
+  &.hackmd {
+    #page-editor-options-selector {
+      display: none;
+    }
+
+    .tab-pane#hackmd {
+      @extend %expand-by-flex;
 
-    #hackmd-editor,
-    iframe {
-      width: 100vw;
-      min-height: calc(100vh - #{$header-plus-footer});   // for IE11
-      height: calc(100vh - #{$header-plus-footer});
+      #hackmd-editor,
+      .hackmd-nopage, #iframe-hackmd {
+        width: 100vw;
+        min-height: calc(100vh - #{$header-plus-footer});   // for IE11
+        height: calc(100vh - #{$header-plus-footer});
 
-      border: none;
+        border: none;
+      }
     }
   }