Skip to content

Commit

Permalink
fix(allowed-elements): Fix inconsistent allowed elements in gridfield
Browse files Browse the repository at this point in the history
  • Loading branch information
Marco (Valandur) committed Jul 9, 2018
1 parent 40f7c90 commit 7556696
Show file tree
Hide file tree
Showing 5 changed files with 119 additions and 99 deletions.
122 changes: 58 additions & 64 deletions javascript/GridFieldPageSectionsExtension.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
(function($) {
$.entwine("ss", function($) {
(function ($) {
$.entwine("ss", function ($) {
// Recursively hide a data-grid row and it's children
var hideRow = function($row) {
var hideRow = function ($row) {
var id = $row.data("id");
$("tr.ss-gridfield-item > .col-treenav[data-parent=" + id + "]").each(
function() {
function () {
hideRow($(this).parent());
}
);
$row.hide();
};

// Hide our custom context menu when not needed
$(document).on("mousedown", function(event) {
$(document).on("mousedown", function (event) {
$parents = $(event.target).parents(".treenav-menu");
if ($parents.length == 0) {
$(".treenav-menu").remove();
Expand All @@ -21,13 +21,12 @@

// Show context menu
$(".ss-gridfield-pagesections tbody").entwine({
addElement: function(id, elemType) {
addElement: function (id, elemType) {
var grid = this.getGridField();

grid.reload({
url: grid.data("url-add"),
data: [
{
data: [{
name: "id",
value: id
},
Expand All @@ -38,13 +37,12 @@
]
});
},
removeElement: function(id, parentId) {
removeElement: function (id, parentId) {
var grid = this.getGridField();

grid.reload({
url: grid.data("url-remove"),
data: [
{
data: [{
name: "id",
value: id
},
Expand All @@ -55,28 +53,26 @@
]
});
},
deleteElement: function(id) {
deleteElement: function (id) {
var grid = this.getGridField();

grid.reload({
url: grid.data("url-delete"),
data: [
{
name: "id",
value: id
}
]
data: [{
name: "id",
value: id
}]
});
},
onadd: function() {
onadd: function () {
var grid = this.getGridField();
var thisGrid = this;

this.find("tr.ss-gridfield-item").each(function() {
this.find("tr.ss-gridfield-item").each(function () {
var $this = $(this);

// actions
$this.find(".col-actions .add-button").click(function(event) {
$this.find(".col-actions .add-button").click(function (event) {
event.preventDefault();
event.stopImmediatePropagation();
$target = $(event.target);
Expand All @@ -87,10 +83,10 @@

var $menu = $(
"<ul id='treenav-menu-" +
id +
"' class='treenav-menu' data-id='" +
id +
"'></ul>"
id +
"' class='treenav-menu' data-id='" +
id +
"'></ul>"
);
$menu.css({
top: event.pageY + "px",
Expand All @@ -100,12 +96,12 @@

$menu.append(
"<li class='header'>" +
ss.i18n._t("PageSections.GridField.AddAChild", "Add a child") +
"</li>"
ss.i18n._t("PageSections.GridField.AddAChild", "Add a child") +
"</li>"
);
$.each(elems, function(key, value) {
$.each(elems, function (key, value) {
var $li = $("<li data-type='" + key + "'>" + value + "</li>");
$li.click(function() {
$li.click(function () {
thisGrid.addElement(rowId, key);
$menu.remove();
});
Expand All @@ -114,7 +110,7 @@
$menu.show();
});

$this.find(".col-actions .delete-button").click(function(event) {
$this.find(".col-actions .delete-button").click(function (event) {
event.preventDefault();
event.stopImmediatePropagation();

Expand All @@ -126,10 +122,10 @@

var $menu = $(
"<ul id='treenav-menu-" +
id +
"' class='treenav-menu' data-id='" +
id +
"'></ul>"
id +
"' class='treenav-menu' data-id='" +
id +
"'></ul>"
);
$menu.css({
top: event.pageY + "px",
Expand All @@ -139,30 +135,30 @@

$menu.append(
"<li class='header'>" +
ss.i18n._t("PageSections.GridField.Delete", "Delete") +
"</li>"
ss.i18n._t("PageSections.GridField.Delete", "Delete") +
"</li>"
);

var $li = $(
"<li data-type='__REMOVE__'>" +
ss.i18n._t("PageSections.GridField.RemoveAChild", "Remove") +
"</li>"
ss.i18n._t("PageSections.GridField.RemoveAChild", "Remove") +
"</li>"
);
$li.click(function() {
$li.click(function () {
thisGrid.removeElement(rowId, parentId);
$menu.remove();
});
$menu.append($li);
if ($target.data("used-count") < 2) {
var $li = $(
"<li>" +
ss.i18n._t(
"PageSections.GridField.DeleteAChild",
"Finally delete"
) +
"</li>"
ss.i18n._t(
"PageSections.GridField.DeleteAChild",
"Finally delete"
) +
"</li>"
);
$li.click(function() {
$li.click(function () {
thisGrid.deleteElement(rowId, $menu.data("parent-id"));
$menu.remove();
});
Expand All @@ -179,18 +175,18 @@
$col = $this.find(".col-reorder");
$col.append(
"<div class='before'>" +
arrowIcon +
"</div><div class='middle'>" +
arrowIcon +
"</div><div class='after'>" +
arrowIcon +
"</div>"
arrowIcon +
"</div><div class='middle'>" +
arrowIcon +
"</div><div class='after'>" +
arrowIcon +
"</div>"
);
$col.find("div").each(function() {
$col.find("div").each(function () {
$(this).droppable({
hoverClass: "state-active",
tolerance: "pointer",
drop: function(event, ui) {
drop: function (event, ui) {
$drop = $(this);

var type = "before";
Expand Down Expand Up @@ -223,8 +219,7 @@

grid.reload({
url: grid.data("url-reorder"),
data: [
{
data: [{
name: "type",
value: type
},
Expand Down Expand Up @@ -270,19 +265,19 @@
hoverClass: "state-active",
tolerance: "pointer",
greedy: true,
helper: function() {
helper: function () {
var $helper = $(
"<div class='col-treenav__draggable'>" +
$this.find(".col-treenav__title").text() +
"</div>"
$this.find(".col-treenav__title").text() +
"</div>"
);
$this.css("opacity", 0.6);

return $helper;
},
start: function() {
start: function () {
var element = $this.data("class");
$(".ui-droppable").each(function() {
$(".ui-droppable").each(function () {
var $drop = $(this);
var $treenav = $drop.parent().siblings(".col-treenav");
var isOpen = $treenav.find("button").hasClass("is-open");
Expand All @@ -309,8 +304,7 @@
($drop.hasClass("before") ||
($drop.hasClass("after") && !isOpen))
) {
var allowed = $treenav.data("allowed-parent-elements");
if (!allowed[element]) return;
if (!$treenav.data("allowed-root")) return;
}
// check our allowed children, or the allowed children of our parent row.
else if (
Expand All @@ -334,7 +328,7 @@
$(this).show();
});
},
stop: function(event, ui) {
stop: function (event, ui) {
$(".ui-droppable").hide();
// Show the previous elements. If the user made an invalid movement then
// we want this to show anyways. If he did something valid the grid will
Expand All @@ -344,7 +338,7 @@
});
});
},
onremove: function() {
onremove: function () {
if (this.data("sortable")) {
this.sortable("destroy");
}
Expand Down
Loading

0 comments on commit 7556696

Please sign in to comment.