Option zur Identifizierung der tpp-buttons zwecks Positionierung

Zendesk API User

• 16 mai 2018 12:45

Author: adormann-twt
Publication Date: 5/16/2018 12:45

Hallo zusammen!

Gibt es bereits eine Option mit der man die Position der .tpp-buttons beeinflussen oder ein .tpp-buttons-Element via CSS zu einem Decorator zuordnen kann?

Konkret gestaltet sich in unserem Projekt folgende Herausforderung:

Wir haben eine Absatzvorlage mit der man verlinkte Boxen pflegen kann. Diese besitzen ein Bild, Text und einen Link. Diese Boxen befinden sich in einem FS_CATALOG.

Darüber hinaus rendert die SPA bereits eigene TPP Decorator für Bilder (für den direkten Bildzuschnitt) und FS_CATALOG Items (für die direkte Bearbeitung einer Box ohne Umweg über die Maske der Absatzvorlage). Jedes Bild und jeder FS_CATALOG Gegenstand zeichnet in der Applikation also bereits einen eigenen TPP-Rahmen.

Daraus ergibt sich ein Problem: Die Buttons überlappen sich (im Screenshot rot eingekreist). Befindet man sich mit der Maus auf dem Bild, dann wird der Rahmen der Absatzvorlage, der der Box und der des Bildes, also der gesamten "Elternkette" des Decorators gleichzeitig angezeigt.

Für diesen Fall wäre es ideal, wenn man den Zuschnitt-Button des Bildes statt rechts oben, links oben im TPP-Rahmen platzieren könnte. Noch viel besser wäre die Möglichkeit, einem TPP-Decorator bei Erstellung eine CSS-Klasse übergeben zu können, die im DOM später auf die tpp-borders-<div> Elemente gelegt werden.

Aktuell können einzelne Buttons mithilfe der Klasse oder data-Attributen zwar gezielt vom CSS angesteuert werden – deren Container aber nicht. Alle tpp-borders-Elemente können nicht unterschieden werden, man weiß nie welche tpp-borders zu welchem Decorator gehören und somit können Buttons bspw. auch nicht über CSS anders verankert werden (siehe Anhang "DOM tpp-borders.png").

Besteht dafür bereits eine Lösung oder kann mit diesem ".tpp-buttons"-Mapping vielleicht demnächst rechnen? :smileywink:

Viele Grüße,

Alex

Tags: tpp

Associé à

• TPP
• OCM
• Third Party Preview

0

• 

  Zendesk API User

  • 12 août 2025 22:48

  Author: rebbert - 5/17/2018 9:44
  

  Für Nachfragen. Ticket-Nummer: CORE-8093

  0
• 

  Zendesk API User

  • 12 août 2025 22:48

  Author: rebbert - 5/17/2018 9:32
  

  Hallo Alex,

  sehr guter Punkt. Ich sehe grad auf Anhieb keinen Quick-Fix. Ich nehme aber gerne eine Ticket auf.

  Von der Idee her würden wir Decorate.element erweitern um einen Parameter borderClass

  decorate.element = function ($el, previewId, context) 
  wird
  decorate.element = function ($el, previewId, context, borderClass)

  (Das schreit hier langsam nach einem Parameter-Objekt :smileygrin: )

  Und diese class wird zusätzlich dem tpp-borders div hinzugefügt.

  <div class="tpp-borders cropImageBorder">...</div>
  <div class="tpp-borders sectionBorder">...</div>
  

  usw.

  Damit sollten sich komfortable Selektoren bauen lassen oder?

  Weitere Wünsche oder Anmerkungen?

  Moritz

  0
• 

  Zendesk API User

  • 12 août 2025 22:48

  Author: adormann-twt - 5/18/2018 8:00
  

  Hallo Moritz,

  ja, das klingt prima (Parameter Object ebenfalls :smileywink: )!

  Viele Grüße,

  Alex

  0
• 

  Zendesk API User

  • 12 août 2025 22:48

  Author: Peter_Jodeleit - 2/14/2019 14:15
  

  Hallo Alex,

  In der SNAP-Variante der API wird der Bildzuschnitt jetzt rechts unten im Rahmen eingeblendet.
  Grundsätzlich ist die Herangehensweise (auch für den ContentCreator) ein Inline-Styling z.B. mit "margin-top: -20px; padding-top: 20px;", da sich die Rahmen am element-offset orientieren.

  Hilft das? LG

  0

Vous devez vous connecter pour laisser un commentaire.