Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix app tile settings and event handling cleanup [3.0.x] #542

Merged
merged 5 commits into from
May 10, 2023
Merged

Fix app tile settings and event handling cleanup [3.0.x] #542

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
aa8e8cd
fix "app" tile settings modal and draggable handling
petschki May 10, 2023
2f8e294
code cleanup and refactor event handling
petschki May 10, 2023
781564a
yarn upgrade
petschki May 10, 2023
636c721
compile
petschki May 10, 2023
db6d784
changenote
petschki May 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion CHANGES.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ Changelog
3.0.3 (unreleased)
------------------

- Nothing changed yet.
- Fix for `#541 <https://github.com/plone/plone.app.mosaic/issues/541>`_
[petschki]


3.0.2 (2023-04-24)
Expand Down
6 changes: 3 additions & 3 deletions resources/js/mosaic.actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -434,7 +434,6 @@ class ActionManager {
".fieldErrorBox,.portalMessage,.alert,.invalid-feedback",
$mContent
).remove();
initial = false;
}

$('button[name*="cancel"]', $mContent)
Expand All @@ -447,14 +446,15 @@ class ActionManager {
"formActionSuccess",
function (event, response, state, xhr) {
var tileUrl = xhr.getResponseHeader("X-Tile-Url");
if (tileUrl) {
if (tileUrl && initial) {
mosaic.layoutManager.addAppTileHTML(
tile_type,
response,
tileUrl
);
m.hide();
initial = false;
}
m.hide();
}
);
m.show();
Expand Down
134 changes: 62 additions & 72 deletions resources/js/mosaic.layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import "regenerator-runtime/runtime"; // needed for ``await`` support
import $ from "jquery";
import logging from "@patternslib/patternslib/src/core/logging";
import events from "@patternslib/patternslib/src/core/events";
import Tile from "./mosaic.tile";
import "./mosaic.overlay";

Expand Down Expand Up @@ -153,32 +154,17 @@ export default class LayoutManager {
self.mosaic.panels.addClass("mosaic-panel-dragging mosaic-panel-dragging-new");

// Add helper
$(self.mosaic.panels.get(0)).append(
$(self.mosaic.document.createElement("div"))
.addClass("mosaic-grid-row")
.append(
$(self.mosaic.document.createElement("div"))
.addClass("mosaic-grid-cell col")
.append(
$(self.mosaic.document.createElement("div"))
.addClass(
"movable removable mosaic-tile mosaic-" + type + "-tile"
)
.append(
$(self.mosaic.document.createElement("div"))
.addClass("mosaic-tile-content")
.attr(
"data-tileUrl",
tileUrl && tileUrl.replace(/&/gim, "&amp;")
)
.html(value)
)
.addClass(
"mosaic-helper-tile mosaic-helper-tile-new mosaic-original-tile"
)
)
)
);
const add_helper = document.createElement("div");
add_helper.classList.add("mosaic-grid-row");
add_helper.innerHTML =
`<div class="mosaic-grid-cell col">
<div class="movable removable mosaic-tile mosaic-${type}-tile mosaic-helper-tile mosaic-helper-tile-new mosaic-original-tile">
<div class="mosaic-tile-content" data-tileUrl="${tileUrl && tileUrl.replace(/&/gim, "&amp;")}">
${value}
</div>
</div>
</div>`;
self.mosaic.panels[0].append(add_helper);

// Set helper min size
var helper = self.mosaic.panels.find(".mosaic-helper-tile-new");
Expand Down Expand Up @@ -365,10 +351,11 @@ export default class LayoutManager {

// Keydown handler
var DocumentKeydown = function (e) {
const _document = self.mosaic.document;
// Tab key
if (e.keyCode === 9) {
// blur all active tiles. and set focus
for(const tile of self.mosaic.document.querySelectorAll(".mosaic-selected-tile")) {
for(const tile of _document.querySelectorAll(".mosaic-selected-tile")) {
tile["mosaic-tile"].blur();
}
// focus new tile
Expand All @@ -379,44 +366,51 @@ export default class LayoutManager {
}
// Check if alt
if (e.keyCode === 18) {
if ($(".mosaic-panel", self.mosaic.document).hasClass("mosaic-advanced")) {
$(".mosaic-panel", self.mosaic.document).removeClass("mosaic-advanced");
if ($(".mosaic-panel", _document).hasClass("mosaic-advanced")) {
$(".mosaic-panel", _document).removeClass("mosaic-advanced");
} else {
var date = new Date();
$(".mosaic-panel", self.mosaic.document).addClass("mosaic-advanced");
$(".mosaic-panel", self.mosaic.document).data(
$(".mosaic-panel", _document).addClass("mosaic-advanced");
$(".mosaic-panel", _document).data(
"advanced-enabled",
date.getTime()
);
}
}
// Check if ctrl
if (e.keyCode === 17) {
$(".mosaic-panel", self.mosaic.document).addClass("inner-subcolumn");
$(".mosaic-panel", _document).addClass("inner-subcolumn");
}

// Check if esc
if (e.keyCode === 27) {
// Check if dragging
var original_tile = $(".mosaic-original-tile", self.mosaic.document);
var original_tile = _document.querySelectorAll(".mosaic-original-tile");
if (original_tile.length > 0) {
original_tile.each(function () {
$(this).addClass("mosaic-drag-cancel");
if ($(this).hasClass("mosaic-helper-tile-new")) {
$(document).trigger("mousedown");
} else {
$(document).trigger("mouseup");
original_tile.forEach(tile => {
tile.classList.add("mosaic-drag-cancel");
if (tile.classList.contains("mosaic-helper-tile-new")) {
// dismiss dragging tile
tile.remove();
// Remove dragging class from content
self.mosaic.panels.removeClass(
"mosaic-panel-dragging mosaic-panel-dragging-new"
);
// Hide all dividers
$(".mosaic-selected-divider", self.mosaic.document).removeClass(
"mosaic-selected-divider"
);
}
});
// Deselect tile
} else {
$(".mosaic-selected-tile", self.mosaic.document).each(function () {
$(".mosaic-selected-tile", _document).each(function () {
$(this).trigger("blur");
});
}

// Find resize helper
$(".mosaic-resize-handle-helper", self.mosaic.document).each(function () {
$(".mosaic-resize-handle-helper", _document).each(function () {
// Remove resizing state
$(this).parents("[data-panel]").removeClass("mosaic-panel-resizing");
$(this).parent().removeClass("mosaic-row-resizing");
Expand All @@ -434,13 +428,13 @@ export default class LayoutManager {
};

// Bind event and add to array
$(self.mosaic.document).off("keydown").on("keydown", DocumentKeydown);
$(self.mosaic.document).off("keyup").on("keyup", DocumentKeyup);
events.add_event_listener(self.mosaic.document, "keydown", "pat-layout--keydown", DocumentKeydown);
events.add_event_listener(self.mosaic.document, "keyup", "pat-layout--keyup", DocumentKeyup);

// Add deselect
var DocumentMousedown = function (e) {
const DocumentMousedown = function (e) {
// Get element
var elm;
let elm;
if (e.target) {
elm = e.target;
} else if (e.srcElement) {
Expand Down Expand Up @@ -468,7 +462,6 @@ export default class LayoutManager {
// Deselect tiles
self.mosaic.document.querySelectorAll(".mosaic-selected-tile").forEach(function(el) {
el.classList.remove("mosaic-selected-tile");
$(el).data("mosaic-tile").blur();
});

// Set actions
Expand All @@ -478,17 +471,15 @@ export default class LayoutManager {
};

// Bind event and add to array
$(self.mosaic.document)
.off("mousedown")
.on("mousedown", DocumentMousedown);
events.add_event_listener(self.mosaic.document, "mousedown", "pat-layout--mousedown", DocumentMousedown)

// Handle mouse move event: when holding down mouse left button and dragging the handler left or right.
var DocumentMousemove = function (e) {
const DocumentMousemove = function (e) {

// Find resize helper
$(".mosaic-helper-tile-new", self.mosaic.document).each(function () {
// Get offset
var offset = $(this).parent().offset();
const offset = $(this).parent().offset();

// Get mouse x
$(this).css("top", e.pageY + 3 - offset.top);
Expand Down Expand Up @@ -591,12 +582,12 @@ export default class LayoutManager {
};

// Bind event and add to array
$(self.mosaic.document).off("mousemove").on("mousemove", DocumentMousemove);
$(self.mosaic.document).off("dragover").on("dragover", DocumentMousemove);
events.add_event_listener(self.mosaic.document, "mousemove", "pat-layout--mousemove", DocumentMousemove);
events.add_event_listener(self.mosaic.document, "dragover", "pat-layout--dragover", DocumentMousemove);

// Handle mouse up event
// When resizing is done on mouse up event apply the changes to the div elements
var DocumentMouseup = function () {
const DocumentMouseup = function () {
// Find resize helper
$(".mosaic-resize-handle-helper", self.mosaic.document).each(function () {
var resize_handle_index = $(this).data("resize_handle_index");
Expand Down Expand Up @@ -664,10 +655,10 @@ export default class LayoutManager {
};

// Bind event
$(self.mosaic.document).off("mouseup").on("mouseup", DocumentMouseup);
events.add_event_listener(self.mosaic.document, "mouseup", "pat-layout--mouseup", DocumentMouseup);

// Handle mousemove on tile
var TileMousemove = function (e) {
const TileMousemove = function (e) {
// only if dragging
if ($(this).parents("[data-panel]").hasClass("mosaic-panel-dragging") === false) {
return;
Expand Down Expand Up @@ -722,17 +713,10 @@ export default class LayoutManager {
};

// Bind events
$(self.mosaic.document)
.off("mousemove", ".mosaic-tile")
.on("mousemove", ".mosaic-tile", TileMousemove);
$(self.mosaic.document)
.off("dragover", ".mosaic-tile")
.on("dragover", ".mosaic-tile", TileMousemove);

// On click select the current tile
$(self.mosaic.document)
.off("click", ".mosaic-tile")
.on("click", ".mosaic-tile", function (e) {
self.mosaic.document.querySelectorAll(".mosaic-tile").forEach(tile => {
events.add_event_listener(tile, "mousemove", "pat-layout--mousemove-tile", TileMousemove);
events.add_event_listener(tile, "dragover", "pat-layout--dragover-tile", TileMousemove);
events.add_event_listener(tile, "click", "pat-layout--click-tile", function (e) {
if ($(".mosaic-helper-tile-new", self.mosaic.document).length === 0) {
// only if not dropping tile
if($(this).data("mosaic-tile")) {
Expand All @@ -741,7 +725,9 @@ export default class LayoutManager {
}
});

var applyCustomCss = function (e) {
});

const applyCustomCss = function (e) {
if ($(e.target).attr("id") === "custom-css-input-box") {
return;
}
Expand All @@ -758,7 +744,7 @@ export default class LayoutManager {
});
};

var CustomCSSOnDblClick = function (e) {
const CustomCSSOnDblClick = function (e) {
// Only do this for "mosaic-grid-row" if advanced mode is enabled
var target = $(e.target);
var obj = target.parents("[data-panel]");
Expand Down Expand Up @@ -789,9 +775,10 @@ export default class LayoutManager {
target.append(div);
}
};

$(self.mosaic.document).on("dblclick", ".mosaic-grid-row", CustomCSSOnDblClick);
$(self.mosaic.document).on("click", applyCustomCss);
self.mosaic.document.querySelectorAll(".mosaic-grid-row").forEach(gridrow => {
events.add_event_listener(gridrow, "dblclick", "pat-layout--dblclick-gridrow", CustomCSSOnDblClick);
})
events.add_event_listener(self.mosaic.document, "click", "pat-layout--click", applyCustomCss);
}

initialize_panels() {
Expand Down Expand Up @@ -1270,6 +1257,9 @@ export default class LayoutManager {
// Add empty rows
self.mosaic.panels.mosaicAddEmptyRows();

// re-initialize events
self.init_events();

// Select new tile and make it draggables
if (new_tile && original_tile.length > 0) {
original_tile.mosaicAddDrag();
Expand Down
38 changes: 21 additions & 17 deletions resources/js/mosaic.pattern.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import SaveLayoutTemplate from "./templates/save_layout.xml";
import ManageLayoutsTemplate from "./templates/manage_layouts.xml";
import DeleteLayoutTemplate from "./templates/delete_layout.xml";

logging.setLevel("INFO");
const log = logging.getLogger("pat-mosaic");

function validTile(el) {
Expand Down Expand Up @@ -56,27 +55,18 @@ export default Base.extend({
deleteLayoutTemplate: _.template(DeleteLayoutTemplate),

init: async function() {
var self = this;
const self = this;

import("../scss/mosaic.pattern.scss");

// extend options
// XXX: check possibility to clone options cleanly -> see multiple tinymce instances
self.options = $.extend(true, self.default, self.options.data, self.options);

// main page
self.document = window.document;

// init actionManager
const ActionManager = (await import("./mosaic.actions")).default;
self.actionManager = new ActionManager(self);
self.actionManager.initActions();

// init layoutManager
const LayoutManager = (await import("./mosaic.layout")).default;
self.layoutManager = new LayoutManager(self);
self.options = {
...self.default,
...JSON.parse(JSON.stringify(self.options.data)),
...self.options,
};

var match;
let match;
self.options.url = window.document.location.href;

// Get the url of the page
Expand All @@ -95,6 +85,20 @@ export default Base.extend({
self.options.ignore_context = true;
}

log.debug(self.options);

// main page
self.document = window.document;

// init actionManager
const ActionManager = (await import("./mosaic.actions")).default;
self.actionManager = new ActionManager(self);
self.actionManager.initActions();

// init layoutManager
const LayoutManager = (await import("./mosaic.layout")).default;
self.layoutManager = new LayoutManager(self);

const contentLayout = self.getSelectedContentLayout();
if (contentLayout) {
await self.applyLayout(contentLayout);
Expand Down
2 changes: 2 additions & 0 deletions src/plone/app/mosaic/browser/static/chunks/10151.751c96e575a5216026cc.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading