silverstripe-framework/admin/client/dist/js/LeftAndMain.Tree.js

(function (global, factory) {
	if (typeof define === "function" && define.amd) {
		define('ss.LeftAndMain.Tree', ['jQuery'], factory);
	} else if (typeof exports !== "undefined") {
		factory(require('jQuery'));
	} else {
		var mod = {
			exports: {}
		};
		factory(global.jQuery);
		global.ssLeftAndMainTree = mod.exports;
	}
})(this, function (_jQuery) {
	'use strict';

	var _jQuery2 = _interopRequireDefault(_jQuery);

	function _interopRequireDefault(obj) {
		return obj && obj.__esModule ? obj : {
			default: obj
		};
	}

	_jQuery2.default.entwine('ss.tree', function ($) {

		$('.cms-tree').entwine({

			Hints: null,

			IsUpdatingTree: false,

			IsLoaded: false,

			onadd: function onadd() {
				this._super();

				if ($.isNumeric(this.data('jstree_instance_id'))) return;

				var hints = this.attr('data-hints');
				if (hints) this.setHints($.parseJSON(hints));

				var self = this;
				this.jstree(this.getTreeConfig()).bind('loaded.jstree', function (e, data) {
					self.setIsLoaded(true);

					data.inst._set_settings({ 'html_data': { 'ajax': {
								'url': self.data('urlTree'),
								'data': function data(node) {
									var params = self.data('searchparams') || [];

									params = $.grep(params, function (n, i) {
										return n.name != 'ID' && n.name != 'value';
									});
									params.push({ name: 'ID', value: $(node).data("id") ? $(node).data("id") : 0 });
									params.push({ name: 'ajax', value: 1 });
									return params;
								}
							} } });

					self.updateFromEditForm();
					self.css('visibility', 'visible');

					data.inst.hide_checkboxes();
				}).bind('before.jstree', function (e, data) {
					if (data.func == 'start_drag') {
						if (!self.hasClass('draggable') || self.hasClass('multiselect')) {
							e.stopImmediatePropagation();
							return false;
						}
					}

					if ($.inArray(data.func, ['check_node', 'uncheck_node'])) {
						var node = $(data.args[0]).parents('li:first');
						var allowedChildren = node.find('li:not(.disabled)');

						if (node.hasClass('disabled') && allowedChildren == 0) {
							e.stopImmediatePropagation();
							return false;
						}
					}
				}).bind('move_node.jstree', function (e, data) {
					if (self.getIsUpdatingTree()) return;

					var movedNode = data.rslt.o,
					    newParentNode = data.rslt.np,
					    oldParentNode = data.inst._get_parent(movedNode),
					    newParentID = $(newParentNode).data('id') || 0,
					    nodeID = $(movedNode).data('id');
					var siblingIDs = $.map($(movedNode).siblings().andSelf(), function (el) {
						return $(el).data('id');
					});

					$.ajax({
						'url': $.path.addSearchParams(self.data('urlSavetreenode'), self.data('extraParams')),
						'type': 'POST',
						'data': {
							ID: nodeID,
							ParentID: newParentID,
							SiblingIDs: siblingIDs
						},
						success: function success() {
							if ($('.cms-edit-form :input[name=ID]').val() == nodeID) {
								$('.cms-edit-form :input[name=ParentID]').val(newParentID);
							}
							self.updateNodesFromServer([nodeID]);
						},
						statusCode: {
							403: function _() {
								$.jstree.rollback(data.rlbk);
							}
						}
					});
				}).bind('select_node.jstree check_node.jstree uncheck_node.jstree', function (e, data) {
					$(document).triggerHandler(e, data);
				});
			},
			onremove: function onremove() {
				this.jstree('destroy');
				this._super();
			},

			'from .cms-container': {
				onafterstatechange: function onafterstatechange(e) {
					this.updateFromEditForm();
				}
			},

			'from .cms-container form': {
				onaftersubmitform: function onaftersubmitform(e) {
					var id = $('.cms-edit-form :input[name=ID]').val();

					this.updateNodesFromServer([id]);
				}
			},

			getTreeConfig: function getTreeConfig() {
				var self = this;
				return {
					'core': {
						'initially_open': ['record-0'],
						'animation': 0,
						'html_titles': true
					},
					'html_data': {},
					'ui': {
						"select_limit": 1,
						'initially_select': [this.find('.current').attr('id')]
					},
					"crrm": {
						'move': {
							'check_move': function check_move(data) {
								var movedNode = $(data.o),
								    newParent = $(data.np),
								    isMovedOntoContainer = data.ot.get_container()[0] == data.np[0],
								    movedNodeClass = movedNode.getClassname(),
								    newParentClass = newParent.getClassname(),
								    hints = self.getHints(),
								    disallowedChildren = [],
								    hintKey = newParentClass ? newParentClass : 'Root',
								    hint = hints && typeof hints[hintKey] != 'undefined' ? hints[hintKey] : null;

								if (hint && movedNode.attr('class').match(/VirtualPage-([^\s]*)/)) movedNodeClass = RegExp.$1;

								if (hint) disallowedChildren = typeof hint.disallowedChildren != 'undefined' ? hint.disallowedChildren : [];
								var isAllowed = movedNode.data('id') !== 0 && !movedNode.hasClass('status-archived') && (!isMovedOntoContainer || data.p == 'inside') && !newParent.hasClass('nochildren') && (!disallowedChildren.length || $.inArray(movedNodeClass, disallowedChildren) == -1);

								return isAllowed;
							}
						}
					},
					'dnd': {
						"drop_target": false,
						"drag_target": false
					},
					'checkbox': {
						'two_state': true
					},
					'themes': {
						'theme': 'apple',
						'url': $('body').data('frameworkpath') + '/thirdparty/jstree/themes/apple/style.css'
					},

					'plugins': ['html_data', 'ui', 'dnd', 'crrm', 'themes', 'checkbox']
				};
			},

			search: function search(params, callback) {
				if (params) this.data('searchparams', params);else this.removeData('searchparams');
				this.jstree('refresh', -1, callback);
			},

			getNodeByID: function getNodeByID(id) {
				return this.find('*[data-id=' + id + ']');
			},

			createNode: function createNode(html, data, callback) {
				var self = this,
				    parentNode = data.ParentID !== void 0 ? self.getNodeByID(data.ParentID) : false,
				    newNode = $(html);

				var properties = { data: '' };
				if (newNode.hasClass('jstree-open')) {
					properties.state = 'open';
				} else if (newNode.hasClass('jstree-closed')) {
					properties.state = 'closed';
				}
				this.jstree('create_node', parentNode.length ? parentNode : -1, 'last', properties, function (node) {
					var origClasses = node.attr('class');

					for (var i = 0; i < newNode[0].attributes.length; i++) {
						var attr = newNode[0].attributes[i];
						node.attr(attr.name, attr.value);
					}

					node.addClass(origClasses).html(newNode.html());
					callback(node);
				});
			},

			updateNode: function updateNode(node, html, data) {
				var self = this,
				    newNode = $(html),
				    origClasses = node.attr('class');

				var nextNode = data.NextID ? this.getNodeByID(data.NextID) : false;
				var prevNode = data.PrevID ? this.getNodeByID(data.PrevID) : false;
				var parentNode = data.ParentID ? this.getNodeByID(data.ParentID) : false;

				$.each(['id', 'style', 'class', 'data-pagetype'], function (i, attrName) {
					node.attr(attrName, newNode.attr(attrName));
				});

				origClasses = origClasses.replace(/status-[^\s]*/, '');

				var origChildren = node.children('ul').detach();
				node.addClass(origClasses).html(newNode.html()).append(origChildren);

				if (nextNode && nextNode.length) {
					this.jstree('move_node', node, nextNode, 'before');
				} else if (prevNode && prevNode.length) {
					this.jstree('move_node', node, prevNode, 'after');
				} else {
					this.jstree('move_node', node, parentNode.length ? parentNode : -1);
				}
			},

			updateFromEditForm: function updateFromEditForm() {
				var node,
				    id = $('.cms-edit-form :input[name=ID]').val();
				if (id) {
					node = this.getNodeByID(id);
					if (node.length) {
						this.jstree('deselect_all');
						this.jstree('select_node', node);
					} else {
						this.updateNodesFromServer([id]);
					}
				} else {
					this.jstree('deselect_all');
				}
			},

			updateNodesFromServer: function updateNodesFromServer(ids) {
				if (this.getIsUpdatingTree() || !this.getIsLoaded()) return;

				var self = this,
				    i,
				    includesNewNode = false;
				this.setIsUpdatingTree(true);
				self.jstree('save_selected');

				var correctStateFn = function correctStateFn(node) {
					self.getNodeByID(node.data('id')).not(node).remove();

					self.jstree('deselect_all');
					self.jstree('select_node', node);
				};

				self.jstree('open_node', this.getNodeByID(0));
				self.jstree('save_opened');
				self.jstree('save_selected');

				$.ajax({
					url: $.path.addSearchParams(this.data('urlUpdatetreenodes'), 'ids=' + ids.join(',')),
					dataType: 'json',
					success: function success(data, xhr) {
						$.each(data, function (nodeId, nodeData) {
							var node = self.getNodeByID(nodeId);

							if (!nodeData) {
								self.jstree('delete_node', node);
								return;
							}

							if (node.length) {
								self.updateNode(node, nodeData.html, nodeData);
								setTimeout(function () {
									correctStateFn(node);
								}, 500);
							} else {
								includesNewNode = true;

								if (nodeData.ParentID && !self.find('li[data-id=' + nodeData.ParentID + ']').length) {
									self.jstree('load_node', -1, function () {
										newNode = self.find('li[data-id=' + nodeId + ']');
										correctStateFn(newNode);
									});
								} else {
									self.createNode(nodeData.html, nodeData, function (newNode) {
										correctStateFn(newNode);
									});
								}
							}
						});

						if (!includesNewNode) {
							self.jstree('deselect_all');
							self.jstree('reselect');
							self.jstree('reopen');
						}
					},
					complete: function complete() {
						self.setIsUpdatingTree(false);
					}
				});
			}

		});

		$('.cms-tree.multiple').entwine({
			onmatch: function onmatch() {
				this._super();
				this.jstree('show_checkboxes');
			},
			onunmatch: function onunmatch() {
				this._super();
				this.jstree('uncheck_all');
				this.jstree('hide_checkboxes');
			},

			getSelectedIDs: function getSelectedIDs() {
				return $(this).jstree('get_checked').not('.disabled').map(function () {
					return $(this).data('id');
				}).get();
			}
		});

		$('.cms-tree li').entwine({
			setEnabled: function setEnabled(bool) {
				this.toggleClass('disabled', !bool);
			},

			getClassname: function getClassname() {
				var matches = this.attr('class').match(/class-([^\s]*)/i);
				return matches ? matches[1] : '';
			},

			getID: function getID() {
				return this.data('id');
			}
		});
	});
});