GH-72: WIP fullscreen toogle

magicsunday · Oct 23, 2024 · ba83068 · ba83068
1 parent e0c8201
commit ba83068
Show file tree

Hide file tree

Showing 36 changed files with 549 additions and 336 deletions.
diff --git a/resources/css/pedigree-chart.css b/resources/css/pedigree-chart.css
@@ -1,3 +1,65 @@
+/* Button toolbar */
+.webtrees-pedigree-fullscreen-container::backdrop {
+    background-color: var(--bs-body-bg);
+}
+
+.webtrees-pedigree-fullscreen-container {
+    position: relative;
+    padding-left: 0 !important;
+    padding-right: 0 !important;;
+}
+
+.webtrees-pedigree-fullscreen-container .btn-toolbar {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    padding-left: calc(var(--bs-gutter-x) * .5);
+    padding-right: calc(var(--bs-gutter-x) * .5);
+}
+
+.webtrees-pedigree-fullscreen-container .chart-button {
+    color: var(--bs-btn-bg);
+    background: rgb(245, 245, 245);
+    border: 1px outset rgb(200, 200, 200);
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    position: relative;
+}
+
+.webtrees-pedigree-fullscreen-container .chart-button .icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.webtrees-pedigree-fullscreen-container .chart-button .icon .svg-inline--fa {
+    height: 1.5em;
+    vertical-align: -0.375em;
+}
+
+.webtrees-pedigree-fullscreen-container .chart-button:hover {
+    color: var(--link-color-hover);
+}
+
+.webtrees-pedigree-fullscreen-container .fullscreen-button span:nth-child(2) {
+    display: none;
+}
+
+[fullscreen] .webtrees-pedigree-fullscreen-container .fullscreen-button span:nth-child(1) {
+    display: none;
+}
+
+[fullscreen] .webtrees-pedigree-fullscreen-container .fullscreen-button span:nth-child(2) {
+    display: inline-block;
+}
+
 /* Form */
 .form-element-description {
     -webkit-box-decoration-break: clone;
@@ -17,12 +79,15 @@
     flex: auto;
 }
 
