@cocreate/fullscreen 1.5.5 → 1.5.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,65 +1,65 @@
1
- {
2
- "name": "@cocreate/fullscreen",
3
- "version": "1.5.5",
4
- "description": "Toggle any html element to view in fullscreen mode. Easy configuration and targeting using the fullscreen and target attribute.",
5
- "keywords": [
6
- "fullscreen",
7
- "cocreate",
8
- "low-code-framework",
9
- "no-code-framework",
10
- "cocreatejs",
11
- "cocreatejs-component",
12
- "cocreate-framework",
13
- "no-code",
14
- "low-code",
15
- "collaborative-framework",
16
- "realtime",
17
- "realtime-framework",
18
- "collaboration",
19
- "shared-editing",
20
- "html5-framework",
21
- "javascript-framework"
22
- ],
23
- "publishConfig": {
24
- "access": "public"
25
- },
26
- "scripts": {
27
- "start": "npx webpack --config webpack.config.js",
28
- "build": "NODE_ENV=production npx webpack --config webpack.config.js",
29
- "dev": "npx webpack --config webpack.config.js --watch",
30
- "docs": "node ./node_modules/@cocreate/docs/src/index.js",
31
- "hosting": "node ./node_modules/@cocreate/hosting/src/index.js"
32
- },
33
- "repository": {
34
- "type": "git",
35
- "url": "git+https://github.com/CoCreate-app/CoCreate-fullscreen.git"
36
- },
37
- "author": "CoCreate LLC",
38
- "license": "MIT",
39
- "bugs": {
40
- "url": "https://github.com/CoCreate-app/CoCreate-fullscreen/issues"
41
- },
42
- "homepage": "https://cocreate.app/docs/fullscreen",
43
- "funding": {
44
- "type": "GitHub Sponsors ❤",
45
- "url": "https://github.com/sponsors/CoCreate-app"
46
- },
47
- "main": "./src/index.js",
48
- "devDependencies": {
49
- "@babel/core": "^7.9.6",
50
- "@babel/preset-env": "^7.9.6",
51
- "babel-loader": "^8.1.0",
52
- "clean-webpack-plugin": "^3.0.0",
53
- "file-loader": "^6.2.0",
54
- "mini-css-extract-plugin": "^1.5.0",
55
- "style-loader": "^3.3.1",
56
- "terser-webpack-plugin": "^5.1.1",
57
- "webpack": "^5.24.4",
58
- "webpack-cli": "^4.5.0",
59
- "webpack-log": "^3.0.1"
60
- },
61
- "dependencies": {
62
- "@cocreate/docs": "^1.7.12",
63
- "@cocreate/observer": "^1.7.9"
64
- }
65
- }
1
+ {
2
+ "name": "@cocreate/fullscreen",
3
+ "version": "1.5.7",
4
+ "description": "Toggle any html element to view in fullscreen mode. Easy configuration and targeting using the fullscreen and target attribute.",
5
+ "keywords": [
6
+ "fullscreen",
7
+ "cocreate",
8
+ "low-code-framework",
9
+ "no-code-framework",
10
+ "cocreatejs",
11
+ "cocreatejs-component",
12
+ "cocreate-framework",
13
+ "no-code",
14
+ "low-code",
15
+ "collaborative-framework",
16
+ "realtime",
17
+ "realtime-framework",
18
+ "collaboration",
19
+ "shared-editing",
20
+ "html5-framework",
21
+ "javascript-framework"
22
+ ],
23
+ "publishConfig": {
24
+ "access": "public"
25
+ },
26
+ "scripts": {
27
+ "start": "npx webpack --config webpack.config.js",
28
+ "build": "NODE_ENV=production npx webpack --config webpack.config.js",
29
+ "dev": "npx webpack --config webpack.config.js --watch",
30
+ "docs": "node ./node_modules/@cocreate/docs/src/index.js",
31
+ "hosting": "node ./node_modules/@cocreate/hosting/src/index.js"
32
+ },
33
+ "repository": {
34
+ "type": "git",
35
+ "url": "git+https://github.com/CoCreate-app/CoCreate-fullscreen.git"
36
+ },
37
+ "author": "CoCreate LLC",
38
+ "license": "MIT",
39
+ "bugs": {
40
+ "url": "https://github.com/CoCreate-app/CoCreate-fullscreen/issues"
41
+ },
42
+ "homepage": "https://cocreate.app/docs/fullscreen",
43
+ "funding": {
44
+ "type": "GitHub Sponsors ❤",
45
+ "url": "https://github.com/sponsors/CoCreate-app"
46
+ },
47
+ "main": "./src/index.js",
48
+ "devDependencies": {
49
+ "@babel/core": "^7.9.6",
50
+ "@babel/preset-env": "^7.9.6",
51
+ "babel-loader": "^8.1.0",
52
+ "clean-webpack-plugin": "^3.0.0",
53
+ "file-loader": "^6.2.0",
54
+ "mini-css-extract-plugin": "^1.5.0",
55
+ "style-loader": "^3.3.1",
56
+ "terser-webpack-plugin": "^5.1.1",
57
+ "webpack": "^5.24.4",
58
+ "webpack-cli": "^4.5.0",
59
+ "webpack-log": "^3.0.1"
60
+ },
61
+ "dependencies": {
62
+ "@cocreate/docs": "^1.7.13",
63
+ "@cocreate/observer": "^1.8.0"
64
+ }
65
+ }
package/release.config.js CHANGED
@@ -1,22 +1,22 @@
1
- module.exports = {
2
- dryRun: false,
3
- branches: ["master"],
4
- plugins: [
5
- "@semantic-release/commit-analyzer",
6
- "@semantic-release/release-notes-generator",
7
- [
8
- "@semantic-release/changelog",
9
- {
10
- changelogFile: "CHANGELOG.md",
11
- },
12
- ],
13
- "@semantic-release/npm",
14
- "@semantic-release/github",
15
- [
16
- "@semantic-release/git",
17
- {
18
- assets: ["CHANGELOG.md", "package.json"],
19
- },
20
- ],
21
- ],
1
+ module.exports = {
2
+ dryRun: false,
3
+ branches: ["master"],
4
+ plugins: [
5
+ "@semantic-release/commit-analyzer",
6
+ "@semantic-release/release-notes-generator",
7
+ [
8
+ "@semantic-release/changelog",
9
+ {
10
+ changelogFile: "CHANGELOG.md",
11
+ },
12
+ ],
13
+ "@semantic-release/npm",
14
+ "@semantic-release/github",
15
+ [
16
+ "@semantic-release/git",
17
+ {
18
+ assets: ["CHANGELOG.md", "package.json"],
19
+ },
20
+ ],
21
+ ],
22
22
  };
package/src/index.css CHANGED
@@ -1,13 +1,13 @@
1
- a[fullscreen] i:last-child {
2
- display: none
3
- }
4
- a[fullscreen=true] i:first-child {
5
- display: none
6
- }
7
- a[fullscreen=true] i:last-child {
8
- display: unset
9
- }
10
-
11
- :not(:root):fullscreen::backdrop {
12
- background: none;
13
- }
1
+ a[fullscreen] i:last-child {
2
+ display: none
3
+ }
4
+ a[fullscreen=true] i:first-child {
5
+ display: none
6
+ }
7
+ a[fullscreen=true] i:last-child {
8
+ display: unset
9
+ }
10
+
11
+ :not(:root):fullscreen::backdrop {
12
+ background: none;
13
+ }
package/src/index.js CHANGED
@@ -1,114 +1,114 @@
1
- /*!
2
- * https://cocreate.app
3
- * https://github.com/CoCreate-app/Fullscreen_Toggle
4
- * Released under the MIT license
5
- * https://github.com/CoCreate-app/Fullscreen_Toggle/blob/master/LICENSE
6
- */
7
- import observer from '@cocreate/observer';
8
- import './index.css';
9
-
10
- function init() {
11
- let elements = document.querySelectorAll('[fullscreen]');
12
- initElements(elements)
13
- }
14
-
15
- function initElements(elements) {
16
- for (let element of elements) {
17
- element.addEventListener("click", function (event) {
18
- let isFullscreen = element.getAttribute('fullscreen')
19
- if (!isFullscreen || isFullscreen === 'false') {
20
- const fullscreenTarget = element.getAttribute('fullscreen-target');
21
- const fullscreenClosest = element.getAttribute('fullscreen-closest');
22
- const fullscreenParent = element.getAttribute('fullscreen-parent');
23
- const fullscreenNext = element.getAttribute('fullscreen-next');
24
- const fullscreenPrevious = element.getAttribute('fullscreen-previous');
25
-
26
- let target = document.body;
27
- if (fullscreenTarget)
28
- target = document.querySelector(fullscreenTarget)
29
- else if (fullscreenClosest)
30
- target = element.closest(fullscreenClosest)
31
- else if (fullscreenParent)
32
- target = element.parentElement.querySelector(fullscreenParent)
33
- else if (fullscreenNext)
34
- target = element.nextElementSibling.querySelector(fullscreenNext)
35
- else if (fullscreenPrevious)
36
- target = element.previousElementSibling.querySelector(fullscreenPrevious)
37
- if (target) {
38
- element.setAttribute('fullscreen', true)
39
- requestFullscreen(target);
40
- }
41
- } else {
42
- element.setAttribute('fullscreen', false)
43
- exitFullscreen();
44
- }
45
- });
46
- }
47
- }
48
-
49
- document.addEventListener('fullscreenchange', (event) => {
50
- if (document.fullscreenElement == null) {
51
- let elements = document.querySelectorAll('[fullscreen="true"]');
52
- elements.forEach(elem => {
53
- elem.setAttribute('fullscreen', false)
54
- });
55
- }
56
-
57
- });
58
-
59
- function requestFullscreen(element) {
60
- if (!document.fullscreenElement) {
61
- if (element.requestFullscreen) {
62
- element.requestFullscreen();
63
- } else if (element.webkitRequestFullscreen) {
64
- element.webkitRequestFullscreen();
65
- } else if (element.mozRequestFullScreen) {
66
- element.mozRequestFullScreen();
67
- } else if (element.msRequestFullscreen) {
68
- element.msRequestFullscreen();
69
- } else {
70
- console.log('Fullscreen API is not supported.');
71
- }
72
- }
73
- };
74
-
75
- function exitFullscreen() {
76
- if (document.fullscreenElement) {
77
- if (document.exitFullscreen) {
78
- document.exitFullscreen();
79
- } else if (document.webkitExitFullscreen) {
80
- document.webkitExitFullscreen();
81
- } else if (document.mozCancelFullScreen) {
82
- document.mozCancelFullScreen();
83
- } else if (document.msExitFullscreen) {
84
- document.msExitFullscreen();
85
- } else {
86
- console.log('Fullscreen API is not supported.');
87
- }
88
- }
89
- };
90
-
91
-
92
- observer.init({
93
- name: 'CoCreateFullscreen',
94
- observe: ['addedNodes'],
95
- target: '[fullscreen]',
96
- callback: mutation =>
97
- initElements([mutation.target])
98
- });
99
-
100
- observer.init({
101
- name: 'CoCreateFullscreen',
102
- observe: ['attributes'],
103
- attributeName: ['fullscreen'],
104
- target: '[fullscreen]',
105
- callback: mutation => {
106
- if (mutation.oldValue === null)
107
- initElements([mutation.target])
108
- }
109
- });
110
-
111
-
112
- init()
113
-
1
+ /*!
2
+ * https://cocreate.app
3
+ * https://github.com/CoCreate-app/Fullscreen_Toggle
4
+ * Released under the MIT license
5
+ * https://github.com/CoCreate-app/Fullscreen_Toggle/blob/master/LICENSE
6
+ */
7
+ import observer from '@cocreate/observer';
8
+ import './index.css';
9
+
10
+ function init() {
11
+ let elements = document.querySelectorAll('[fullscreen]');
12
+ initElements(elements)
13
+ }
14
+
15
+ function initElements(elements) {
16
+ for (let element of elements) {
17
+ element.addEventListener("click", function (event) {
18
+ let isFullscreen = element.getAttribute('fullscreen')
19
+ if (!isFullscreen || isFullscreen === 'false') {
20
+ const fullscreenTarget = element.getAttribute('fullscreen-target');
21
+ const fullscreenClosest = element.getAttribute('fullscreen-closest');
22
+ const fullscreenParent = element.getAttribute('fullscreen-parent');
23
+ const fullscreenNext = element.getAttribute('fullscreen-next');
24
+ const fullscreenPrevious = element.getAttribute('fullscreen-previous');
25
+
26
+ let target = document.body;
27
+ if (fullscreenTarget)
28
+ target = document.querySelector(fullscreenTarget)
29
+ else if (fullscreenClosest)
30
+ target = element.closest(fullscreenClosest)
31
+ else if (fullscreenParent)
32
+ target = element.parentElement.querySelector(fullscreenParent)
33
+ else if (fullscreenNext)
34
+ target = element.nextElementSibling.querySelector(fullscreenNext)
35
+ else if (fullscreenPrevious)
36
+ target = element.previousElementSibling.querySelector(fullscreenPrevious)
37
+ if (target) {
38
+ element.setAttribute('fullscreen', true)
39
+ requestFullscreen(target);
40
+ }
41
+ } else {
42
+ element.setAttribute('fullscreen', false)
43
+ exitFullscreen();
44
+ }
45
+ });
46
+ }
47
+ }
48
+
49
+ document.addEventListener('fullscreenchange', (event) => {
50
+ if (document.fullscreenElement == null) {
51
+ let elements = document.querySelectorAll('[fullscreen="true"]');
52
+ elements.forEach(elem => {
53
+ elem.setAttribute('fullscreen', false)
54
+ });
55
+ }
56
+
57
+ });
58
+
59
+ function requestFullscreen(element) {
60
+ if (!document.fullscreenElement) {
61
+ if (element.requestFullscreen) {
62
+ element.requestFullscreen();
63
+ } else if (element.webkitRequestFullscreen) {
64
+ element.webkitRequestFullscreen();
65
+ } else if (element.mozRequestFullScreen) {
66
+ element.mozRequestFullScreen();
67
+ } else if (element.msRequestFullscreen) {
68
+ element.msRequestFullscreen();
69
+ } else {
70
+ console.log('Fullscreen API is not supported.');
71
+ }
72
+ }
73
+ };
74
+
75
+ function exitFullscreen() {
76
+ if (document.fullscreenElement) {
77
+ if (document.exitFullscreen) {
78
+ document.exitFullscreen();
79
+ } else if (document.webkitExitFullscreen) {
80
+ document.webkitExitFullscreen();
81
+ } else if (document.mozCancelFullScreen) {
82
+ document.mozCancelFullScreen();
83
+ } else if (document.msExitFullscreen) {
84
+ document.msExitFullscreen();
85
+ } else {
86
+ console.log('Fullscreen API is not supported.');
87
+ }
88
+ }
89
+ };
90
+
91
+
92
+ observer.init({
93
+ name: 'CoCreateFullscreen',
94
+ observe: ['addedNodes'],
95
+ target: '[fullscreen]',
96
+ callback: mutation =>
97
+ initElements([mutation.target])
98
+ });
99
+
100
+ observer.init({
101
+ name: 'CoCreateFullscreen',
102
+ observe: ['attributes'],
103
+ attributeName: ['fullscreen'],
104
+ target: '[fullscreen]',
105
+ callback: mutation => {
106
+ if (mutation.oldValue === null)
107
+ initElements([mutation.target])
108
+ }
109
+ });
110
+
111
+
112
+ init()
113
+
114
114
  export default { requestFullscreen, exitFullscreen }
package/webpack.config.js CHANGED
@@ -1,84 +1,84 @@
1
- const path = require("path")
2
- const TerserPlugin = require("terser-webpack-plugin")
3
- const MiniCssExtractPlugin = require("mini-css-extract-plugin")
4
- let isProduction = process.env.NODE_ENV === "production"
5
- const { CleanWebpackPlugin } = require("clean-webpack-plugin")
6
-
7
- module.exports = {
8
- entry: {
9
- "CoCreate-fullscreen": "./src/index.js",
10
- },
11
- output: {
12
- path: path.resolve(__dirname, "dist"),
13
- filename: isProduction ? "[name].min.js" : "[name].js",
14
- libraryTarget: "umd",
15
- libraryExport: "default",
16
- library: ["CoCreate", "fullscreen"],
17
- globalObject: "this",
18
- },
19
-
20
- plugins: [
21
- new CleanWebpackPlugin(),
22
- new MiniCssExtractPlugin({
23
- filename: "[name].css",
24
- }),
25
- ],
26
- // Default mode for Webpack is production.
27
- // Depending on mode Webpack will apply different things
28
- // on final bundle. For now we don't need production's JavaScript
29
- // minifying and other thing so let's set mode to development
30
- mode: isProduction ? "production" : "development",
31
- module: {
32
- rules: [
33
- {
34
- test: /.js$/,
35
- exclude: /(node_modules)/,
36
- use: {
37
- loader: "babel-loader",
38
- options: {
39
- plugins: ["@babel/plugin-transform-modules-commonjs"],
40
- },
41
- },
42
- },
43
- {
44
- test: /.css$/i,
45
- use: [
46
- { loader: "style-loader", options: { injectType: "linkTag" } },
47
- "file-loader",
48
- ],
49
- },
50
- ],
51
- },
52
-
53
- // add source map
54
- ...(isProduction ? {} : { devtool: "eval-source-map" }),
55
-
56
- optimization: {
57
- minimize: true,
58
- minimizer: [
59
- new TerserPlugin({
60
- extractComments: true,
61
- // cache: true,
62
- parallel: true,
63
- // sourceMap: true, // Must be set to true if using source-maps in production
64
- terserOptions: {
65
- // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
66
- // extractComments: 'all',
67
- compress: {
68
- drop_console: true,
69
- },
70
- },
71
- }),
72
- ],
73
- splitChunks: {
74
- chunks: "all",
75
- minSize: 200,
76
- // maxSize: 99999,
77
- //minChunks: 1,
78
-
79
- cacheGroups: {
80
- defaultVendors: false,
81
- },
82
- },
83
- },
84
- }
1
+ const path = require("path")
2
+ const TerserPlugin = require("terser-webpack-plugin")
3
+ const MiniCssExtractPlugin = require("mini-css-extract-plugin")
4
+ let isProduction = process.env.NODE_ENV === "production"
5
+ const { CleanWebpackPlugin } = require("clean-webpack-plugin")
6
+
7
+ module.exports = {
8
+ entry: {
9
+ "CoCreate-fullscreen": "./src/index.js",
10
+ },
11
+ output: {
12
+ path: path.resolve(__dirname, "dist"),
13
+ filename: isProduction ? "[name].min.js" : "[name].js",
14
+ libraryTarget: "umd",
15
+ libraryExport: "default",
16
+ library: ["CoCreate", "fullscreen"],
17
+ globalObject: "this",
18
+ },
19
+
20
+ plugins: [
21
+ new CleanWebpackPlugin(),
22
+ new MiniCssExtractPlugin({
23
+ filename: "[name].css",
24
+ }),
25
+ ],
26
+ // Default mode for Webpack is production.
27
+ // Depending on mode Webpack will apply different things
28
+ // on final bundle. For now we don't need production's JavaScript
29
+ // minifying and other thing so let's set mode to development
30
+ mode: isProduction ? "production" : "development",
31
+ module: {
32
+ rules: [
33
+ {
34
+ test: /.js$/,
35
+ exclude: /(node_modules)/,
36
+ use: {
37
+ loader: "babel-loader",
38
+ options: {
39
+ plugins: ["@babel/plugin-transform-modules-commonjs"],
40
+ },
41
+ },
42
+ },
43
+ {
44
+ test: /.css$/i,
45
+ use: [
46
+ { loader: "style-loader", options: { injectType: "linkTag" } },
47
+ "file-loader",
48
+ ],
49
+ },
50
+ ],
51
+ },
52
+
53
+ // add source map
54
+ ...(isProduction ? {} : { devtool: "eval-source-map" }),
55
+
56
+ optimization: {
57
+ minimize: true,
58
+ minimizer: [
59
+ new TerserPlugin({
60
+ extractComments: true,
61
+ // cache: true,
62
+ parallel: true,
63
+ // sourceMap: true, // Must be set to true if using source-maps in production
64
+ terserOptions: {
65
+ // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
66
+ // extractComments: 'all',
67
+ compress: {
68
+ drop_console: true,
69
+ },
70
+ },
71
+ }),
72
+ ],
73
+ splitChunks: {
74
+ chunks: "all",
75
+ minSize: 200,
76
+ // maxSize: 99999,
77
+ //minChunks: 1,
78
+
79
+ cacheGroups: {
80
+ defaultVendors: false,
81
+ },
82
+ },
83
+ },
84
+ }