diff --git a/package.json b/package.json index c03143f..1df721a 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ }, "dependencies": { "animejs": "^3.1.0", - "basicscroll": "^3.0.2", + "aos": "^2.3.4", "compression": "^1.7.4", "dayjs": "^1.8.20", "normalize.css": "^8.0.1", @@ -26,8 +26,6 @@ "sirv": "^0.4.2" }, "devDependencies": { - "sapper": "^0.27.9", - "svelte": "github:rixo/svelte#hmr-capture-state-dist", "@babel/core": "^7.8.4", "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-transform-runtime": "^7.8.3", @@ -37,6 +35,7 @@ "@rollup/plugin-node-resolve": "^7.1.1", "@rollup/plugin-replace": "^2.3.1", "autoprefixer": "^9.7.4", + "basicscroll": "^3.0.2", "eslint-config-standard": "^14.1.0", "eslint-plugin-import": "^2.20.1", "eslint-plugin-node": "^11.0.0", @@ -55,6 +54,8 @@ "rollup-plugin-svelte": "^5.1.1", "rollup-plugin-svelte-hot": "^0.2.0-0", "rollup-plugin-terser": "^5.2.0", + "sapper": "^0.27.9", + "svelte": "github:rixo/svelte#hmr-capture-state-dist", "svelte-preprocess": "^3.4.0" }, "browserslist": [ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 824ee4c..be8ac12 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,6 +1,6 @@ dependencies: animejs: 3.1.0 - basicscroll: 3.0.2 + aos: 2.3.4 compression: 1.7.4 dayjs: 1.8.20 normalize.css: 8.0.1 @@ -17,6 +17,7 @@ devDependencies: '@rollup/plugin-node-resolve': 7.1.1_rollup@1.31.0 '@rollup/plugin-replace': 2.3.1_rollup@1.31.0 autoprefixer: 9.7.4 + basicscroll: 3.0.2 eslint-config-standard: 14.1.0_13a54f81caffeb9134dc06c172bdde71 eslint-plugin-import: 2.20.1 eslint-plugin-node: 11.0.0 @@ -1052,6 +1053,14 @@ packages: optional: true resolution: integrity: sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw== + /aos/2.3.4: + dependencies: + classlist-polyfill: 1.2.0 + lodash.debounce: 4.0.8 + lodash.throttle: 4.1.1 + dev: false + resolution: + integrity: sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw== /aproba/1.2.0: dev: true resolution: @@ -1248,7 +1257,7 @@ packages: dependencies: eases: 1.0.8 parse-unit: 1.0.1 - dev: false + dev: true resolution: integrity: sha512-xMSBINspbWYZ3tMCqjSxTWDKWPgvje2f2Ob+bGJ2qTOfinZzIsLbWOdwT7b1q0irtqp2eqzdqGMuqAFceM0muw== /bcrypt-pbkdf/1.0.2: @@ -1520,6 +1529,10 @@ packages: optional: true resolution: integrity: sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg== + /classlist-polyfill/1.2.0: + dev: false + resolution: + integrity: sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4= /clean-css/4.2.1: dependencies: source-map: 0.6.1 @@ -1888,7 +1901,7 @@ packages: resolution: integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w== /eases/1.0.8: - dev: false + dev: true resolution: integrity: sha1-8fUGmmtu0upRD5xhEDmNY+/pruY= /ecc-jsbn/0.1.2: @@ -3342,6 +3355,10 @@ packages: dev: true resolution: integrity: sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0= + /lodash.debounce/4.0.8: + dev: false + resolution: + integrity: sha1-gteb/zCmfEAF/9XiUVMArZyk168= /lodash.template/4.5.0: dependencies: lodash._reinterpolate: 3.0.0 @@ -3355,6 +3372,10 @@ packages: dev: true resolution: integrity: sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ== + /lodash.throttle/4.1.1: + dev: false + resolution: + integrity: sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ= /lodash/4.17.15: dev: true resolution: @@ -3966,7 +3987,7 @@ packages: resolution: integrity: sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA= /parse-unit/1.0.1: - dev: false + dev: true resolution: integrity: sha1-fhu21b7zh0wo45JSaiVBFwKR7s8= /parseurl/1.3.3: @@ -5839,6 +5860,7 @@ specifiers: '@rollup/plugin-node-resolve': ^7.1.1 '@rollup/plugin-replace': ^2.3.1 animejs: ^3.1.0 + aos: ^2.3.4 autoprefixer: ^9.7.4 basicscroll: ^3.0.2 compression: ^1.7.4 diff --git a/rollup.config.js b/rollup.config.js index 8c63831..86b5891 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,12 +1,12 @@ import resolve from '@rollup/plugin-node-resolve' import replace from '@rollup/plugin-replace' import commonjs from '@rollup/plugin-commonjs' -import svelte from 'rollup-plugin-svelte-hot' -// import svelte from 'rollup-plugin-svelte' +// import svelte from 'rollup-plugin-svelte-hot' +import svelte from 'rollup-plugin-svelte' import babel from 'rollup-plugin-babel' // import { eslint } from 'rollup-plugin-eslint' // import browsersync from 'rollup-plugin-browsersync' -import hmr from 'rollup-plugin-hot' +// import hmr from 'rollup-plugin-hot' import sveltePreprocess from 'svelte-preprocess' import { terser } from 'rollup-plugin-terser' import config from 'sapper/config/rollup.js' @@ -36,30 +36,26 @@ export default { input: config.client.input(), output: { ...config.client.output(), - ...dev && { exports: 'named' } + // ...dev && { exports: 'named' } }, - experimentalCodeSplitting: true, + // experimentalCodeSplitting: true, plugins: [ // Javascript svelte({ dev, preprocess, hydratable: true, - emitCss: !hot, + // emitCss: true, // css: css => css.write('public/bundle.css'), - ...(!hot && { - css: css => { - css.write('public/bundle.css') - }, - }), - hot: hot && { - // sapper-dev-client expects either webpack or rollup with no HMR, so - // we need to prevent it from doing full reloads with rollup - patchSapperDevClient: true, - // optimistic will try to recover from runtime errors during - // component init (instead of doing a full reload) - optimistic: true, - } + css: css => css.write('static/bundle.css', dev), + // hot: hot && { + // // sapper-dev-client expects either webpack or rollup with no HMR, so + // // we need to prevent it from doing full reloads with rollup + // patchSapperDevClient: true, + // // optimistic will try to recover from runtime errors during + // // component init (instead of doing a full reload) + // optimistic: true, + // } }), replace({ 'process.browser': true, @@ -72,15 +68,15 @@ export default { }), commonjs(), // dev && eslint(), - legacy && !hot && babel({ + !dev && babel({ extensions: ['.js', '.mjs', '.html', '.svelte'], exclude: ['node_modules/@babel/**'], runtimeHelpers: true }), - hot && hmr({ - public: '__sapper__/dev', - inMemory: true, - }), + // hot && hmr({ + // public: '__sapper__/dev', + // inMemory: true, + // }), // Compress Javascript !dev && terser({ diff --git a/src/animations.js b/src/animations.js index 00d9aba..80bb1b6 100644 --- a/src/animations.js +++ b/src/animations.js @@ -9,7 +9,7 @@ export const zoomFadeIn = (node, { targets, duration }) => { duration, easing: 'easeInOutCirc', opacity: [0, 1], - scale: [.9, 1], + scale: [0.9, 1], delay: anime.stagger(100) }) } @@ -23,7 +23,7 @@ export const zoomFadeOut = (node, { targets, duration }) => { duration, easing: 'easeInOutCirc', opacity: [1, 0], - scale: [1, .9], + scale: [1, 0.9], delay: anime.stagger(100) }) } diff --git a/src/atoms/Button.svelte b/src/atoms/Button.svelte index 18ac56e..5489f0c 100644 --- a/src/atoms/Button.svelte +++ b/src/atoms/Button.svelte @@ -1,15 +1,24 @@ - +{#if type === 'button'} + + +{:else} + + + {text} +{/if} diff --git a/src/atoms/Cursor.svelte b/src/atoms/Cursor.svelte deleted file mode 100644 index b28627d..0000000 --- a/src/atoms/Cursor.svelte +++ /dev/null @@ -1,27 +0,0 @@ - - - diff --git a/src/atoms/IconArrow.svelte b/src/atoms/IconArrow.svelte new file mode 100644 index 0000000..a1f22f7 --- /dev/null +++ b/src/atoms/IconArrow.svelte @@ -0,0 +1,14 @@ + + + + {#if direction === 'left'} + + {:else if direction === 'right'} + + {/if} + diff --git a/src/atoms/IconCross.svelte b/src/atoms/IconCross.svelte new file mode 100644 index 0000000..9bd1c11 --- /dev/null +++ b/src/atoms/IconCross.svelte @@ -0,0 +1,10 @@ + + + + + diff --git a/src/atoms/IconGlobe.svelte b/src/atoms/IconGlobe.svelte index 0931cff..cb1c752 100644 --- a/src/atoms/IconGlobe.svelte +++ b/src/atoms/IconGlobe.svelte @@ -1,6 +1,11 @@ - + - + - - + + - + diff --git a/src/atoms/IconGlobeSmall.svelte b/src/atoms/IconGlobeSmall.svelte index 589d235..25c6ffa 100644 --- a/src/atoms/IconGlobeSmall.svelte +++ b/src/atoms/IconGlobeSmall.svelte @@ -1,6 +1,11 @@ - + - + - - + + - + diff --git a/src/atoms/LinkChange.svelte b/src/atoms/LinkChange.svelte new file mode 100644 index 0000000..8f84428 --- /dev/null +++ b/src/atoms/LinkChange.svelte @@ -0,0 +1,11 @@ + + + + {text} + + + + diff --git a/src/atoms/ToggleLayout.svelte b/src/atoms/ToggleLayout.svelte new file mode 100644 index 0000000..bde0e4f --- /dev/null +++ b/src/atoms/ToggleLayout.svelte @@ -0,0 +1,85 @@ + + +
+ + + + + +
diff --git a/src/functions.js b/src/functions.js index e69de29..92a2af3 100644 --- a/src/functions.js +++ b/src/functions.js @@ -0,0 +1,66 @@ +import { apiEndpoints } from './store' + + +/* +** Debounce function with a delay +** (For scrolling or other resource demanding behaviors) +*/ +export const debounce = (callback, wait) => { + // let timeout + // return (...args) => { + // const context = this + // clearTimeout(timeout) + // timeout = setTimeout(() => callback.apply(context, args), wait) + // } +} + + +/* +** Wrap string's each letters into a span +*/ +export const lettersToSpan = string => { + return string + .replace(/(<.*?>)|(.)/g, letter => letter.replace(/./g, '$&')) + .replace(/ /g, '\u00a0') +} + + +/* +** Check if element is in viewport +*/ +export const isInViewport = element => { + const bounding = element.getBoundingClientRect() + return ( + bounding.top >= 0 && + bounding.left >= 0 && + bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && + bounding.right <= (window.innerWidth || document.documentElement.clientWidth) + ) +} + + +/* +** Random String Generator +*/ +export const randomString = (length = 6, type = 'A') => { + type = type && type.toLowerCase() + let str = '' + let i = 0 + const min = type == 'a' ? 10 : 0 + const max = type == 'n' ? 10 : 62 + for (; i++ < length;) { + let r = Math.random() * (max - min) + min << 0 + str += String.fromCharCode(r += r > 9 ? r < 36 ? 55 : 61 : 48) + } + return str +} + + +/* +** Get thumbnail from API +*/ +export const getThumbnail = (id, width, height, type = 'crop', quality = 75) => { + const ratio = 1.5 + height = !height ? Math.round(width / ratio) : height + return `${apiEndpoints.rest}/assets/${id}?w=${width}&h=${height}&f=${type}&q=${quality}` +} diff --git a/src/molecules/Photo.svelte b/src/molecules/Photo.svelte index 8b35938..87e6723 100644 --- a/src/molecules/Photo.svelte +++ b/src/molecules/Photo.svelte @@ -1,6 +1,6 @@
@@ -32,40 +29,17 @@
{photo.name}, {location.region}, {location.country.name}
- + {(index < 10 ? '0': '') + index}
- - diff --git a/src/molecules/Switcher.svelte b/src/molecules/Switcher.svelte index 42a2132..611c704 100644 --- a/src/molecules/Switcher.svelte +++ b/src/molecules/Switcher.svelte @@ -35,7 +35,10 @@
- + diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte index 271c375..7b0a15c 100644 --- a/src/organisms/Carousel.svelte +++ b/src/organisms/Carousel.svelte @@ -1,46 +1,123 @@ + +
- -
- -
-
- -
+ + {#if viewer} +
05
+ {/if}
-
-

Rogers Street, West End

-

Queensland, Australia

+
+
- + + {#if viewer} +

Apr 6th, 2019

+ {/if}
- - - + {#if !viewer} +
    + {#each photos as page, index} +
  1. + +
    2. + {/each} +
+ {/if}
-
\ No newline at end of file + + {#if viewer} +
    + {#each photos as page} +
  1. + +
    2. + {/each} +
+ {/if} +
+ diff --git a/src/organisms/Locations.svelte b/src/organisms/Locations.svelte index f1b5eee..483ebdb 100644 --- a/src/organisms/Locations.svelte +++ b/src/organisms/Locations.svelte @@ -1,5 +1,5 @@
-
+

Browse all the cities and countries

    -
  • - + {#if continentsToShow.length > 1} +
  • toggleContinents(e)}> +
    • + {/if} {#each continentsToShow as continent} -
  • - +
  • toggleContinents(e, continent.id)}> +
    • {/each}
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte index 7569b46..02aae49 100644 --- a/src/routes/_layout.svelte +++ b/src/routes/_layout.svelte @@ -69,8 +69,9 @@ $locations.forEach(loc => loc.country = $countries.find(cont => cont.id === loc.country.id)) + diff --git a/src/routes/choose.svelte b/src/routes/choose.svelte index c805a59..3121b37 100644 --- a/src/routes/choose.svelte +++ b/src/routes/choose.svelte @@ -1,7 +1,11 @@ @@ -19,45 +37,36 @@
- - + + + -

Houses of the World

+ +
+
+
+ {@html fn.lettersToSpan('Houses')} +
+
+ + of the + +
+
+ {@html fn.lettersToSpan('World')} +
+
+
-
+

{$site.explore_globe}

- +
- - diff --git a/src/routes/index.svelte b/src/routes/index.svelte index 9b6fcd2..244d07c 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -1,11 +1,27 @@ + + @@ -27,75 +87,47 @@
-

Houses

- +
+
+

+ {@html fn.lettersToSpan('Houses')} +

+
+
-
+

{$site.description}

-
- +
-

of

+
+
+ {@html fn.lettersToSpan('of')} +
+
-
-

{$site.explore_list}

+
+

{$site.explore_globe}

- -

World

+
+

+ {@html fn.lettersToSpan('World')} +

+
- - diff --git a/src/routes/location/[country]/[location].svelte b/src/routes/location/[country]/[location].svelte index 9284093..6cc31a9 100644 --- a/src/routes/location/[country]/[location].svelte +++ b/src/routes/location/[country]/[location].svelte @@ -6,7 +6,7 @@ // Preload data export async function preload (page, session) { // Load photos - const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,date,slug,image.data,created_on,modified_on&filter[location.slug][rlike]=%${page.params.location}%&sort=-created_on,name`) + const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,date,slug,image.*,created_on,modified_on&filter[location.slug][rlike]=%${page.params.location}%&limit=-1&sort=-created_on,name`) const photos = await req.json() if (req.status === 200) { return { photos: photos.data } @@ -16,26 +16,29 @@ @@ -67,7 +80,7 @@ Change - +
@@ -77,101 +90,56 @@

{$site.description}

- Houses Of - - {location.name} - - - - + Houses on:eventname + + + {location.description}

Updated - +

-
- - -
+
-
- + +
- - -
+
{#each photos as photo, index} {/each}
+ {#if photos.length}
- + /{pagesTotal} +
+

See more photos

- -