@cocreate/fullscreen 1.5.23 → 1.7.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [1.7.0](https://github.com/CoCreate-app/CoCreate-fullscreen/compare/v1.6.0...v1.7.0) (2023-08-17)
+
+
+### Features
+
+* bump cocreate dependencies for the latest updates and features ([d74ad9a](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/d74ad9a3ee5da32a710d0110a6fa7284b97effcf))
+
+# [1.6.0](https://github.com/CoCreate-app/CoCreate-fullscreen/compare/v1.5.23...v1.6.0) (2023-08-16)
+
+
+### Bug Fixes
+
+* crud attributes renamed ([01d9fc0](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/01d9fc0a8de86b4472acc13af72316e37df07005))
+* replace -target -selector ([f9233cc](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/f9233ccb149af46dc93445e57d1d7c7995f084fb))
+* webpack.config and package.json make use of mode=production instead of process.env ([32ba4ba](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/32ba4bafd5d36fd26e71178b90149cd65e07993c))
+
+
+### Features
+
+* Add support for querying elements in fullscreen toggle ([a0eec19](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/a0eec197fd2b4bd99b44df422628791c1e429f81))
+* name attribute and variable renamed to key ([820630c](https://github.com/CoCreate-app/CoCreate-fullscreen/commit/820630c525c3021dbc7d3796621d8dfb58aac9be))
+
 ## [1.5.23](https://github.com/CoCreate-app/CoCreate-fullscreen/compare/v1.5.22...v1.5.23) (2023-06-14)
 
 

package/CoCreate.config.js

@@ -4,8 +4,8 @@ module.exports = {
     "host": "",
     "sources": [
         {
-            "collection": "files",
-            "document": {
+            "array": "files",
+            "object": {
                 "_id": "601f49be6b402c72efc07e09",
                 "name": "index.html",
                 "path": "/docs/fullscreen/index.html",

package/demo/index.html

@@ -19,7 +19,7 @@
             <section>
                 <h2>Only Target</h2>
                 <button fullscreen>self</button>
-                <button fullscreen fullscreen-target="#example2">
+                <button fullscreen fullscreen-selector="#example2">
                     Target #example2
                 </button>
                 <button fullscreen fullscreen-closest="section">
@@ -149,6 +149,7 @@
         </div>
 
         <!--<script src="../dist/CoCreate-fullscreen.js"></script>-->
+        <!-- <script src="../../../CoCreateJS/dist/CoCreate.js"></script> -->
         <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
     </body>
 </html>

package/docs/index.html

@@ -6,10 +6,10 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />
 
         <meta
-            name="description"
+            key="description"
             content="A simple HTML5 and pure javascript component. Easy configuration using HTML5 attributes or Javscript api and highly styleable." />
         <meta
-            name="keywords"
+            key="keywords"
             content="helper classes, utility classes, css framework, css library, inline style classes" />
         <meta name="robots" content="index,follow" />
         <meta
@@ -27,9 +27,9 @@
         <link
             rel="stylesheet"
             href="/docs/index.css"
-            collection="files"
-            document_id="60888216117c640e7596303f"
-            name="src"
+            array="files"
+            object="60888216117c640e7596303f"
+            key="src"
             type="text/css"
             save="true" />
         <link rel="manifest" href="/manifest.webmanifest" />
@@ -42,20 +42,20 @@
             scroll="sticky-nav,hide-nav"
             scroll-up="10"
             scroll-down="10"
-            collection="files"
-            document_id="60395ef42b3ac232657040fd"
-            name="src"></nav>
+            array="files"
+            object="60395ef42b3ac232657040fd"
+            key="src"></nav>
         <sidenav
             id="menuL"
             class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
             resizable
-            resize-target="[content_id='content']"
+            resize-selector="[content_id='content']"
             resize-property="margin-left"
             resize-value="width">
             <menu
-                collection="files"
-                document_id="603717b07de7fb350ae9fec8"
-                name="src"></menu>
+                array="files"
+                object="603717b07de7fb350ae9fec8"
+                key="src"></menu>
             <div resize="right"></div>
         </sidenav>
         <main
@@ -78,7 +78,7 @@
                         share-width="700"
                         share-media="https://cdn.cocreate.app/docs/fullscreen.png"
                         hover="display:block!important"
-                        hover-target=".social-networks">
+                        hover-selector=".social-networks">
                         <div class="display:none social-networks">
                             <a
                                 class="margin-right:15px"
@@ -147,11 +147,11 @@
                         class="border-bottom:1px_solid_lightgrey"
                         scroll
                         scroll-intersect="color:dodgerblue"
-                        scroll-target="#fullscreen-install-section">
+                        scroll-selector="#fullscreen-install-section">
                         <span
                             class="display:flex align-items:center width:fit-content"
                             hover="display:block!important"
-                            hover-target="[href='#fullscreen-install']">
+                            hover-selector="[href='#fullscreen-install']">
                             <h2 class="padding:5px_0px">Install</h2>
                             <a
                                 class="margin-left:10px display:none"
@@ -173,11 +173,11 @@
                         class="margin-top:80px border-bottom:1px_solid_lightgrey"
                         scroll
                         scroll-intersect="color:dodgerblue"
-                        scroll-target="#fullscreen-usage-section">
+                        scroll-selector="#fullscreen-usage-section">
                         <span
                             class="display:flex align-items:center width:fit-content"
                             hover="display:block!important"
-                            hover-target="[href='#fullscreen-usage']">
+                            hover-selector="[href='#fullscreen-usage']">
                             <h2 class="padding:5px_0px">Usage</h2>
                             <a
                                 class="margin-left:10px display:none"
@@ -203,7 +203,7 @@
                                       &lt;/style&gt;
                                       &lt;section&gt;
                                         &lt;h2&gt;Only Target&lt;/h2&gt;
-                                        &lt;button fullscreen fullscreen-target=&quot;#example2&quot;&gt;With Attr Target&lt;/button&gt;
+                                        &lt;button fullscreen fullscreen-selector=&quot;#example2&quot;&gt;With Attr Target&lt;/button&gt;
                                         &lt;button fullscreen &gt;WithOut Target&lt;/button&gt;
                                       &lt;/section&gt;
                                       &lt;section&gt;
@@ -226,11 +226,11 @@
                         class="margin-top:80px border-bottom:1px_solid_lightgrey"
                         scroll
                         scroll-intersect="color:dodgerblue"
-                        scroll-target="#fullscreen-attributes-section">
+                        scroll-selector="#fullscreen-attributes-section">
                         <span
                             class="display:flex align-items:center width:fit-content"
                             hover="display:block!important"
-                            hover-target="[href='#fullscreen-attributes']">
+                            hover-selector="[href='#fullscreen-attributes']">
                             <h2 class="padding:5px_0px">Attributes</h2>
                             <a
                                 class="margin-left:10px display:none"
@@ -266,11 +266,11 @@
                         class="border-bottom:1px_solid_lightgrey"
                         scroll
                         scroll-intersect="color:dodgerblue"
-                        scroll-target="#fullscreen-demo-section">
+                        scroll-selector="#fullscreen-demo-section">
                         <span
                             class="display:flex align-items:center width:fit-content"
                             hover="display:block!important"
-                            hover-target="[href='#fullscreen-demo']">
+                            hover-selector="[href='#fullscreen-demo']">
                             <h2 class="padding:5px_0px">Demo</h2>
                             <a
                                 class="margin-left:10px display:none"
@@ -294,9 +294,9 @@
                                 <textarea
                                     type="code"
                                     lang="html"
-                                    collection="demos"
-                                    document_id=""
-                                    name="demo"
+                                    array="demos"
+                                    object=""
+                                    key="demo"
                                     save="false"
                                     id="demo"
                                     class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
@@ -319,7 +319,7 @@
                                     show="#eye-slash"
                                     hide="#eye, #demo-preview"
                                     toggle="code-height"
-                                    toggle-target="#demo-code"
+                                    toggle-selector="#demo-code"
                                     ><i
                                         class="height:18px fill:#505050"
                                         src="/assets/svg/eye.svg"></i
@@ -331,7 +331,7 @@
                                     show="#eye, #demo-preview"
                                     hide="#eye-slash"
                                     toggle="code-height"
-                                    toggle-target="#demo-code"
+                                    toggle-selector="#demo-code"
                                     ><i
                                         class="height:20px fill:#505050"
                                         src="/assets/svg/eye-slash.svg"></i
@@ -358,7 +358,7 @@
                                 <a
                                     class="margin-right:5px"
                                     fullscreen
-                                    fullscreen-target="#playground"></a>
+                                    fullscreen-selector="#playground"></a>
                             </div>
                         </div>
                         <!-- End SandBox -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/fullscreen",
-  "version": "1.5.23",
+  "version": "1.7.0",
   "description": "Toggle any html element to view in fullscreen mode. Easy configuration and targeting using the fullscreen and target attribute.",
   "keywords": [
     "fullscreen",
@@ -25,7 +25,7 @@
   },
   "scripts": {
     "start": "npx webpack --config webpack.config.js",
-    "build": "NODE_ENV=production npx webpack --config webpack.config.js",
+    "build": "npx webpack --mode=production --config webpack.config.js",
     "dev": "npx webpack --config webpack.config.js --watch",
     "postinstall": "node -e \"const { execSync } = require('child_process'); try { execSync('coc --version', { stdio: 'ignore' }); } catch (error) { try { execSync('npm install -g @cocreate/cli', { stdio: 'inherit' }); console.log('Installed \"@cocreate/cli\" globally.'); } catch (error) { console.error('Failed to install \"@cocreate/cli\" globally:', error); } }\""
   },
@@ -58,6 +58,7 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/observer": "^1.8.18"
+    "@cocreate/observer": "^1.9.0",
+    "@cocreate/utils": "^1.22.0"
   }
 }

package/src/index.js

@@ -5,6 +5,7 @@
 * https://github.com/CoCreate-app/Fullscreen_Toggle/blob/master/LICENSE
 */
 import observer from '@cocreate/observer';
+import { queryElements } from '@cocreate/utils';
 import './index.css';
 
 function init() {
@@ -17,29 +18,20 @@ function initElements(elements) {
         element.addEventListener("click", function (event) {
             let isFullscreen = element.getAttribute('fullscreen')
             if (!isFullscreen || isFullscreen === 'false') {
-                const fullscreenTarget = element.getAttribute('fullscreen-target');
-                const fullscreenClosest = element.getAttribute('fullscreen-closest');
-                const fullscreenParent = element.getAttribute('fullscreen-parent');
-                const fullscreenNext = element.getAttribute('fullscreen-next');
-                const fullscreenPrevious = element.getAttribute('fullscreen-previous');
-            
-                let target = document.body;
-                if (fullscreenTarget)
-                    target = document.querySelector(fullscreenTarget)
-                else if (fullscreenClosest)
-                    target = element.closest(fullscreenClosest)
-                else if (fullscreenParent)
-                    target = element.parentElement.querySelector(fullscreenParent)
-                else if (fullscreenNext)
-                    target = element.nextElementSibling.querySelector(fullscreenNext)
-                else if (fullscreenPrevious)
-                    target = element.previousElementSibling.querySelector(fullscreenPrevious)
+                let target = queryElements({ element, prefix: 'fullscreen' })
+
+                // TODO: support array?
+                if (target === false)
+                    target = document.body
+                else
+                    target = target[0]
+
                 if (target) {
                     element.setAttribute('fullscreen', true)
                     requestFullscreen(target);
                 }
             } else {
-                element.setAttribute('fullscreen', false)      
+                element.setAttribute('fullscreen', false)
                 exitFullscreen();
             }
         });
@@ -93,16 +85,16 @@ observer.init({
     name: 'CoCreateFullscreen',
     observe: ['addedNodes'],
     target: '[fullscreen]',
-    callback: mutation => 
+    callback: mutation =>
         initElements([mutation.target])
 });
 
 observer.init({
-	name: 'CoCreateFullscreen',
-	observe: ['attributes'],
-	attributeName: ['fullscreen'],
-	target: '[fullscreen]',
-	callback: mutation => {
+    name: 'CoCreateFullscreen',
+    observe: ['attributes'],
+    attributeName: ['fullscreen'],
+    target: '[fullscreen]',
+    callback: mutation => {
         if (mutation.oldValue === null)
             initElements([mutation.target])
     }

package/webpack.config.js

@@ -1,84 +1,90 @@
 const path = require("path")
 const TerserPlugin = require("terser-webpack-plugin")
 const MiniCssExtractPlugin = require("mini-css-extract-plugin")
-let isProduction = process.env.NODE_ENV === "production"
 const { CleanWebpackPlugin } = require("clean-webpack-plugin")
 
-module.exports = {
-  entry: {
-    "CoCreate-fullscreen": "./src/index.js",
-  },
-  output: {
-    path: path.resolve(__dirname, "dist"),
-    filename: isProduction ? "[name].min.js" : "[name].js",
-    libraryTarget: "umd",
-    libraryExport: "default",
-    library: ["CoCreate", "fullscreen"],
-    globalObject: "this",
-  },
+module.exports = (env, argv) => {
+    let isProduction = false
+    if (argv.mode === 'production')
+        isProduction = true
 
-  plugins: [
-    new CleanWebpackPlugin(),
-    new MiniCssExtractPlugin({
-      filename: "[name].css",
-    }),
-  ],
-  // Default mode for Webpack is production.
-  // Depending on mode Webpack will apply different things
-  // on final bundle. For now we don't need production's JavaScript
-  // minifying and other thing so let's set mode to development
-  mode: isProduction ? "production" : "development",
-  module: {
-    rules: [
-      {
-        test: /.js$/,
-        exclude: /(node_modules)/,
-        use: {
-          loader: "babel-loader",
-          options: {
-            plugins: ["@babel/plugin-transform-modules-commonjs"],
-          },
+    const config = {
+        entry: {
+            "CoCreate-fullscreen": "./src/index.js",
         },
-      },
-      {
-        test: /.css$/i,
-        use: [
-          { loader: "style-loader", options: { injectType: "linkTag" } },
-          "file-loader",
+        output: {
+            path: path.resolve(__dirname, "dist"),
+            filename: isProduction ? "[name].min.js" : "[name].js",
+            libraryTarget: "umd",
+            libraryExport: "default",
+            library: ["CoCreate", "fullscreen"],
+            globalObject: "this",
+        },
+
+        plugins: [
+            new CleanWebpackPlugin(),
+            new MiniCssExtractPlugin({
+                filename: "[name].css",
+            }),
         ],
-      },
-    ],
-  },
+        // Default mode for Webpack is production.
+        // Depending on mode Webpack will apply different things
+        // on final bundle. For now we don't need production's JavaScript
+        // minifying and other thing so let's set mode to development
+        mode: isProduction ? "production" : "development",
+        module: {
+            rules: [
+                {
+                    test: /.js$/,
+                    exclude: /(node_modules)/,
+                    use: {
+                        loader: "babel-loader",
+                        options: {
+                            plugins: ["@babel/plugin-transform-modules-commonjs"],
+                        },
+                    },
+                },
+                {
+                    test: /.css$/i,
+                    use: [
+                        { loader: "style-loader", options: { injectType: "linkTag" } },
+                        "file-loader",
+                    ],
+                },
+            ],
+        },
 
-  // add source map
-  ...(isProduction ? {} : { devtool: "eval-source-map" }),
+        // add source map
+        ...(isProduction ? {} : { devtool: "eval-source-map" }),
 
-  optimization: {
-    minimize: true,
-    minimizer: [
-      new TerserPlugin({
-        extractComments: true,
-        // cache: true,
-        parallel: true,
-        // sourceMap: true, // Must be set to true if using source-maps in production
-        terserOptions: {
-          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
-          // extractComments: 'all',
-          compress: {
-            drop_console: true,
-          },
-        },
-      }),
-    ],
-    splitChunks: {
-      chunks: "all",
-      minSize: 200,
-      // maxSize: 99999,
-      //minChunks: 1,
+        optimization: {
+            minimize: true,
+            minimizer: [
+                new TerserPlugin({
+                    extractComments: true,
+                    // cache: true,
+                    parallel: true,
+                    // sourceMap: true, // Must be set to true if using source-maps in production
+                    terserOptions: {
+                        // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
+                        // extractComments: 'all',
+                        compress: {
+                            drop_console: true,
+                        },
+                    },
+                }),
+            ],
+            splitChunks: {
+                chunks: "all",
+                minSize: 200,
+                // maxSize: 99999,
+                //minChunks: 1,
 
-      cacheGroups: {
-        defaultVendors: false,
-      },
-    },
-  },
-}
+                cacheGroups: {
+                    defaultVendors: false,
+                },
+            },
+        },
+    }
+    return config
+}