feat(popover): rename angle to arrow

Author: nolimits4web

src/core/components/popover/popover-class.js

@@ -62,13 +62,13 @@ class Popover extends Modal {
       }
     }
 
-    // Find Angle
-    let $angleEl;
-    if ($el.find('.popover-angle').length === 0 && popover.params.angle) {
-      $angleEl = $('<div class="popover-angle"></div>');
-      $el.prepend($angleEl);
+    // Find Arrow
+    let $arrowEl;
+    if ($el.find('.popover-arrow').length === 0 && popover.params.arrow) {
+      $arrowEl = $('<div class="popover-arrow"></div>');
+      $el.prepend($arrowEl);
     } else {
-      $angleEl = $el.find('.popover-angle');
+      $arrowEl = $el.find('.popover-arrow');
     }
 
     // Open
@@ -80,8 +80,8 @@ class Popover extends Modal {
       el: $el[0],
       $targetEl,
       targetEl: $targetEl[0],
-      $angleEl,
-      angleEl: $angleEl[0],
+      $arrowEl,
+      arrowEl: $arrowEl[0],
       $backdropEl,
       backdropEl: $backdropEl && $backdropEl[0],
       type: 'popover',
@@ -184,18 +184,18 @@ class Popover extends Modal {
 
   resize() {
     const popover = this;
-    const { app, $el, $targetEl, $angleEl } = popover;
+    const { app, $el, $targetEl, $arrowEl } = popover;
     const { targetX, targetY, verticalPosition } = popover.params;
     $el.css({ left: '', top: '' });
     const [width, height] = [$el.width(), $el.height()];
-    let angleSize = 0;
-    let angleLeft;
-    let angleTop;
-    const hasAngle = $angleEl.length > 0;
-    const angleMin = app.theme === 'ios' ? 13 : 24;
-    if (hasAngle) {
-      $angleEl.removeClass('on-left on-right on-top on-bottom').css({ left: '', top: '' });
-      angleSize = $angleEl.width() / 2;
+    let arrowSize = 0;
+    let arrowLeft;
+    let arrowTop;
+    const hasArrow = $arrowEl.length > 0;
+    const arrowMin = app.theme === 'ios' ? 13 : 24;
+    if (hasArrow) {
+      $arrowEl.removeClass('on-left on-right on-top on-bottom').css({ left: '', top: '' });
+      arrowSize = $arrowEl.width() / 2;
     }
     $el
       .removeClass(
@@ -239,17 +239,17 @@ class Popover extends Modal {
 
     if (
       forcedPosition === 'top' ||
-      (!forcedPosition && height + angleSize < targetOffsetTop - safeAreaTop)
+      (!forcedPosition && height + arrowSize < targetOffsetTop - safeAreaTop)
     ) {
       // On top
-      top = targetOffsetTop - height - angleSize;
+      top = targetOffsetTop - height - arrowSize;
     } else if (
       forcedPosition === 'bottom' ||
-      (!forcedPosition && height + angleSize < app.height - targetOffsetTop - targetHeight)
+      (!forcedPosition && height + arrowSize < app.height - targetOffsetTop - targetHeight)
     ) {
       // On bottom
       position = 'bottom';
-      top = targetOffsetTop + targetHeight + angleSize;
+      top = targetOffsetTop + targetHeight + arrowSize;
     } else {
       // On middle
       position = 'middle';
@@ -272,30 +272,30 @@ class Popover extends Modal {
       }
 
       diff -= left;
-      if (hasAngle) {
+      if (hasArrow) {
         if (position === 'top') {
-          $angleEl.addClass('on-bottom');
+          $arrowEl.addClass('on-bottom');
         }
         if (position === 'bottom') {
-          $angleEl.addClass('on-top');
+          $arrowEl.addClass('on-top');
         }
-        angleLeft = width / 2 - angleSize + diff;
-        angleLeft = Math.max(Math.min(angleLeft, width - angleSize * 2 - angleMin), angleMin);
-        $angleEl.css({ left: `${angleLeft}px` });
+        arrowLeft = width / 2 - arrowSize + diff;
+        arrowLeft = Math.max(Math.min(arrowLeft, width - arrowSize * 2 - arrowMin), arrowMin);
+        $arrowEl.css({ left: `${arrowLeft}px` });
       }
     } else if (position === 'middle') {
-      left = targetOffsetLeft - width - angleSize;
-      if (hasAngle) $angleEl.addClass('on-right');
+      left = targetOffsetLeft - width - arrowSize;
+      if (hasArrow) $arrowEl.addClass('on-right');
       if (left < 5 || left + width + safeAreaRight > app.width || left < safeAreaLeft) {
-        if (left < 5) left = targetOffsetLeft + targetWidth + angleSize;
+        if (left < 5) left = targetOffsetLeft + targetWidth + arrowSize;
         if (left + width + safeAreaRight > app.width) left = app.width - width - 5 - safeAreaRight;
         if (left < safeAreaLeft) left = safeAreaLeft;
-        if (hasAngle) $angleEl.removeClass('on-right').addClass('on-left');
+        if (hasArrow) $arrowEl.removeClass('on-right').addClass('on-left');
       }
-      if (hasAngle) {
-        angleTop = height / 2 - angleSize + diff;
-        angleTop = Math.max(Math.min(angleTop, height - angleSize * 2 - angleMin), angleMin);
-        $angleEl.css({ top: `${angleTop}px` });
+      if (hasArrow) {
+        arrowTop = height / 2 - arrowSize + diff;
+        arrowTop = Math.max(Math.min(arrowTop, height - arrowSize * 2 - arrowMin), arrowMin);
+        $arrowEl.css({ top: `${arrowTop}px` });
       }
     }
 

src/core/components/popover/popover.d.ts

@@ -23,8 +23,8 @@ export namespace Popover {
     el?: HTMLElement | CSSSelector;
     /** Full Popover HTML layout string. Can be useful if you want to create Popover element dynamically. */
     content?: string;
-    /** Enables Popover angle/corner. (default true) */
-    angle?: boolean;
+    /** Enables Popover arrow/corner. (default true) */
+    arrow?: boolean;
     /** Enables Popover backdrop (dark semi transparent layer behind). (default true) */
     backdrop?: boolean;
     /** Backdrop element to share across instances */

src/core/components/popover/popover.js

@@ -8,7 +8,7 @@ export default {
   params: {
     popover: {
       verticalPosition: 'auto',
-      angle: true,
+      arrow: true,
       backdrop: true,
       backdropEl: undefined,
       backdropUnique: false,

src/core/components/popover/popover.less

@@ -110,7 +110,7 @@
     justify-content: center;
   }
 }
-.popover-angle {
+.popover-arrow {
   width: 26px;
   height: 26px;
   position: absolute;

src/react/components/popover.jsx

@@ -17,7 +17,7 @@ import { Popover } from 'framework7/types';
   opened? : boolean
   animate? : boolean
   targetEl? : string | object
-  angle? : boolean
+  arrow? : boolean
   backdrop? : boolean
   backdropEl? : string | object
   closeByBackdropClick? : boolean
@@ -44,7 +44,7 @@ const Popover = forwardRef((props, ref) => {
     opened,
     animate,
     targetEl,
-    angle,
+    arrow,
     backdrop,
     backdropEl,
     closeByBackdropClick,
@@ -110,7 +110,7 @@ const Popover = forwardRef((props, ref) => {
     if ('closeByBackdropClick' in props) popoverParams.closeByBackdropClick = closeByBackdropClick;
     if ('closeByOutsideClick' in props) popoverParams.closeByOutsideClick = closeByOutsideClick;
     if ('closeOnEscape' in props) popoverParams.closeOnEscape = closeOnEscape;
-    if ('angle' in props) popoverParams.angle = angle;
+    if ('arrow' in props) popoverParams.arrow = arrow;
     if ('backdrop' in props) popoverParams.backdrop = backdrop;
     if ('backdropEl' in props) popoverParams.backdropEl = backdropEl;
     if ('animate' in props) popoverParams.animate = animate;
@@ -155,7 +155,7 @@ const Popover = forwardRef((props, ref) => {
 
   return (
     <div id={id} style={style} className={classes} ref={elRef} {...extraAttrs}>
-      <div className="popover-angle" />
+      <div className="popover-arrow" />
       <div className="popover-inner">{children}</div>
     </div>
   );

src/svelte/components/popover.svelte

@@ -15,7 +15,7 @@
   export let opened = undefined;
   export let animate = undefined;
   export let targetEl = undefined;
-  export let angle = undefined;
+  export let arrow = undefined;
   export let backdrop = undefined;
   export let backdropEl = undefined;
   export let closeByBackdropClick = undefined;
@@ -95,7 +95,7 @@
     if (typeof closeByOutsideClick !== 'undefined')
       params.closeByOutsideClick = closeByOutsideClick;
     if (typeof closeOnEscape !== 'undefined') params.closeOnEscape = closeOnEscape;
-    if (typeof angle !== 'undefined') params.angle = angle;
+    if (typeof arrow !== 'undefined') params.arrow = arrow;
     if (typeof backdrop !== 'undefined') params.backdrop = backdrop;
     if (typeof backdropEl !== 'undefined') params.backdropEl = backdropEl;
     if (typeof containerEl !== 'undefined') params.containerEl = containerEl;
@@ -116,7 +116,7 @@
 </script>
 
 <div class={classes} bind:this={el} {style} {...restProps($$restProps)}>
-  <div class="popover-angle" />
+  <div class="popover-arrow" />
   <div class="popover-inner">
     <slot popover={f7Popover} />
   </div>

src/vue/components/popover.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="elRef" :class="classes">
-    <div class="popover-angle" />
+    <div class="popover-arrow" />
     <div class="popover-inner"><slot /></div>
   </div>
 </template>
@@ -23,7 +23,7 @@ export default {
       type: [String, Object],
       default: undefined,
     },
-    angle: {
+    arrow: {
       type: Boolean,
       default: undefined,
     },
@@ -113,7 +113,7 @@ export default {
         closeByBackdropClick,
         closeByOutsideClick,
         closeOnEscape,
-        angle,
+        arrow,
         backdrop,
         backdropEl,
         containerEl,
@@ -125,7 +125,7 @@ export default {
       if (typeof closeByOutsideClick !== 'undefined')
         popoverParams.closeByOutsideClick = closeByOutsideClick;
       if (typeof closeOnEscape !== 'undefined') popoverParams.closeOnEscape = closeOnEscape;
-      if (typeof angle !== 'undefined') popoverParams.angle = angle;
+      if (typeof arrow !== 'undefined') popoverParams.arrow = arrow;
       if (typeof backdrop !== 'undefined') popoverParams.backdrop = backdrop;
       if (typeof backdropEl !== 'undefined') popoverParams.backdropEl = backdropEl;
       if (typeof containerEl !== 'undefined') popoverParams.containerEl = containerEl;