From 926f2c438e67f88356bed829462d7555acb9ce3c Mon Sep 17 00:00:00 2001
From: Daniel Schmitzer <noreply@maennchen1.de>
Date: Mon, 16 Jan 2023 08:22:16 +0000
Subject: Feature: Bilder können an Produktgruppen angehängt werden
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

git-svn-id: https://[internal]/wordpress/plugins/wpsg4@8195 0d5edaf7-2b12-4e95-93f4-047927463d4b
---
 views/mods/mod_productgroups/add.phtml           |  81 ++++++++++++++++
 views/mods/mod_productgroups/settings_edit.phtml |   4 +
 views/mods/mod_productgroups/show_2.phtml        |  81 ++++++++++++++++
 views/produkttemplates/standard3.phtml           | 118 +++++++++++++++++++++++
 4 files changed, 284 insertions(+)
 create mode 100644 views/mods/mod_productgroups/show_2.phtml
 create mode 100644 views/produkttemplates/standard3.phtml

diff --git a/views/mods/mod_productgroups/add.phtml b/views/mods/mod_productgroups/add.phtml
index 6de468e..53c7585 100644
--- a/views/mods/mod_productgroups/add.phtml
+++ b/views/mods/mod_productgroups/add.phtml
@@ -4,6 +4,15 @@
 	 * Template für das Anlegen/Bearbeiten einer Produktgruppe
 	 */
 
+    /** @var \wpsg\productgroup|null $oProductgroup */
+    $oProductgroup = null;
+
+    if (intval($_REQUEST['edit_id']??0) > 0) {
+
+        $oProductgroup = wpsg\productgroup::getInstance(intval($_REQUEST['edit_id']));
+
+    }
+
 ?>
 
 <div class="wpsg_productgroups" id="wpsg-bs">
@@ -61,6 +70,78 @@
                         <?php echo wpsg_drawForm_Select('template_file', __('Template', 'wpsg'), $this->view['templates'], $this->view['data']['template_file']); ?>
                         <?php echo wpsg_drawForm_Select('infopage', __('Info Seite', 'wpsg'), $this->view['pages'], $this->view['data']['infopage']); ?>
 
+                        <div class="form-group form-group-sm ">
+                            <label class="col-sm-6 control-label"><?php echo __('Produktgruppenbild', 'wpsg'); ?></label>
+                            <div class="col-sm-6">
+                                <div class="wpsg_field_wrap">
+                                    <div id="imageBox"><?php
+
+                                        if ($oProductgroup !== null) {
+
+                                            if ($oProductgroup->getImage() > 0) {
+
+                                                echo wp_get_attachment_image($oProductgroup->getImage(), 'full', false, [
+                                                    'style' => 'max-width:100%; height:auto; margin-bottom:8px;'
+                                                ]);
+
+                                            }
+
+                                        }
+
+                                    ?></div>
+
+                                    <input value="Mediathek" class="button" type="button" style="text-align:center;" size="10" id="btnAddImgLink" />
+                                    <input type="hidden" name="image" value="<?php echo (($oProductgroup !== null)?$oProductgroup->getImage():0); ?>" id="image_input" />
+
+                                    <script>
+
+                                        let wpframe = undefined;
+                                        let imageBox = document.getElementById('imageBox');
+                                        let elImageInput = document.getElementById('image_input');
+
+                                        document.getElementById('btnAddImgLink').addEventListener('click', (event) => {
+
+                                            event.preventDefault();
+
+                                            if (wpframe !== undefined) { wpframe.open(); return; }
+
+                                            wpframe = wp.media.frames.file_frame = wp.media({
+                                                title: "<?php echo __('Auswählen oder Hochladen von Medien', 'wpsg'); ?>",
+                                                button: { text: "<?php echo __('Medien benutzen', 'wpsg'); ?>" },
+                                                multiple: false
+                                            });
+
+                                            wpframe.on('select', () => {
+
+                                                let attachments = wpframe.state().get('selection').map((attachment) => {
+
+                                                    attachment.toJSON();
+
+                                                    return attachment;
+
+                                                });
+
+                                                for (let i = 0; i < attachments.length; ++i) {
+
+                                                    let attachment = attachments[i];
+
+                                                    imageBox.innerHTML = '<img src="' + attachment.attributes.url + '" alt="" style="max-width:100%; margin-bottom:8px;"/>';
+                                                    elImageInput.value = attachment.attributes.id;
+
+                                                }
+
+                                            });
+
+                                            wpframe.open();
+
+                                        });
+
+                                    </script>
+                                </div>
+                            </div>
+                            <div class="clearfix wpsg_clear"></div>
+                        </div>
+
                     <?php echo wpsg_drawForm_AdminboxEnd(); ?>
 
                 </div>
