Movable div

Discussions and requests related to new CMSimple features, plugins, templates etc. and how to develop.
Please don't ask for support at this forums!
lck
Posts: 2955
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Movable div

Post by lck » Tue May 30, 2017 11:14 am

Tata wrote:Wie wäre es dann mit der Option den Switcher fix oder beweglich zu machen? Ich habe es in *.js versucht.
Beispiel siehe Draggable with Javascript oder hier.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Movable div

Post by Tata » Tue May 30, 2017 12:11 pm

Klar. Das habe ich auch gegoogelt und versucht. Nur kann ich es in Plugin nichr implementieren. Als Funktionaufruf hat es auch geklappt. Nur dann war es doppelt im Template und entw. Funkzionierte das Dragging ohne Plugin's wirkung, oder funkzionierte dee Plugin, aber nicht das Draging. Es scheint mir mehr sinnvoll den DragScript in Plugin direkt einzubinden.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Movable div

Post by cmb » Tue May 30, 2017 1:11 pm

Tata wrote:Es scheint mir mehr sinnvoll den DragScript in Plugin direkt einzubinden.
Das finde ich nicht, denn ein solches Dragging kann auch für andere Elemente interessant sein, nicht nur für den Themeswitcher. Dann müsste der praktisch gleiche Code auch in andere Plugins integriert werden, was zusätzlichen Aufwand darstellt.

Dass das Umschalten des <select> nicht mehr funktioniert, ist eigentlich klar, weil ja für ein umliegendes Element einen mousedown Listener registriert wurde, und dort explizit preventDefault() aufgerufen wird.

Hier also mal der für Themeswitcher angepasste Code:

Code: Select all

(function () {

    if (!("visibilityState" in document)) {
        return;
    }
    
    /**
     * Simplified version of drag() from
     * "JavaScript: The Definitive Guide"  by David Flanagan
     */
    function drag(element, event) {
        var startX = event.clientX + window.pageXOffset;
        var startY = event.clientY + window.pageYOffset;
    
        var origX = element.offsetLeft;
        var origY = element.offsetTop;
    
        var deltaX = startX - origX;
        var deltaY = startY - origY;
    
        document.addEventListener("mousemove", moveHandler, true);
        document.addEventListener("mouseup", upHandler, true);
    
        event.stopPropagation();
        event.preventDefault();
    
        function moveHandler(e) {
            element.style.left = (e.clientX + window.pageXOffset - deltaX) + "px";
            element.style.top = (e.clientY + window.pageYOffset - deltaY) + "px";
            e.stopPropagation();
        }
    
        function upHandler(e) {
            document.removeEventListener("mousemove", moveHandler, true);
            document.removeEventListener("mouseup", upHandler, true);
            e.stopPropagation();
        }
    }
    
    document.addEventListener("DOMContentLoaded", function () {
        var each = Array.prototype.forEach;
        var forms = document.getElementsByClassName("themeswitcher_select_form");
        each.call(forms, function (form) {
            form.style.position = "absolute";
            each.call(form.getElementsByTagName("label"), function (label) {
                label.onmousedown = (function (e) {
                    drag(this.parentNode, e);
                });
            });
        });
    });

}());
Diesen habe ich im Installationsverzeichnis von CMSimple_XH als drag.js gespeichert, und binde ihn in cmsimple/userfuncs.php wie folgt ein:

Code: Select all

<?php

$hjs .= '<script src="' . $pth['folder']['base'] . 'drag.js"></script>';
Dann sollte alles automatisch passieren (einen aktuellen Browser vorausgesetzt; IE 9 und älter werden nicht unterstützt). Verschieben kann man den Themeswitcher nun nur noch per <label> ("Theme"), und das Umschalten des Themes klappt wie gewünscht. Einzig sollte man .themeswitcher_select_form wohl noch eine Hintergrundfarbe und einen hohen z-index zuweisen, sonst sieht man das Widget u.U. nicht mehr.

PS: Man könnte noch Cookies setzen, so dass die Position des Themeswitchers auch bei einem Seitenwechsel erhalten bleibt.
Christoph M. Becker – Plugins for CMSimple_XH

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Movable div

Post by Tata » Tue May 30, 2017 2:49 pm

Einfach und genial!!! Sollte wohl mit neuer PluginVersion geliefert werden und die userfuncs wohl auch.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Post Reply