Merge pull request #123 from silinternational/feature/remove-routify

Remove routify

Author: hobbitronics

README.md

@@ -4,7 +4,7 @@ Reusable Svelte components for some internal applications
 
 ## installation
 
-To install to your Svelte project, open your project's root directory in a terminal. Type `npm i @silintl/ui-components --save-dev` and press enter.
+To install to your Svelte project, open your project's root directory in a terminal. Type `npm i @silintl/ui-components --save-dev` and press enter. You may also have to run `npm i [email protected]  --save-dev` and possibly `npm i [email protected]  --save-dev` to get sass stuff working if it doesn't work initially or you want to develop additional material web components in your app. It may depend on your version of npm if this is necessary. You should already have svelte@3 installed if you are using this library.
 
 ## bundler configuration
 
@@ -144,7 +144,7 @@ Classes from [global.scss](https://github.com/silinternational/ui-components/blo
 
 ## theming
 
-If you are using an [MDC theme](https://material.io/develop/web/docs/theming) and [typography](https://material.io/develop/web/components/typography) then import your \_index.scss file to the App.svelte file so they get applied to the ui-components. See https://github.com/silinternational/ui-components/blob/develop/stories/_theme.scss for exposed theme properties.
+If you are using an [MDC theme](https://material.io/develop/web/docs/theming) and [typography](https://material.io/develop/web/components/typography) then import your _index.scss or other file(s) that contains stuff like --mdc-theme-primary --mdc-theme-secondary, --mdc-typography-font-family, etc and other root variables to the App.svelte or Index.html file (unless they are in those files already) so they get applied to the ui-components. See https://github.com/silinternational/ui-components/blob/develop/stories/_theme.scss for exposed theme properties.
 
 ## contributions
 

components/Tour.svelte

@@ -1,7 +1,6 @@
 <script>
 import { Dialog } from '../components/mdc'
 import { onMount, tick } from 'svelte'
-import { goto } from '@roxi/routify'
 
 export let steps = []
 export let data = {}
@@ -13,6 +12,8 @@ let tourMessage = '' // tour message can accept html markup -- use caution to no
 let target = ''
 let buttons = []
 
+let anchorEl = {}
+
 $: setAlertProps(step, data)
 
 onMount(() => {
@@ -26,7 +27,8 @@ async function alertChosen(choice) {
 
   if (choice === 'discard') {
     if (target) {
-      $goto(target)
+      anchorEl.href = target
+      anchorEl.click()
       return
     }
     step++
@@ -75,3 +77,4 @@ function setAlertProps() {
   open={openDialog}
   {buttons}>{@html tourMessage}</Dialog.Alert
 >
+<a bind:this={anchorEl} href="/"><span /></a>

components/mdc/Drawer/Drawer.svelte

@@ -6,7 +6,6 @@ import { MDCList } from '@material/list'
 import Button from '../Button'
 import IconButton from '../IconButton/IconButton.svelte'
 import Tooltip from '../Tooltip/Tooltip.svelte'
-import { beforeUrlChange, goto } from '@roxi/routify'
 import { onMount } from 'svelte'
 import TopAppBar from '../TopAppBar'
 
@@ -21,6 +20,7 @@ export let isFullHeightMenu = false
 export let miniMenu = false
 export let modal = false
 export let toggle = false
+export let currentUrl = ''
 
 let mdcDrawer = {}
 let mdcList = {}
@@ -50,15 +50,8 @@ const isMenuItemActive = (currentUrl, menuItemUrl, urlPattern) => {
   return currentUrl === menuItemUrl || (urlPattern && RegExp(urlPattern).test(currentUrl))
 }
 
-$: currentUrl = window.location.pathname
 $: toggle, toggleDrawer()
 
-$beforeUrlChange(({ url }) => {
-  currentUrl = url
-
-  return true
-})
-
 const showAppropriateThings = () => {
   showAppropriateDrawer()
   showAppropriateSizeMenu()
@@ -140,7 +133,7 @@ main {
             {#if button && isNotMini}
               <Button class="m-1" raised prependIcon={icon} {url}>{label}</Button>
             {:else if button}
-              <IconButton class="mdc-theme--primary pl-1" {icon} ariaLabel={label} on:click={() => $goto(url)} />
+              <IconButton class="mdc-theme--primary pl-1" {icon} ariaLabel={label} {url} />
             {:else if url}
               <a
                 class="mdc-list-item"

components/mdc/IconButton/IconButton.svelte

@@ -5,6 +5,8 @@ import { onMount } from 'svelte'
 
 export let icon
 export let ariaLabel
+export let url = ''
+export let disabled = false
 
 let element = {}
 onMount(() => {
@@ -16,6 +18,28 @@ onMount(() => {
 })
 </script>
 
-<button class="mdc-icon-button material-icons {$$props.class}" aria-label={ariaLabel} on:click bind:this={element}
-  >{icon}</button
->
+{#if url}
+  <a
+    href={url}
+    role="button"
+    class="mdc-icon-button material-icons {$$props.class}"
+    aria-label={ariaLabel}
+    {disabled}
+    on:click
+    on:mousedown
+    on:blur
+    on:focus
+    bind:this={element}>{icon}</a
+  >
+{:else}
+  <button
+    class="mdc-icon-button material-icons {$$props.class}"
+    aria-label={ariaLabel}
+    {disabled}
+    on:click
+    on:mousedown
+    on:blur
+    on:focus
+    bind:this={element}>{icon}</button
+  >
+{/if}

components/mdc/Menu/Menu.svelte

@@ -1,7 +1,6 @@
 <!-- https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu -->
 <script>
 import { MDCMenu } from '@material/menu'
-import { goto } from '@roxi/routify'
 import { onMount } from 'svelte'
 
 export let menuItems = []
@@ -22,14 +21,12 @@ onMount(() => {
 })
 
 const isMenuItemActive = (currentUrl, menuItemUrl) => currentUrl === menuItemUrl
-const handleItemClick = (url, action) => {
-  if (url) {
-    $goto(url)
-  } else if (typeof action === 'function') {
+const handleItemClick = (action) => {
+  if (typeof action === 'function') {
     action()
   }
 }
-const handleItemKeydown = (e, url, action) => (e.code == 'Space' || e.code == 'Enter') && handleItemClick(url, action)
+const handleItemKeydown = (e, action) => (e.code == 'Space' || e.code == 'Enter') && handleItemClick(action)
 const closeMenuHandler = () => {
   if (!menu.open) {
     //checks to make sure the click wasn't opening the menu or on the menu
@@ -45,24 +42,42 @@ const closeMenuHandler = () => {
   <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
     {#each menuItems as { icon, label, url, action }, i}
       <!-- svelte-ignore a11y-invalid-attribute -->
-      <li
-        on:click|preventDefault={() => handleItemClick(url, action)}
-        on:keydown|preventDefault={(e) => handleItemKeydown(e, url, action)}
-        role="menuitem"
-        class="mdc-list-item"
-        class:mdc-list-item--activated={isMenuItemActive(currentUrl, url)}
-        aria-current={isMenuItemActive(currentUrl, url) ? 'page' : null}
-        tabindex={i === 0 ? 0 : undefined}
-        on:blur={closeMenuHandler}
-      >
-        <span class="mdc-list-item__ripple" />
-        {#if icon}
-          <i class="material-icons mdc-list-item__graphic" aria-hidden="true">{icon}</i>
-        {/if}
-        {#if label}
-          <span class="mdc-list-item__text">{label}</span>
-        {/if}
-      </li>
+      {#if url}
+        <a
+          href={url}
+          role="menuitem"
+          class="mdc-list-item"
+          class:mdc-list-item--activated={isMenuItemActive(currentUrl, url)}
+          aria-current={isMenuItemActive(currentUrl, url) ? 'page' : null}
+          tabindex={i === 0 ? 0 : undefined}
+          on:blur={closeMenuHandler}
+        >
+          <span class="mdc-list-item__ripple" />
+          {#if icon}
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">{icon}</i>
+          {/if}
+          {#if label}
+            <span class="mdc-list-item__text">{label}</span>
+          {/if}
+        </a>
+      {:else}
+        <li
+          on:click|preventDefault={() => handleItemClick(action)}
+          on:keydown|preventDefault={(e) => handleItemKeydown(e, action)}
+          role="menuitem"
+          class="mdc-list-item"
+          tabindex={i === 0 ? 0 : undefined}
+          on:blur={closeMenuHandler}
+        >
+          <span class="mdc-list-item__ripple" />
+          {#if icon}
+            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">{icon}</i>
+          {/if}
+          {#if label}
+            <span class="mdc-list-item__text">{label}</span>
+          {/if}
+        </li>
+      {/if}
     {/each}
   </ul>
 </div>