+[fullscreen] .webtrees-pedigree-chart-container {
+    min-height: 100dvh;
+    max-height: 100dvh;
+}
+
 .webtrees-pedigree-chart-container svg {
     display: block;
-    margin: auto;
     cursor: grab;
-    /*-webkit-filter: drop-shadow(3px 1px 3px rgba(0, 0, 0, 0.4));*/
-    /*filter: drop-shadow(3px 1px 3px rgba(0, 0, 0, 0.4));*/
+    padding: 0 10px 10px 10px;
 }
 
 .webtrees-pedigree-chart-container svg:active {

diff --git a/resources/css/svg.css b/resources/css/svg.css
@@ -1,6 +1,12 @@
 /* SVG export styles */
 .webtrees-pedigree-chart-container svg {
     min-height: 600px;
+    /*min-height: 75dvh;*/
+    /*max-height: 100dvh;*/
+}
+
+[fullscreen] .webtrees-pedigree-chart-container svg {
+    /*min-height: 100dvh;*/
 }
 
 /* Required for the exported SVG to display properly in Inkscape */

diff --git a/resources/js/modules/custom/configuration.js b/resources/js/modules/custom/configuration.js
@@ -20,14 +20,14 @@ export default class Configuration
     /**
      * Constructor.
      *
-     * @param {String[]} labels
-     * @param {Number}   generations
-     * @param {Boolean}  showEmptyBoxes
-     * @param {String}   treeLayout
-     * @param {Boolean}  openNewTabOnClick
-     * @param {Boolean}  showAlternativeName
-     * @param {Boolean}  rtl
-     * @param {Number}   direction
+     * @param {string[]} labels
+     * @param {number}   generations
+     * @param {boolean}  showEmptyBoxes
+     * @param {string}   treeLayout
+     * @param {boolean}  openNewTabOnClick
+     * @param {boolean}  showAlternativeName
+     * @param {boolean}  rtl
+     * @param {number}   direction
      */
     constructor(
         labels,
@@ -77,7 +77,7 @@ export default class Configuration
     /**
      * Returns the number of generations to display.
      *
-     * @returns {Number}
+     * @returns {number}
      */
     get generations()
     {
@@ -87,7 +87,7 @@ export default class Configuration
     /**
      * Sets the number of generations to display.
      *
-     * @param {Number} value The number of generations to display
+     * @param {number} value The number of generations to display
      */
     set generations(value)
     {
@@ -97,7 +97,7 @@ export default class Configuration
     /**
      * Returns whether to show or hide empty boxes.
      *
-     * @returns {Boolean}
+     * @returns {boolean}
      */
     get showEmptyBoxes()
     {
@@ -107,7 +107,7 @@ export default class Configuration
     /**
      * Returns the tree layout.
      *
-     * @returns {String}
+     * @returns {string}
      */
     get treeLayout()
     {
@@ -117,7 +117,7 @@ export default class Configuration
     /**
      * Sets the tree layout.
      *
-     * @param {String} value Tree layout value
+     * @param {string} value Tree layout value
      */
     set treeLayout(value)
     {
@@ -137,7 +137,7 @@ export default class Configuration
     /**
      * Returns TRUE or FALSE depending on whether to open the current individual's details page in a new tab.
      *
-     * @returns {Boolean}
+     * @returns {boolean}
      */
     get openNewTabOnClick()
     {
@@ -147,7 +147,7 @@ export default class Configuration
     /**
      * Returns whether to show or hide the alternative name.
      *
-     * @returns {Boolean}
+     * @returns {boolean}
      */
     get showAlternativeName()
     {

diff --git a/resources/js/modules/custom/data.js b/resources/js/modules/custom/data.js
@@ -18,27 +18,27 @@ import {Node} from "../lib/d3";
 /**
  * The plain person data.
  *
- * @typedef {Object} Data
- * @property {Number}   id              The unique ID of the person
- * @property {String}   xref            The unique identifier of the person
- * @property {String}   sex             The sex of the person
- * @property {String}   birth           The birthdate of the person
- * @property {String}   death           The death date of the person
- * @property {String}   timespan        The lifetime description
- * @property {String}   thumbnail       The URL of the thumbnail image
- * @property {String}   name            The full name of the individual
- * @property {String}   preferredName   The preferred first name
- * @property {String[]} firstNames      The list of first names
- * @property {String[]} lastNames       The list of last names
- * @property {String}   alternativeName The alternative name of the individual
+ * @typedef {object} Data
+ * @property {number}   id              The unique ID of the person
+ * @property {string}   xref            The unique identifier of the person
+ * @property {string}   sex             The sex of the person
+ * @property {string}   birth           The birthdate of the person
+ * @property {string}   death           The death date of the person
+ * @property {string}   timespan        The lifetime description
+ * @property {string}   thumbnail       The URL of the thumbnail image
+ * @property {string}   name            The full name of the individual
+ * @property {string}   preferredName   The preferred first name
+ * @property {string[]} firstNames      The list of first names
+ * @property {string[]} lastNames       The list of last names
+ * @property {string}   alternativeName The alternative name of the individual
  */
 
 /**
  * A person object.
  *
- * @typedef {Object} Person
+ * @typedef {object} Person
  * @property {null|Data}          data     The data object of the individual
- * @property {undefined|Object[]} parents  The list of the parents of this individual
+ * @property {undefined|object[]} parents  The list of the parents of this individual
  */
 
 /**
@@ -47,38 +47,38 @@ import {Node} from "../lib/d3";
  * @typedef {Node} Individual
  * @property {Person}       data     The individual data
  * @property {Individual[]} children The children of the node
- * @property {Number}       x        The X-coordinate of the node
- * @property {Number}       y        The Y-coordinate of the node
+ * @property {number}       x        The X-coordinate of the node
+ * @property {number}       y        The Y-coordinate of the node
  */
 
 /**
  * An X/Y coordinate.
  *
- * @typedef {Object} Coordinate
- * @property {Number} x The X-coordinate
- * @property {Number} y The Y-coordinate
+ * @typedef {object} Coordinate
+ * @property {number} x The X-coordinate
+ * @property {number} y The Y-coordinate
  */
 
 /**
  * A link between two nodes.
  *
- * @typedef {Object} Link
+ * @typedef {object} Link
  * @property {Individual} source The source individual
  * @property {Individual} target The target individual
  */
 
 /**
- * @typedef {Object} NameElementData
+ * @typedef {object} NameElementData
  * @property {Data}    data
- * @property {Boolean} isRtl
- * @property {Boolean} isAltRtl
- * @property {Boolean} withImage
+ * @property {boolean} isRtl
+ * @property {boolean} isAltRtl
+ * @property {boolean} withImage
  */
 
 /**
- * @typedef {Object} LabelElementData
- * @property {String}  label
- * @property {Boolean} isPreferred
- * @property {Boolean} isLastName
- * @property {Boolean} isNameRtl
+ * @typedef {object} LabelElementData
+ * @property {string}  label
+ * @property {boolean} isPreferred
+ * @property {boolean} isLastName
+ * @property {boolean} isNameRtl
  */
diff --git a/resources/js/modules/custom/hierarchy.js b/resources/js/modules/custom/hierarchy.js
@@ -34,7 +34,7 @@ export default class Hierarchy
     /**
      * Initialize the hierarchical chart data.
      *
-     * @param {Object} datum The JSON encoded chart data
+     * @param {object} datum The JSON encoded chart data
      */
     init(datum)
     {
@@ -130,8 +130,8 @@ export default class Hierarchy
     /**
      * Create an empty child node object.
      *
-     * @param {Number} generation Generation of the node
-     * @param {String} sex        The sex of the individual
+     * @param {number} generation Generation of the node
+     * @param {string} sex        The sex of the individual
      *
      * @returns {Data}
      *

diff --git a/resources/js/modules/custom/tree.js b/resources/js/modules/custom/tree.js
@@ -45,7 +45,7 @@ export default class Tree
     /**
      * Draw the tree.
      *
-     * @param {Object} source The root object
+     * @param {object} source The root object
      *
      * @public
      */