Initial commit

fergaldoyle · Sep 8, 2019 · b39a923 · b39a923
1 parent 28e94a6
commit b39a923
Show file tree

Hide file tree

Showing 24 changed files with 5,968 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,11 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = crlf
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,29 @@
+{
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": false,
+      "experimentalObjectRestSpread": true
+    }
+  },
+  "extends": "eslint:recommended",
+  "rules": {
+    "no-undef": 1,
+    "no-console": "off",
+    "prefer-const": "warn",
+    "no-var": "warn",
+    "indent": ["warn", 2, { "SwitchCase": 1 }],
+    "space-before-blocks": ["warn", "always"],
+    "brace-style": ["warn", "1tbs", { "allowSingleLine": true }],
+    "keyword-spacing": "warn"
+  },
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "globals": {
+    "XDomainRequest": true
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/.jsbeautifyrc b/.jsbeautifyrc
@@ -0,0 +1,7 @@
+{
+  "indent_size": 2,
+  "indent_char": " ",
+  "brace_style": "collapse-preserve-inline",
+  "max_preserve_newlines": 4,
+  "preserve_newlines": true
+}
diff --git a/docs/dist/image-masonry-react.js b/docs/dist/image-masonry-react.js
diff --git a/docs/dist/image-masonry-react.js.map b/docs/dist/image-masonry-react.js.map
diff --git a/docs/dist/image-masonry-vue.js b/docs/dist/image-masonry-vue.js
diff --git a/docs/dist/image-masonry-vue.js.map b/docs/dist/image-masonry-vue.js.map
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title></title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+  <div id="css"></div>
+  <script type="module" src="index.js"></script>
+</body>
+
+</html>
diff --git a/docs/react.html b/docs/react.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title></title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+  <div id="App"></div>
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+  <script crossorigin src="https://unpkg.com/[email protected]/prop-types.min.js"></script>
+
+  <script src="./dist/image-masonry-react.js"></script>
+  <script>
+    ReactDOM.render(
+      React.createElement(ImageMasonryExample, {}, null),
+      document.getElementById('App')
+    );
+  </script>
+</body>
+
+</html>
diff --git a/docs/src/images.js b/docs/src/images.js
@@ -0,0 +1,137 @@
+export default [
+  {
+    src: "https://source.unsplash.com/V6TWE6h8gyg/800x600",
+    width: 800,
+    height: 600
+  },
+  {
+    src: "https://source.unsplash.com/dtaPArYUDg4/800x600",
+    width: 800,
+    height: 600
+  },
+  {
+    src: "https://source.unsplash.com/R_kik2MoltU/600x799",
+    width: 600,
+    height: 799
+  },
+  {
+    src: "https://source.unsplash.com/8LPgWfHgcMg/600x799",
+    width: 600,
+    height: 799
+  },
+  {
+    src: "https://source.unsplash.com/mC_puQe4V3g/600x800",
+    width: 600,
+    height: 800
+  },
+  {
+    src: "https://source.unsplash.com/_LuLiJc1cdo/800x600",
+    width: 800,
+    height: 600
+  },
+  {
+    src: "https://source.unsplash.com/v7daTKlZzaw/800x599",
+    width: 800,
+    height: 599
+  },
+  {
+    src: "https://source.unsplash.com/s7qZayMy6Go/600x799",
+    width: 600,
+    height: 799
+  },
+  {
+    src: "https://source.unsplash.com/rB-4G58XFt0/600x800",
+    width: 600,
+    height: 800
+  },
+  {
+    src: "https://source.unsplash.com/fg6g2u5oklo/1000x300",
+    width: 1000,
+    height: 400
+  },
+  {
+    src: "https://source.unsplash.com/eVwzKfnEGDg/800x600",
+    width:800,
+    height: 600
+  },
+  {
+    src: "https://source.unsplash.com/F_eLtGyrlNY/600x800",
+    width: 600,
+    height: 800
+  },
+  {
+    src: "https://source.unsplash.com/9270-pFGVTU/800x600",
+    width: 800,
+    height: 600
+  },
+  {
+    src: "https://source.unsplash.com/R4y_E5ZQDPg/800x599",
+    width: 800,
+    height: 599
+  },
+  {
+    src: "https://source.unsplash.com/-QTa5xYxDCs/800x599",
+    width: 800,
+    height: 599
+  },
+  {
+    src: "https://source.unsplash.com/Sfs_64L9UHE/600x800",
+    width: 600,
+    height: 800
+  },
+  {
+    src: "https://source.unsplash.com/pR166OP_l6g/800x600",
+    width: 800,
+    height: 600
+  },
+  {
+    src: "https://source.unsplash.com/hlvtJ4JkVfc/800x600",
+    width: 800,
+    height: 600
+  },
+  {
+    src: "https://source.unsplash.com/AUYr7ptqSRQ/800x400",
+    width: 800,
+    height: 400
+  },
+  {
+    src: "https://source.unsplash.com/E7PlRr9ZfoM/800x600",
+    width: 800,
+    height: 600
+  },
+  {
+    src: "https://source.unsplash.com/GhlotfzelR4/800x600",
+    width: 800,
+    height: 600
+  },
+  {
+    src: "https://source.unsplash.com/Xvlc79bu9MA/800x600",
+    width: 800,
+    height: 600
+  },
+  {
+    src: "https://source.unsplash.com/txRO7-0I8wU/600x800",
+    width: 600,
+    height: 800
+  },
+  {
+    src: "https://source.unsplash.com/e2uTOpgW5Ec/1000x300",
+    width: 1000,
+    height: 300
+  },
+  {
+    src: "https://source.unsplash.com/5BsNkTMbZZ0/800x600",
+    width: 800,
+    height: 600
+  },
+  {
+    src: "https://source.unsplash.com/_31y-mxvRWI/600x800",
+    width: 600,
+    height: 800
+  },
+  {
+    src: "https://source.unsplash.com/VrrZAVkzfWE/800x600",
+    width: 800,
+    height: 600
+  }
+];
diff --git a/docs/src/react/Index.jsx b/docs/src/react/Index.jsx
@@ -0,0 +1,36 @@
+import React, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import ImageMasonry from '../../../src/react/ImageMasonry.jsx';
+import sampleImages from '../images';
+
+function shuffleArray(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+}
+
+export default function () {
+
+  const [images, setImages] = useState(sampleImages);
+  const [rowHeight, setRowHeight] = useState(180);
+
+  const handleChangeImagesClick = () => {
+    const newArray = [...images];
+    shuffleArray(newArray);
+    setImages(newArray);
+  }
+
+  const handleChangeRowHeightClick = () => {
+    setRowHeight(rowHeight + 20);
+  }
+
+  return (
+    <div>
+      <button type="button" onClick={handleChangeImagesClick}>Change images</button>
+      <button type="button" onClick={handleChangeRowHeightClick}>Change row height</button>
+      <ImageMasonry images={images} targetRowHeight={rowHeight} />
+    </div>
+  )
+
+}
diff --git a/docs/src/vue/index.vue b/docs/src/vue/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <button type="button" @click="onChangeImages">Change images</button>   <button type="button" @click="onChangeRowHeight">Change row height</button>
+    <image-masonry :images="images" :targetRowHeight="targetRowHeight" @image-click="onClick"></image-masonry>
+  </div>
+</template>
+
+<script>
+import sampleImages from '../images';
+import imageMasonry from '../../../src/vue/image-masonry.vue';
+
+function shuffleArray(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+}
+
+export default {
+  data: () => ({
+    images: sampleImages
+  }),
+  components: {
+    imageMasonry
+  },
+  methods: {
+    onChangeImages() {
+      const newArray = [...sampleImages];
+      shuffleArray(newArray);
+      this.images = newArray;
+    },
+    onChangeRowHeight() {
+      this.targetRowHeight = this.targetRowHeight + 20
+    },
+    onClick(...args) {
+      console.log(...args);
+    }
+  }
+}
+</script>
diff --git a/docs/style.css b/docs/style.css
@@ -0,0 +1,20 @@
+body {
+  overflow-y: scroll;
+}
+
+.image-masonry {
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.image-masonry-item {
+  box-sizing: border-box;
+  padding: 1px
+}
+
+.image-masonry-item img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
diff --git a/docs/vue.html b/docs/vue.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title></title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+  <div id="app"></div>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+  <script src="./dist/image-masonry-vue.js"></script>
+  <script>
+    new Vue({
+      el: '#app',
+      components: {
+        ImageMasonryExample: ImageMasonryExample
+      },
+      template: '<div><image-masonry-example></image-masonry-example></div>'
+    });
+
+  </script>
+</body>
+
+</html>