Modal refactor

ohmg/conf/http.py

@@ -39,7 +39,6 @@ def user_info_from_request(request):
         user_info["is_authenticated"] = True
         user_info["is_staff"] = user.is_staff
         user_info["perms"] = list(user.get_all_permissions())
-        print(json.dumps(user_info, indent=1))
     else:
         user_info = {
             "is_authenticated": False,

ohmg/core/views.py

@@ -459,7 +459,7 @@ def post(self, request):
                     logger.warning(f"{self} | improper GeoJSON in mask")
                     errors.append((lyr_slug, e))
             if errors:
-                return JsonResponseFail("; ".join([f"\n-- {i[0]}: {i[1]}" for i in errors]))
+                return JsonResponseFail("<br/>".join([f"{i[0]}: {i[1]}" for i in errors]))
 
             for layer in layerset.get_layers():
                 # if there is no mask to set and the layer doesn't need a mask removed, skip

ohmg/frontend/svelte_components/rollup.config.js

@@ -77,7 +77,6 @@ export default (cliArgs) => {
     'LatestBlogPosts',
     'MapBrowse',
     'MapShowcase',
-    'Participants',
     'Place',
     'Browse',
   ];

ohmg/frontend/svelte_components/src/browse.js

@@ -1,4 +1,4 @@
-import Browse from './components/overviews/Browse.svelte';
+import Browse from './components/search/Browse.svelte';
 
 export default new Browse({
   target: document.getElementById('browse-target'),

ohmg/frontend/svelte_components/src/components/Viewer.svelte

@@ -36,7 +36,7 @@
   import LayerGroup from 'ol/layer/Group';
 
   import { MapViewer } from '../lib/viewers';
-  import Modal, { getModal } from './base/Modal.svelte';
+  import Modal, { openModal } from './base/Modal.svelte';
   import Link from './base/Link.svelte';
   import MapboxLogoLink from './interfaces/widgets/MapboxLogoLink.svelte';
 
@@ -514,7 +514,7 @@
         <button
           title="About this viewer"
           on:click={() => {
-            getModal('modal-about').open();
+            openModal('modal-about');
           }}>info</button
         >
       </div>

ohmg/frontend/svelte_components/src/components/base/ExpandableSection.svelte

@@ -2,8 +2,8 @@
     import { slide } from 'svelte/transition';
     import {slugify} from '../../lib/utils';
 
-    import InfoModalButton from "../buttons/InfoModalButton.svelte";
-    import ConditionalDoubleChevron from "../buttons/ConditionalDoubleChevron.svelte";
+    import InfoModalButton from "../shared/buttons/InfoModalButton.svelte";
+    import ConditionalDoubleChevron from "../shared/buttons/ConditionalDoubleChevron.svelte";
 
     export let TITLE;
     export let EXPANDED = false;

ohmg/frontend/svelte_components/src/components/base/Modal.svelte

@@ -6,6 +6,14 @@
   export function getModal(id = '') {
     return modals[id];
   }
+
+  export function openModal(id = '') {
+    getModal(id).open()
+  }
+
+  export function closeModal(id = '') {
+    getModal(id).close()
+  }
 </script>
 
 <script lang="ts">
@@ -63,6 +71,9 @@
     delete modals[id];
     window.removeEventListener('keydown', keyPress);
   });
+
+  let className = "content"
+  if (full) {className += " full-modal-content"}
 </script>
 
 <!-- this modal works fine with keyboard interaction, disabling a11y warnings -->
@@ -80,7 +91,7 @@
 >
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <div id="modal" class={full ? 'full-modal' : ''} on:click|stopPropagation={() => {}}>
+  <div id="modal" class={full ? 'full-modal' : 'content'} on:click|stopPropagation={() => {}}>
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     {#if closable}
@@ -90,7 +101,7 @@
         <line x1="9" y1="3" x2="3" y2="9" />
       </svg>
     {/if}
-    <div id="modal-content" class={full ? 'full-modal-content' : ''}>
+    <div id="modal-content" class={className}>
       {#if mdContent}
         <SvelteMarkdown source={mdContent} />
       {:else}

ohmg/frontend/svelte_components/src/components/modals/ConfirmModal.svelte → ohmg/frontend/svelte_components/src/components/base/ModalConfirm.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Modal, { getModal } from '../base/Modal.svelte';
+  import Modal, { closeModal } from './Modal.svelte';
 
   export let id;
   export let yesButtonText = "Yes"
@@ -18,15 +18,15 @@
     title={yesButtonText}
     on:click={() => {
       yesAction();
-      getModal(id).close();
+      closeModal(id);
     }}>{yesButtonText}</button
   >
   <button
     class="button is-danger"
     title={noButtonText}
     on:click={() => {
       noAction()
-      getModal(id).close();
+      closeModal(id);
     }}>{noButtonText}</button
   >
 </Modal>

ohmg/frontend/svelte_components/src/components/lists/LatestAdditions.svelte → ohmg/frontend/svelte_components/src/components/home/LatestAdditions.svelte

@@ -1,7 +1,7 @@
 <script>
-  import LoadingEllipsis from '../common/LoadingEllipsis.svelte';
+  import LoadingEllipsis from '../shared/LoadingEllipsis.svelte';
 
-  import MapItem from '../cards/MapItem.svelte';
+  import MapItem from '../shared/cards/MapItem.svelte';
 
   import { getFromAPI } from '../../lib/requests';
 

ohmg/frontend/svelte_components/src/components/overviews/sections/LatestBlogPosts.svelte → ohmg/frontend/svelte_components/src/components/home/LatestBlogPosts.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Link from '../../base/Link.svelte';
+  import Link from '../base/Link.svelte';
 
   $: blogItems = [];
 

ohmg/frontend/svelte_components/src/components/MapShowcase.svelte → ohmg/frontend/svelte_components/src/components/home/MapShowcase.svelte

@@ -1,9 +1,9 @@
 <script>
-  import Link from './base/Link.svelte';
+  import Link from '../base/Link.svelte';
 
-  import MapItem from './cards/MapItem.svelte';
+  import MapItem from '../shared/cards/MapItem.svelte';
 
-  import LatestAdditions from './lists/LatestAdditions.svelte';
+  import LatestAdditions from './LatestAdditions.svelte';
 
   export let CONTEXT;
   export let FEATURED_MAPS = [];

ohmg/frontend/svelte_components/src/components/Georeferencer.svelte → ohmg/frontend/svelte_components/src/components/interfaces/Georeferencer.svelte

@@ -27,7 +27,7 @@
   import Draw from 'ol/interaction/Draw';
   import Modify from 'ol/interaction/Modify';
 
-  import { gcpStyles, parcelStyles, emptyStyle } from '../lib/ol-styles';
+  import { gcpStyles, parcelStyles, emptyStyle } from '../../lib/ol-styles';
   import {
     makeLayerGroupFromLayerSet,
     makeTitilerXYZUrl,
@@ -38,23 +38,23 @@
     extentFromImageSize,
     projectionFromImageExtent,
     usaExtent,
-  } from '../lib/utils';
-  import { submitPostRequest } from '../lib/requests';
-  import { makeImageLayer, makePmTilesLayer } from '../lib/layers';
-  import { DocMousePosition, LyrMousePosition, MapScaleLine } from '../lib/controls';
-  import { MapViewer } from '../lib/viewers';
+  } from '../../lib/utils';
+  import { submitPostRequest } from '../../lib/requests';
+  import { makeImageLayer, makePmTilesLayer } from '../../lib/layers';
+  import { DocMousePosition, LyrMousePosition, MapScaleLine } from '../../lib/controls';
+  import { MapViewer } from '../../lib/viewers';
 
-  import Modal, { getModal } from './base/Modal.svelte';
-  import LoadingEllipsis from './common/LoadingEllipsis.svelte';
-  import Link from './base/Link.svelte';
-  import ToolUIButton from './interfaces/widgets/ToolUIButton.svelte';
+  import Modal, { openModal } from '../base/Modal.svelte';
+  import LoadingEllipsis from '../shared/LoadingEllipsis.svelte';
+  import Link from '../base/Link.svelte';
+  import ToolUIButton from './widgets/ToolUIButton.svelte';
 
-  import ExpandElement from './interfaces/widgets/ExpandElement.svelte';
-  import ExtendSessionModal from './modals/ExtendSessionModal.svelte';
-  import InfoModalButton from './buttons/InfoModalButton.svelte';
-  import SigninReminder from './common/SigninReminder.svelte';
+  import ExpandElement from './widgets/ExpandElement.svelte';
+  import ExtendSessionModal from '../shared/modals/ExtendSessionModal.svelte';
+  import InfoModalButton from '../shared/buttons/InfoModalButton.svelte';
+  import SigninReminder from '../shared/SigninReminder.svelte';
 
-  import ConfirmModal from './modals/ConfirmModal.svelte';
+  import ModalConfirm from '../base/ModalConfirm.svelte';
 
   export let CONTEXT;
   export let REGION;
@@ -140,7 +140,7 @@
   let autoRedirect;
   function promptRefresh() {
     if (!leaveOkay) {
-      getModal('modal-extend-session').open();
+      openModal('modal-extend-session');
       leaveOkay = true;
       autoRedirect = setTimeout(cancelSession, 10000);
       timer = setInterval(() => {
@@ -472,7 +472,7 @@
     setPreviewVisibility(previewMode);
     loadIncomingGCPs();
     if (!CONTEXT.user.is_authenticated) {
-      getModal('modal-anonymous').open();
+      openModal('modal-anonymous');
     }
   });
 
@@ -908,33 +908,21 @@
   >
 </div>
 
-<ConfirmModal id="modal-submit-helmert" yesAction={submitSession}>
+<ModalConfirm id="modal-submit-helmert" yesAction={submitSession}>
   <p>
     You have only two GCPs, but it is highly advisable to have three or more.
     Please add more, unless you are unable to do so.
   </p>
-</ConfirmModal>
+</ModalConfirm>
+<ModalConfirm id="modal-cancel"
+  yesButtonText="Yes - return to overview"
+  yesAction={cancelSession}
+  noButtonText="No - keep working">
+  <p>Are you sure you want to cancel this session?</p>
+</ModalConfirm>
 <Modal id="modal-anonymous">
   <SigninReminder next={CONTEXT.path} msg="Without an account you can experiment with the interface, but cannot submit your work."/>
 </Modal>
-<Modal id="modal-cancel">
-  <p>Are you sure you want to cancel this session?</p>
-  <button
-    class="button is-success"
-    title="Cancel session and return to map overview"
-    on:click={() => {
-      cancelSession();
-      getModal('modal-cancel').close();
-    }}>Yes - return to overview</button
-  >
-  <button
-    class="button is-danger"
-    title="Continue working"
-    on:click={() => {
-      getModal('modal-cancel').close();
-    }}>No - keep working</button
-  >
-</Modal>
 <Modal id="modal-parcels">
   <p>It can be helpful to use modern-day property lines when georeferencing historical maps.</p>
   <p>When you are zoomed in far enough, you will be able to add the parcels layer.</p>
@@ -991,14 +979,14 @@
     <div class="control-btn-group">
       <ToolUIButton action={() => {
         if (gcpList.length == 2) {
-          getModal('modal-submit-helmert').open()
+          openModal('modal-submit-helmert')
         } else {
           submitSession()
         }
       }} title="Save control points" disabled={!enableSave}><Check /></ToolUIButton>
       <ToolUIButton
         action={() => {
-          getModal('modal-cancel').open();
+          openModal('modal-cancel');
         }}
         title="Cancel georeferencing"
         disabled={!enableButtons}><X /></ToolUIButton

ohmg/frontend/svelte_components/src/components/interfaces/MapPreview.svelte

@@ -16,8 +16,8 @@
   import ToolUIButton from './widgets/ToolUIButton.svelte';
   import MapboxLogoLink from './widgets/MapboxLogoLink.svelte';
 
-  import { getModal } from '../base/Modal.svelte';
-  import LegendModal from '../modals/LegendModal.svelte';
+  import { openModal } from '../base/Modal.svelte';
+  import LegendModal from '../shared/modals/LegendModal.svelte';
 
   import { makeLayerGroupFromLayerSet } from '../../lib/utils';
   import { LyrMousePosition } from '../../lib/controls';
@@ -152,7 +152,7 @@
     <div class="layer-section-header" style="border-top-width: 1px;">
       <ToolUIButton
         action={() => {
-          getModal('modal-legend').open();
+          openModal('modal-legend');
         }}
         title="Show map key"
       >