|
|
@@ -206,3 +206,207 @@ escapeActions.forEach(actionName => {
|
|
|
},
|
|
|
);
|
|
|
});
|
|
|
+
|
|
|
+// Prevent @member mentions on Add Comment input field
|
|
|
+// from closing card, part 5.
|
|
|
+// This duplicate below of above popup function is needed, because at
|
|
|
+// wekan/components/main/editor.js at bottom is popping up visible
|
|
|
+// @member mention, and it seems to trigger closing also card popup,
|
|
|
+// so in below closing popup is disabled.
|
|
|
+window.PopupNoClose = new (class {
|
|
|
+ constructor() {
|
|
|
+ // The template we use to render popups
|
|
|
+ this.template = Template.popup;
|
|
|
+
|
|
|
+ // We only want to display one popup at a time and we keep the view object
|
|
|
+ // in this `Popup.current` variable. If there is no popup currently opened
|
|
|
+ // the value is `null`.
|
|
|
+ this.current = null;
|
|
|
+
|
|
|
+ // It's possible to open a sub-popup B from a popup A. In that case we keep
|
|
|
+ // the data of popup A so we can return back to it. Every time we open a new
|
|
|
+ // popup the stack grows, every time we go back the stack decrease, and if
|
|
|
+ // we close the popup the stack is reseted to the empty stack [].
|
|
|
+ this._stack = [];
|
|
|
+
|
|
|
+ // We invalidate this internal dependency every time the top of the stack
|
|
|
+ // has changed and we want to re-render a popup with the new top-stack data.
|
|
|
+ this._dep = new Tracker.Dependency();
|
|
|
+ }
|
|
|
+
|
|
|
+ /// This function returns a callback that can be used in an event map:
|
|
|
+ /// Template.tplName.events({
|
|
|
+ /// 'click .elementClass': Popup.open("popupName"),
|
|
|
+ /// });
|
|
|
+ /// The popup inherit the data context of its parent.
|
|
|
+ open(name) {
|
|
|
+ const self = this;
|
|
|
+ const popupName = `${name}Popup`;
|
|
|
+ function clickFromPopup(evt) {
|
|
|
+ return $(evt.target).closest('.js-pop-over').length !== 0;
|
|
|
+ }
|
|
|
+ return function(evt) {
|
|
|
+ // If a popup is already opened, clicking again on the opener element
|
|
|
+ // should close it -- and interrupt the current `open` function.
|
|
|
+ /*
|
|
|
+ if (self.isOpen()) {
|
|
|
+ const previousOpenerElement = self._getTopStack().openerElement;
|
|
|
+ if (previousOpenerElement === evt.currentTarget) {
|
|
|
+ self.close();
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ $(previousOpenerElement).removeClass('is-active');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ */
|
|
|
+ // We determine the `openerElement` (the DOM element that is being clicked
|
|
|
+ // and the one we take in reference to position the popup) from the event
|
|
|
+ // if the popup has no parent, or from the parent `openerElement` if it
|
|
|
+ // has one. This allows us to position a sub-popup exactly at the same
|
|
|
+ // position than its parent.
|
|
|
+ let openerElement;
|
|
|
+ if (clickFromPopup(evt)) {
|
|
|
+ openerElement = self._getTopStack().openerElement;
|
|
|
+ } else {
|
|
|
+ self._stack = [];
|
|
|
+ openerElement = evt.currentTarget;
|
|
|
+ }
|
|
|
+ $(openerElement).addClass('is-active');
|
|
|
+ evt.preventDefault();
|
|
|
+
|
|
|
+ // We push our popup data to the stack. The top of the stack is always
|
|
|
+ // used as the data source for our current popup.
|
|
|
+ self._stack.push({
|
|
|
+ popupName,
|
|
|
+ openerElement,
|
|
|
+ hasPopupParent: clickFromPopup(evt),
|
|
|
+ title: self._getTitle(popupName),
|
|
|
+ depth: self._stack.length,
|
|
|
+ offset: self._getOffset(openerElement),
|
|
|
+ dataContext: (this && this.currentData && this.currentData()) || this,
|
|
|
+ });
|
|
|
+
|
|
|
+ // If there are no popup currently opened we use the Blaze API to render
|
|
|
+ // one into the DOM. We use a reactive function as the data parameter that
|
|
|
+ // return the complete along with its top element and depends on our
|
|
|
+ // internal dependency that is being invalidated every time the top
|
|
|
+ // element of the stack has changed and we want to update the popup.
|
|
|
+ //
|
|
|
+ // Otherwise if there is already a popup open we just need to invalidate
|
|
|
+ // our internal dependency, and since we just changed the top element of
|
|
|
+ // our internal stack, the popup will be updated with the new data.
|
|
|
+ if (!self.isOpen()) {
|
|
|
+ self.current = Blaze.renderWithData(
|
|
|
+ self.template,
|
|
|
+ () => {
|
|
|
+ self._dep.depend();
|
|
|
+ return { ...self._getTopStack(), stack: self._stack };
|
|
|
+ },
|
|
|
+ document.body,
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ self._dep.changed();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ /// This function returns a callback that can be used in an event map:
|
|
|
+ /// Template.tplName.events({
|
|
|
+ /// 'click .elementClass': Popup.afterConfirm("popupName", function() {
|
|
|
+ /// // What to do after the user has confirmed the action
|
|
|
+ /// }),
|
|
|
+ /// });
|
|
|
+ afterConfirm(name, action) {
|
|
|
+ const self = this;
|
|
|
+
|
|
|
+ return function(evt, tpl) {
|
|
|
+ const context = (this.currentData && this.currentData()) || this;
|
|
|
+ context.__afterConfirmAction = action;
|
|
|
+ self.open(name).call(context, evt, tpl);
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ /// The public reactive state of the popup.
|
|
|
+ isOpen() {
|
|
|
+ this._dep.changed();
|
|
|
+ return Boolean(this.current);
|
|
|
+ }
|
|
|
+
|
|
|
+ /// In case the popup was opened from a parent popup we can get back to it
|
|
|
+ /// with this `Popup.back()` function. You can go back several steps at once
|
|
|
+ /// by providing a number to this function, e.g. `Popup.back(2)`. In this case
|
|
|
+ /// intermediate popup won't even be rendered on the DOM. If the number of
|
|
|
+ /// steps back is greater than the popup stack size, the popup will be closed.
|
|
|
+ back(n = 1) {
|
|
|
+ if (this._stack.length > n) {
|
|
|
+ _.times(n, () => this._stack.pop());
|
|
|
+ this._dep.changed();
|
|
|
+ }
|
|
|
+ // else {
|
|
|
+ // this.close();
|
|
|
+ //}
|
|
|
+ }
|
|
|
+
|
|
|
+ /// Close the current opened popup.
|
|
|
+ /*
|
|
|
+ close() {
|
|
|
+ if (this.isOpen()) {
|
|
|
+ Blaze.remove(this.current);
|
|
|
+ this.current = null;
|
|
|
+
|
|
|
+ const openerElement = this._getTopStack().openerElement;
|
|
|
+ $(openerElement).removeClass('is-active');
|
|
|
+
|
|
|
+ this._stack = [];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ */
|
|
|
+
|
|
|
+ getOpenerComponent() {
|
|
|
+ const { openerElement } = Template.parentData(4);
|
|
|
+ return BlazeComponent.getComponentForElement(openerElement);
|
|
|
+ }
|
|
|
+
|
|
|
+ // An utility fonction that returns the top element of the internal stack
|
|
|
+ _getTopStack() {
|
|
|
+ return this._stack[this._stack.length - 1];
|
|
|
+ }
|
|
|
+
|
|
|
+ // We automatically calculate the popup offset from the reference element
|
|
|
+ // position and dimensions. We also reactively use the window dimensions to
|
|
|
+ // ensure that the popup is always visible on the screen.
|
|
|
+ _getOffset(element) {
|
|
|
+ const $element = $(element);
|
|
|
+ return () => {
|
|
|
+ Utils.windowResizeDep.depend();
|
|
|
+
|
|
|
+ if (Utils.isMiniScreen()) return { left: 0, top: 0 };
|
|
|
+
|
|
|
+ const offset = $element.offset();
|
|
|
+ const popupWidth = 300 + 15;
|
|
|
+ return {
|
|
|
+ left: Math.min(offset.left, $(window).width() - popupWidth),
|
|
|
+ top: offset.top + $element.outerHeight(),
|
|
|
+ };
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ // We get the title from the translation files. Instead of returning the
|
|
|
+ // result, we return a function that compute the result and since `TAPi18n.__`
|
|
|
+ // is a reactive data source, the title will be changed reactively.
|
|
|
+ _getTitle(popupName) {
|
|
|
+ return () => {
|
|
|
+ const translationKey = `${popupName}-title`;
|
|
|
+
|
|
|
+ // XXX There is no public API to check if there is an available
|
|
|
+ // translation for a given key. So we try to translate the key and if the
|
|
|
+ // translation output equals the key input we deduce that no translation
|
|
|
+ // was available and returns `false`. There is a (small) risk a false
|
|
|
+ // positives.
|
|
|
+ const title = TAPi18n.__(translationKey);
|
|
|
+ // when popup showed as full of small screen, we need a default header to clearly see [X] button
|
|
|
+ const defaultTitle = Utils.isMiniScreen() ? '' : false;
|
|
|
+ return title !== translationKey ? title : defaultTitle;
|
|
|
+ };
|
|
|
+ }
|
|
|
+})();
|
Lauri Ojansivu