Squash - Plugin updates (#32)

* add change on interval to slideshow

* add share functionality to floor plans

* update slideshow version

* allow grid in postcss

* filtered-loop: bring react and babel up to date

* add support for custom post types

* filtered-loop: add template-1

* filtered-loop: small changes to template-1

* map: upgrade babel and react

plugins/torque-filtered-loop/.babelrc

@@ -1,6 +1,8 @@
 {
-  "presets": ["react", "env"],
+  "presets": ["@babel/preset-react", "@babel/preset-env"],
   "plugins": [
-    "transform-runtime"
+    "@babel/plugin-transform-runtime",
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-class-properties"
   ]
 }

plugins/torque-filtered-loop/README.md

@@ -17,6 +17,16 @@ Currently, the user is able to set a taxonomy, a parent term to limit filter opt
 
 # Changelog
 
+## [1.1.0]
+
+### Added
+
+- Support for custom post types
+
+### Changed
+
+- Babel to v7
+
 ## [1.0.1]
 
 ### Changed

plugins/torque-filtered-loop/package.json

@@ -1,29 +1,31 @@
 {
   "name": "torque-filtered-loop",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "author": "Torque",
   "license": "ISC",
   "scripts": {
     "start": "webpack --mode=development --watch",
     "build": "webpack --mode=production"
   },
   "dependencies": {
+    "@babel/polyfill": "^7.0.0",
+    "@babel/runtime": "^7.0.0",
     "axios": "^0.18.0",
-    "babel-polyfill": "^6.26.0",
-    "babel-runtime": "^6.26.0",
     "path": "^0.12.7",
     "prop-types": "^15.6.2",
-    "react": "^16.4.2",
-    "react-dom": "16.4.2"
+    "react": "^16.8.1",
+    "react-dom": "16.8.1"
   },
   "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.3.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
     "autoprefixer": "^9.0.2",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.5",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
+    "babel-loader": "^8.0.0",
     "copy-webpack-plugin": "^4.5.2",
     "css-loader": "^1.0.0",
     "extract-text-webpack-plugin": "^4.0.0-alpha.0",

plugins/torque-filtered-loop/src/app/App.js

@@ -82,7 +82,7 @@ class App extends Component {
       }
 
       const response = await axios.get(
-        `${this.props.site}/wp-json/wp/v2/posts`,
+        `${this.props.site}/wp-json/wp/v2/${this.props.postType}?_embed`,
         {
           params: this.getRequestParams()
         }

plugins/torque-filtered-loop/src/app/Posts/Posts.js

@@ -1,13 +1,16 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Template_0 } from "./Templates";
+import { Template_0, Template_1 } from "./Templates";
 
 class Posts extends React.PureComponent {
   render() {
     return (
       <div className={"posts-wrapper"}>
         {this.props.posts.map((post, index) => {
           switch (this.props.loopTemplate) {
+            case "template-1":
+              return <Template_1 key={index} post={post} />;
+
             case "template-0":
             default:
               return (

plugins/torque-filtered-loop/src/app/Posts/Templates/Template_1.js

@@ -0,0 +1,39 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+class Template_1 extends React.PureComponent {
+  render() {
+    const { post } = this.props;
+
+    const backgroundImage =
+      post?._embedded["wp:featuredmedia"] &&
+      post?._embedded["wp:featuredmedia"][0]?.source_url;
+    const content = post?.content?.rendered;
+
+    return (
+      <div className={"loop-post template-1"}>
+        <div className={"featured-image-wrapper"}>
+          <div
+            className={"featured-image"}
+            style={{ backgroundImage: `url(${backgroundImage})` }}
+          />
+        </div>
+
+        <div className={"content-wrapper"}>
+          <h4 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
+
+          <div
+            className="content"
+            dangerouslySetInnerHTML={{ __html: content }}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+Template_1.propTypes = {
+  post: PropTypes.object.isRequired
+};
+
+export default Template_1;

plugins/torque-filtered-loop/src/app/Posts/Templates/index.js

@@ -1 +1,2 @@
 export { default as Template_0 } from "./Template_0";
+export { default as Template_1 } from "./Template_1";

plugins/torque-filtered-loop/src/index.js

@@ -5,10 +5,6 @@ import ReactDOM from "react-dom";
 import App from "./app/App";
 import "./app/scss/main.scss";
 
-if (!global._babelPolyfill) {
-  require("babel-polyfill");
-}
-
 const entry = document.querySelectorAll(".torque-filtered-loop-react-entry");
 
 entry.forEach(entry => {
@@ -17,6 +13,7 @@ entry.forEach(entry => {
     ReactDOM.render(
       <App
         site={entry.getAttribute("data-site")}
+        postType={entry.getAttribute("data-post_type")}
         tax={entry.getAttribute("data-tax")}
         parent={entry.getAttribute("data-parent")}
         firstTerm={entry.getAttribute("data-first_term")}

plugins/torque-filtered-loop/src/shortcode/torque-filtered-loop-shortcode-class.php

@@ -21,6 +21,7 @@ public function __construct() {
     // use this array to attributes and display them in the front end
     // for private attributes go to setup_atts()
     $this->expected_args = array(
+      'post_type'     => 'posts',
       'tax'           => '',
       'parent'        => '',
       'first_term'    => '',

plugins/torque-filtered-loop/webpack.config.js

@@ -1,26 +1,26 @@
-const projectConfig = require('../../config')
-const path = require('path')
-const webpack = require('webpack')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
+const projectConfig = require("../../config");
+const path = require("path");
+const webpack = require("webpack");
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
 
-const srcDir = path.join(__dirname, 'src')
+const srcDir = path.join(__dirname, "src");
 const buildDir = path.join(
   projectConfig.root,
-  'wp-content/plugins/torque-filtered-loop'
-)
+  "wp-content/plugins/torque-filtered-loop"
+);
 
 const config = {
   context: srcDir,
 
   entry: {
-    main: ['./index.js'],
+    main: ["@babel/polyfill/noConflict", "./index.js"]
   },
 
   output: {
-    path: path.join(buildDir, './bundles'),
-    publicPath: '/',
-    filename: 'bundle.js',
+    path: path.join(buildDir, "./bundles"),
+    publicPath: "/",
+    filename: "bundle.js"
   },
 
   module: {
@@ -29,54 +29,54 @@ const config = {
         test: /\.js$/,
         exclude: /node_modules/,
         use: {
-          loader: 'babel-loader',
-        },
+          loader: "babel-loader"
+        }
       },
       {
         test: projectConfig.webpackDefaults.css.test,
         exclude: /node_modules/,
         use: ExtractTextPlugin.extract({
-          fallback: 'style-loader?sourceMap',
-          use: projectConfig.webpackDefaults.css.loaders,
-        }),
+          fallback: "style-loader?sourceMap",
+          use: projectConfig.webpackDefaults.css.loaders
+        })
       },
       {
         test: projectConfig.webpackDefaults.scssModules.test,
         exclude: /node_modules/,
         use: ExtractTextPlugin.extract({
-          fallback: 'style-loader?sourceMap',
+          fallback: "style-loader?sourceMap",
           // resolve-url-loader may be chained before sass-loader if necessary
-          use: projectConfig.webpackDefaults.scssModules.loaders,
-        }),
+          use: projectConfig.webpackDefaults.scssModules.loaders
+        })
       },
       {
         test: projectConfig.webpackDefaults.images.test,
         exclude: /node_modules/,
-        use: projectConfig.webpackDefaults.images.loaders,
+        use: projectConfig.webpackDefaults.images.loaders
       },
       {
         test: projectConfig.webpackDefaults.fonts.test,
         exclude: /node_modules/,
-        use: projectConfig.webpackDefaults.fonts.loaders,
-      },
-    ],
+        use: projectConfig.webpackDefaults.fonts.loaders
+      }
+    ]
   },
 
   plugins: [
     new ExtractTextPlugin({
-      filename: 'main.css',
-      publicPath: '/',
+      filename: "main.css",
+      publicPath: "/",
       allChunks: true,
-      ignoreOrder: true,
+      ignoreOrder: true
     }),
     new CopyWebpackPlugin([
-      { from: path.join(srcDir, 'shortcode/*.js'), to: buildDir },
-      { from: path.join(srcDir, 'shortcode/*.html'), to: buildDir },
-      { from: path.join(srcDir, '**/*.php'), to: buildDir },
-    ]),
+      { from: path.join(srcDir, "shortcode/*.js"), to: buildDir },
+      { from: path.join(srcDir, "shortcode/*.html"), to: buildDir },
+      { from: path.join(srcDir, "**/*.php"), to: buildDir }
+    ])
   ],
 
-  devtool: 'source-map',
-}
+  devtool: "source-map"
+};
 
-module.exports = config
+module.exports = config;

plugins/torque-floor-plans/src/app/data-sources/entrata/FloorPlanInfo/FloorPlanInfo.scss

@@ -0,0 +1,47 @@
+.root {
+  .modal_wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+
+    background-color: rgba(0, 0, 0, 0.7);
+
+    .modal {
+      width: 90%;
+      height: 75%;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+  }
+
+  .share {
+    position: relative;
+
+    .social_wrapper {
+      position: absolute;
+      bottom: 60px;
+      padding: 5px;
+      border-radius: 4px;
+      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+      background-color: white;
+
+      i {
+        margin-bottom: 10px;
+      }
+    }
+  }
+
+  i {
+    cursor: pointer;
+  }
+}