@eeacms/volto-resize-helper - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

CHANGELOG.md

@@ -7,4 +7,11 @@ ### Changelog
 
+#### [0.2.0](https://github.com/eea/volto-resize-helper/compare/0.1.1...0.2.0)
+
+- Better way to get screen & page sizes [`#1`](https://github.com/eea/volto-resize-helper/pull/1)
+
 #### [0.1.1](https://github.com/eea/volto-resize-helper/compare/0.1.0...0.1.1)
 
+> 31 May 2021
+
+- Release 0.1.1 [`9e01658`](https://github.com/eea/volto-resize-helper/commit/9e01658d140cba59e478fd8bd55f07f48cdd3729)
 - Update Readme [`b302ea3`](https://github.com/eea/volto-resize-helper/commit/b302ea334c06858cc8d83cdd638f37f1f53f9cb4)
@@ -11,0 +18,0 @@ - Delay on resize with 350ms to cover semantic ui container animation [`82f5c98`](https://github.com/eea/volto-resize-helper/commit/82f5c98ca8d8e3cc2d84d62786d78e3d5b5adb61)

package.json

 {
   "name": "@eeacms/volto-resize-helper",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "@eeacms/volto-resize-helper: Volto add-on",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/actions.js

@@ -7,1 +7,8 @@ export const setScreen = (screen = {}) => {
 };
+
+export const updateScreen = (screen = {}) => {
+  return {
+    type: 'UPDATE_SCREEN',
+    screen,
+  };
+};

src/ScreenSize/index.js

 import ScreenSize from './ScreenSize';
 
 export default (config) => {
+  config.settings.resizeDebounce = 350; // Measured in milliseconds
+
   config.settings.appExtras = [
@@ -5,0 +7,0 @@ ...(config.settings.appExtras || []),

src/ScreenSize/ScreenSize.jsx

@@ -5,9 +5,6 @@ /* eslint-disable no-extend-native */
 import { compose } from 'redux';
-import { setScreen } from '../actions';
+import config from '@plone/volto/registry';
+import { updateScreen } from '../actions';
 import { detectTouchScreen } from '../utils';
 
-const pixelToNumber = (pixel) => {
-  return parseInt(pixel.replace('px', ''));
-};
-
 Number.prototype.toPixel = function toPixel() {
@@ -21,3 +18,3 @@ return `${this}px`;
     if (timer) clearTimeout(timer);
-    timer = setTimeout(func, 350, event);
+    timer = setTimeout(func, config.settings.resizeDebounce, event);
   };
@@ -27,43 +24,23 @@ };
 const ScreenSize = (props) => {
-  const updateScreen = (e) => {
-    const screenHeight =
-      window.innerHeight ||
-      document.documentElement.clientHeight ||
-      document.body.clientHeight ||
-      0;
-    const screenWidth =
-      window.innerWidth ||
-      document.documentElement.clientWidth ||
-      document.body.clientWidth ||
-      0;
-    const headerWrapper = document.querySelector(
-      '.header-wrapper:not(.mobile)',
-    );
-    const contentArea = document.querySelector('.ui.segment.content-area');
-    const toolbar = document.querySelector('#toolbar .toolbar.expanded');
-    const firstHeading = document.querySelector('.documentFirstHeading');
-    const headerWrapperStyle = headerWrapper
-      ? window.getComputedStyle(headerWrapper)
-      : {};
-    const contentAreaStyle =
-      contentArea && !firstHeading
-        ? window.getComputedStyle(contentArea)
-        : { marginTop: '0px', paddingTop: '0px' };
+  const updateScreen = (initialState = {}) => {
+    const screen = {
+      height: window.screen.availHeight || 0,
+      width: window.screen.availWidth || 0,
+    };
 
-    const offsetHeight =
-      (headerWrapperStyle.display !== 'none'
-        ? headerWrapper?.offsetHeight || 0
-        : 0) +
-      (pixelToNumber(contentAreaStyle.marginTop) +
-        pixelToNumber(contentAreaStyle.paddingTop) || 0) +
-      ((toolbar?.offsetHeight || 0) < screenHeight
-        ? toolbar?.offsetHeight || 0
-        : 0);
+    const page = {
+      height: window.innerHeight || 0,
+      width: window.innerWidth || 0,
+    };
+
     const newScreen = {
-      screenHeight,
-      screenWidth,
-      offsetHeight,
+      ...initialState,
+      ...screen,
+      page,
+      content: {
+        offsetTop: document.querySelector('div.content-area').offsetTop,
+      },
     };
 
-    props.setScreen({ ...props.screen, ...newScreen });
+    props.updateScreen(newScreen);
   };
@@ -73,12 +50,7 @@
     if (__CLIENT__) {
-      updateScreen();
-
-      const IS_TOUCHSCREEN = detectTouchScreen();
-      if (IS_TOUCHSCREEN) {
-        window.addEventListener('orientationchange', function () {
-          setTimeout(debounce(updateScreen), 500);
-        });
-      } else {
-        window.addEventListener('resize', debounce(updateScreen));
-      }
+      updateScreen({
+        hasTouchScreen: detectTouchScreen(),
+        browserToolbarHeight: window.outerHeight - window.innerHeight,
+      });
+      window.addEventListener('resize', debounce(updateScreen));
     }
@@ -88,3 +60,2 @@ return () => {
         window.removeEventListener('resize', debounce(updateScreen));
-        window.removeEventListener('orientationchange', debounce(updateScreen));
       }
@@ -100,7 +71,7 @@ };
   connect(
-    (state, props) => ({
+    (state) => ({
       screen: state.screen,
     }),
-    { setScreen },
+    { updateScreen },
   ),
 )(ScreenSize);

src/store.js

@@ -7,2 +7,7 @@ const initialState = {};
       return {
+        ...action.screen,
+      };
+
+    case 'UPDATE_SCREEN':
+      return {
         ...state,
@@ -9,0 +14,0 @@ ...action.screen,

No alert changes

Worsened metrics

Total package byte prevSize

40854

decreased by-1.3%

Lines of code

635

decreased by-2.61%

No dependency changes