diff --git a/views/mods/mod_productgroups/settings_edit.phtml b/views/mods/mod_productgroups/settings_edit.phtml
index 6546985..2d00f6c 100644
--- a/views/mods/mod_productgroups/settings_edit.phtml
+++ b/views/mods/mod_productgroups/settings_edit.phtml
@@ -6,6 +6,10 @@
 
 ?>
 <?php echo wpsg_drawForm_Select('wpsg_productgroups_page', __('Produktgruppenübersichtsseite', 'wpsg'), $this->view['pages'], $this->get_option('wpsg_productgroups_page'), array('help' => 'wpsg_mod_productgroups_page')); ?>
+<?php echo wpsg_drawForm_Select('wpsg_productgroups_page_layout', __('Layout der Übersichtsseite', 'wpsg'), [
+    '0' => 'Layout 1 (show.phtml)',
+    '1' => 'Layout 2 (show_2.phml)'
+], $this->get_option('wpsg_productgroups_page_layout'), ['help' => 'wpsg_productgroups_page_layout']); ?>
 <?php echo wpsg_drawForm_Select('wpsg_productgroups_order', __('Sortierung innerhalb der Gruppe', 'wpsg'), array(
 	'id' => __('Nach ID', 'wpsg'),
 	'alphabetisch' => __('Alphabetisch', 'wpsg'),
diff --git a/views/mods/mod_productgroups/show_2.phtml b/views/mods/mod_productgroups/show_2.phtml
new file mode 100644
index 0000000..9c8d12a
--- /dev/null
+++ b/views/mods/mod_productgroups/show_2.phtml
@@ -0,0 +1,81 @@
+<?php
+
+    /** Template für die Anzeige von Produktgruppen Layout 2 */
+
+    namespace wpsg;
+
+    $page_url = \get_permalink(\get_the_ID());
+    $page_url .= ((strpos($page_url, '?') === false)?'?':'&');
+
+    if (isset($_REQUEST['show'])) {
+
+        $oProductgroup = productgroup::getInstance(intval($_REQUEST['show']));
+        $arProducts = $oProductgroup->findProducts();
+        $view = 'products';
+
+    } else {
+
+        $arProductgroups = productgroup::find();
+        $view = 'productgroups';
+
+    }
+
+?>
+
+<div class="wpsg_mod_productgroup_layout2_wrap">
+    <?php if ($view === 'products') { ?>
+
+        <div class="wpsg_mod_productgroup_layout2 products">
+
+            <?php foreach ($arProducts as $oProduct) { ?>
+
+                <?php echo $this->renderProdukt($oProduct->getId(), $oProductgroup->getTemplate()); ?>
+
+            <?php } ?>
+
+            <br />
+
+            <a href="<?php echo $page_url; ?>"><?php echo __('Zurück zur Übersicht', 'wpsg'); ?></a>
+            
+        </div>
+
+    <?php } else if ($view === 'productgroups') { ?>
+
+        <div class="wpsg_mod_productgroup_layout2 productgroups">
+
+            <?php foreach ($arProductgroups as $k => $oProductgroup) { ?>
+
+                <a href="<?php echo $page_url; ?>show=<?php echo $oProductgroup->getId(); ?>" class="productgroup">
+
+                    <div class="title"><?php echo $oProductgroup->getName(); ?></div>
+
+                    <?php echo \wp_get_attachment_image($oProductgroup->getImage(), 'full', false, [
+                        'class' => 'bg'
+                    ]); ?>
+
+                </a>
+
+            <?php } ?>
+
+        </div>
+
+        <style>
+
+            .wpsg_mod_productgroup_layout2.productgroups { all:revert; display:grid; grid-template-columns:repeat(2, 1fr); grid-template-rows:repeat(10, 1fr); grid-column-gap:1rem; grid-row-gap:1rem; }
+            .wpsg_mod_productgroup_layout2.productgroups > .productgroup { grid-column:span 2; padding-top:100%; text-decoration:none; position:relative; overflow:hidden; transition:all 0.3s ease; overflow:hidden width:100%; }
+            .wpsg_mod_productgroup_layout2.productgroups > .productgroup  .bg { position:absolute; left:0; top:0; object-position:50% 50%; background-color:#DEDEDE; width:100%; height:100%; object-fit:cover; z-index:-1; }
+            .wpsg_mod_productgroup_layout2.productgroups > .productgroup .title {  border-radius:2px; transition:all 0.3s ease; position:absolute; left:1rem; top:1rem; background-color:#000000; color:#FFFFFF; padding:0 0.5rem; }
+            .wpsg_mod_productgroup_layout2.productgroups > .productgroup:hover .title { background-color:#FFFFFF; color:#000000; }
+
+            @media screen and (min-width:768px) {
+
+                .wpsg_mod_productgroup_layout2.productgroups > .productgroup { padding-top:initial; grid-column:initial; }
+                .wpsg_mod_productgroup_layout2.productgroups > .productgroup:nth-child(6n + 1),
+                .wpsg_mod_productgroup_layout2.productgroups > .productgroup:nth-child(6n + 5) { grid-row:span 2; padding-top:200px; }
+
+            }
+
+        </style>
+
+    <?php } ?>
+</div>
diff --git a/views/produkttemplates/standard3.phtml b/views/produkttemplates/standard3.phtml
new file mode 100644
index 0000000..c4c7742
--- /dev/null
+++ b/views/produkttemplates/standard3.phtml
@@ -0,0 +1,118 @@
+<?php
+
+	/*
+	 * Template für das Produkt im Frontend Layout 3
+	 */
+
+	/** @var wpsg_product $oProduct */
+	$oProduct = $this->view['oProduct'];
+
+    $arAttachmentIDsAll = $this->imagehandler->getAttachmentIDs($this->view['data']['product_id']);
+
+?>
+
+<div class="wpsg_produkt_wrapper layout3">
+
+    <input type="hidden" name="wpsg_post_id" value="<?php echo get_the_ID(); ?>" />
+	<input type="hidden" name="titleDisplayed" value="<?php echo $this->titleDisplayed; ?>" />
+
+    <div class="col_wrap">
+        <div class="col image">
+            <div class="thumbnails">
+
+                <?php foreach ($arAttachmentIDsAll as $k => $image_id) { ?>
+
+                    <?php echo \wp_get_attachment_image($image_id, 'small', false, [
+                        'data-index' => $k
+                    ]); ?>
+
+                <?php } ?>
+
+            </div>
+            <div class="view">
+                <div class="wpsg_product_slider">
+
+                    <?php foreach ($arAttachmentIDsAll as $k => $image_id) { ?>
+
+                        <div>
+                            <div class="ds_image_zoom">
+                                <?php echo \wp_get_attachment_image($image_id, 'full', false, [
+                                    'data-index' => $k
+                                ]); ?>
+                            </div>
+                        </div>
+
+                    <?php } ?>
+
+                </div>
+            </div>
+        </div>
+        <div>
+            TODO
+        </div>
+    </div>
+
+    <style>
+
+        .wpsg_produkt_wrapper.layout3 .col_wrap { display:flex; width:100%; justify-content:stretch; gap:1rem; }
+        .wpsg_produkt_wrapper.layout3 .col_wrap > * { flex-grow:1; flex-shrink:0; width:0; }
+        .wpsg_produkt_wrapper.layout3 .col_wrap > .col.image { display:flex; justify-content:stretch; gap:0.5rem; }
+        .wpsg_produkt_wrapper.layout3 .col_wrap > .col.image .thumbnails { width:20%; flex-shrink:0; }
+        .wpsg_produkt_wrapper.layout3 .col_wrap > .col.image .thumbnails img { aspect-ratio: 1 / 1; object-fit:cover; object-position:50% 50%; }
+        .wpsg_produkt_wrapper img { max-width:100%; height:auto; }
+
+        .ds_image_zoom.attached { position:relative; overflow:hidden; cursor:-webkit-zoom-in; cursor:zoom-in; }
+        .ds_image_zoom.attached img { all:initial; position:absolute; left:0; top:0; /* transition:width 0.3s, height 0.3s, left 0.3s, top 0.3s; */ }
+
+    </style>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
+    <script src="http://127.0.0.1:8080/dsimagezoom.js"></script>
+
+    <script>
+
+        const slider = tns({
+            container: '.wpsg_product_slider',
+            items: 1,
+            slideBy: 1,
+            controls: false,
+            autoplayButton: false,
+            nav: false,
+            arrowKeys: false,
+            autoplayButtonOutput: false,
+            autoplay: false,
+            autoHeight: true
+        });
+
+        for (const el_tn of document.querySelectorAll('.wpsg_produkt_wrapper.layout3 .thumbnails img')) {
+
+            el_tn.addEventListener('click', (event) => {
+
+                slider.goTo(el_tn.getAttribute('data-index'));
+
+            });
+
+        }
+
+        window.addEventListener('load', () => {
+
+            slider.goTo(0);
+
+        });
+
+        slider.events.on('transitionEnd', (event) => {
+
+            DsImageZoom.init(document.querySelectorAll('.tns-slide-active .ds_image_zoom'));
+
+        });
+
+        slider.events.on('transitionStart', (event) => {
+
+            DsImageZoom.destroy(document.querySelectorAll('.tns-item .ds_image_zoom'));
+
+        });
+
+    </script>
+
+</div>
\ No newline at end of file
-- 
cgit v1.2.3