@girder/core 3.2.3 → 5.0.0-beta.1

package/views/widgets/ItemBreadcrumbWidget.js

@@ -1,38 +0,0 @@
-import $ from 'jquery';
-
-import router from '@girder/core/router';
-import View from '@girder/core/views/View';
-
-import ItemBreadcrumbTemplate from '@girder/core/templates/widgets/itemBreadcrumb.pug';
-
-/**
- * Renders the a breadcrumb for the item page
- */
-var ItemBreadcrumbWidget = View.extend({
-    events: {
-        'click a.g-item-breadcrumb-link': function (event) {
-            var link = $(event.currentTarget);
-            router.navigate(link.data('type') + '/' + link.data('id'),
-                { trigger: true });
-        },
-        'click a.g-hierarchy-level-up': function () {
-            var folder = this.parentChain.pop().object;
-            router.navigate('folder/' + folder._id, { trigger: true });
-        }
-    },
-
-    initialize: function (settings) {
-        this.parentChain = settings.parentChain;
-        this.render();
-    },
-
-    render: function () {
-        this.$el.html(ItemBreadcrumbTemplate({
-            parentChain: this.parentChain
-        }));
-
-        return this;
-    }
-});
-
-export default ItemBreadcrumbWidget;

package/views/widgets/ItemListWidget.js

@@ -1,345 +0,0 @@
-import $ from 'jquery';
-import _ from 'underscore';
-
-import ItemCollection from '@girder/core/collections/ItemCollection';
-import LoadingAnimation from '@girder/core/views/widgets/LoadingAnimation';
-import View from '@girder/core/views/View';
-import { formatSize } from '@girder/core/misc';
-import { restRequest } from '@girder/core/rest';
-
-import ItemListTemplate from '@girder/core/templates/widgets/itemList.pug';
-
-/**
- * This widget shows a list of items under a given folder.
- */
-var ItemListWidget = View.extend({
-    events: {
-        'click a.g-item-list-link': function (event) {
-            event.preventDefault();
-            var cid = $(event.currentTarget).attr('g-item-cid');
-            this.trigger('g:itemClicked', this.collection.get(cid), event);
-        },
-        'click a.g-show-more-items': function () {
-            this.collection.fetchNextPage();
-        },
-        'change .g-list-checkbox': function (event) {
-            const target = $(event.currentTarget);
-            const cid = target.attr('g-item-cid');
-            if (target.prop('checked')) {
-                this.checked.push(cid);
-            } else {
-                const idx = this.checked.indexOf(cid);
-                if (idx !== -1) {
-                    this.checked.splice(idx, 1);
-                }
-            }
-            this.trigger('g:checkboxesChanged');
-        }
-    },
-
-    initialize: function (settings) {
-        this.checked = [];
-        this._checkboxes = settings.checkboxes;
-        this._downloadLinks = (
-            _.has(settings, 'downloadLinks') ? settings.downloadLinks : true);
-        this._viewLinks = (
-            _.has(settings, 'viewLinks') ? settings.viewLinks : true);
-        this._showSizes = (
-            _.has(settings, 'showSizes') ? settings.showSizes : true);
-        this._highlightItem = (
-            _.has(settings, 'highlightItem') ? settings.highlightItem : false);
-        this._paginated = (
-            _.has(settings, 'paginated') ? settings.paginated : false);
-
-        this.accessLevel = settings.accessLevel;
-        this.public = settings.public;
-        this._selectedItem = settings.selectedItem;
-
-        new LoadingAnimation({
-            el: this.$el,
-            parentView: this
-        }).render();
-
-        this.collection = new ItemCollection();
-        this.collection.append = true; // Append, don't replace pages
-        this.collection.filterFunc = settings.itemFilter;
-        this.currentPage = 1; // By default we want to be on the first page
-
-        if (this._paginated) {
-            if (this.collection.filterFunc) {
-                console.warn('Pagination cannot be used with a filter function');
-                this._paginated = false;
-            } else {
-                // Override the default to prevent appending new pages
-                this.collection.append = false;
-            }
-        }
-
-        this.collection.fetch({ folderId: settings.folderId }).done(() => {
-            this._totalPages = Math.ceil(this.collection.getTotalCount() / this.collection.pageLimit);
-            if (this._paginated && this.collection.hasNextPage()) {
-                // Tells the parent container that the item is paginated so it can render the page selector
-                this.trigger('g:paginated');
-                // We need to get the position in the list for the selected item
-                if (this._selectedItem) {
-                    restRequest({
-                        url: `item/${this._selectedItem.get('_id')}/position`,
-                        method: 'GET',
-                        data: { folderId: this._selectedItem.get('folderId'), sort: 'name' }
-                    }).done((val) => {
-                        // Now we fetch the correct page for the position
-                        val = Number(val);
-                        if (val >= this.collection.pageLimit) {
-                            const pageLimit = this.collection.pageLimit;
-                            const calculatedPage = 1 + Math.ceil((val - (val % pageLimit)) / pageLimit);
-                            return this.collection.fetchPage(calculatedPage - 1);
-                        }
-                    }).done(() => this.bindOnChanged());
-                } else {
-                    this.bindOnChanged();
-                }
-            } else {
-                this.bindOnChanged();
-            }
-        });
-    },
-
-    /**
-     * Binds the change function to the collection and calls it initially to update the render
-     */
-    bindOnChanged: function () {
-        this.collection.on('g:changed', this.changedFunc, this);
-        this.changedFunc();
-    },
-    /**
-     * Function that causes a render each time the collection is changed
-     * Will also update the current page in a paginated system
-     */
-    changedFunc: function () {
-        if (this.accessLevel !== undefined) {
-            this.collection.each((model) => {
-                model.set('_accessLevel', this.accessLevel);
-            });
-        }
-        if (this._paginated) {
-            this.currentPage = this.collection.pageNum() + 1;
-        }
-        this.render();
-        this.trigger('g:changed');
-    },
-
-    render: function () {
-        this.checked = [];
-        // If we set a selected item in the beginning we will center the selection while loading
-        if (this._selectedItem && this._highlightItem) {
-            this.scrollPositionObserver();
-        }
-
-        this.$el.html(ItemListTemplate({
-            items: this.collection.toArray(),
-            isParentPublic: this.public,
-            hasMore: this.collection.hasNextPage(),
-            formatSize: formatSize,
-            checkboxes: this._checkboxes,
-            downloadLinks: this._downloadLinks,
-            viewLinks: this._viewLinks,
-            showSizes: this._showSizes,
-            highlightItem: this._highlightItem,
-            selectedItemId: (this._selectedItem || {}).id,
-            paginated: this._paginated
-
-        }));
-
-        return this;
-    },
-
-    /**
-     * @returns {number} the number of pages in the itemList for use in a paginated view
-     */
-    getNumPages() {
-        return this._totalPages || 1;
-    },
-    /**
-     * @returns {number} the current page for paginated lists, defaults to 1 if none is provided
-     */
-    getCurrentPage() {
-        return this.currentPage || 1;
-    },
-    /**
-     * Externally facing function to allow hierarchyWidget and others to set the current page if the item is paginated
-     * @param {Number} page 1 index integer specifying the page to fetch
-     */
-    setPage(page) {
-        if (this._paginated && this.collection && this.collection.fetchPage) {
-            this.currentPage = page;
-            return this.collection.fetchPage(page - 1).then(() =>
-                this.$el.parents('.g-hierarchy-widget-container').scrollTop(0));
-        }
-    },
-    /**
-     * Insert an item into the collection and re-render it.
-     */
-    insertItem: function (item) {
-        if (this.accessLevel !== undefined) {
-            item.set('_accessLevel', this.accessLevel);
-        }
-        this.collection.add(item);
-        this.trigger('g:changed');
-        this.render();
-    },
-
-    /**
-     * Set all item checkboxes to a certain checked state. The event
-     * g:checkboxesChanged is triggered once after checking/unchecking everything.
-     * @param {bool} checked The checked state.
-     */
-    checkAll: function (checked) {
-        this.$('.g-list-checkbox').prop('checked', checked);
-
-        this.checked = [];
-        if (checked) {
-            this.collection.each(function (model) {
-                this.checked.push(model.cid);
-            }, this);
-        }
-
-        this.trigger('g:checkboxesChanged');
-    },
-
-    /**
-     * Select (highlight) an item in the list.
-     * @param item An ItemModel instance representing the item to select.
-     */
-    selectItem: function (item) {
-        this.$('li.g-item-list-entry').removeClass('g-selected');
-        this.$('a.g-item-list-link[g-item-cid=' + item.cid + ']')
-            .parents('li.g-item-list-entry').addClass('g-selected');
-    },
-
-    /**
-     * Return the currently selected item, or null if there is no selected item.
-     */
-    getSelectedItem: function () {
-        var el = this.$('li.g-item-list-entry.g-selected');
-        if (!el.length) {
-            return null;
-        }
-        var cid = $('.g-item-list-link', $(el[0])).attr('g-item-cid');
-        return this.collection.get(cid);
-    },
-
-    recomputeChecked: function () {
-        this.checked = _.map(this.$('.g-list-checkbox:checked'), function (checkbox) {
-            return $(checkbox).attr('g-item-cid');
-        }, this);
-    },
-
-    centerSelected: function () {
-        const widgetcontainer = this.$el.parents('.g-hierarchy-widget-container');
-        const selected = this.$('li.g-item-list-entry.g-selected');
-        if (widgetcontainer.length > 0 && selected.length > 0) {
-            // These items will effect the scroll position if they exists
-            const folderHeight  = $('.g-folder-list').length ? $('.g-folder-list').height() : 0;
-            const breadcrumbHeight = $('.g-hierarchy-breadcrumb-bar').length ? $('.g-hierarchy-breadcrumb-bar').height() : 0;
-            const selectedTop = selected.position().top;
-            // The selectedTop position needs to account for the breadcrumbHeight and the folderHeight
-            const scrollingPos = selectedTop + folderHeight + breadcrumbHeight;
-            const centerPos = (widgetcontainer.height() / 2.0) - (folderHeight / 2.0) - (breadcrumbHeight / 2.0) - (selected.outerHeight() / 2.0);
-
-            const scrollPos = scrollingPos - centerPos;
-            if (this.tempScrollPos === undefined) {
-                this.tempScrollPos = scrollPos;
-            }
-            // Call a custom scroll event to prevent thinking the user initiated it
-            const e = new CustomEvent('scroll', { detail: 'selected_item_scroll' });
-            widgetcontainer[0].scrollTop = scrollPos;
-            widgetcontainer[0].dispatchEvent(e);
-        }
-    },
-    /**
-     * This will look at the position of the selected item and update it as images load and
-     * the DOM reflows
-     */
-    scrollPositionObserver: function () {
-        // Set the default selected height for the selected item
-        const target = this.$('.g-item-list');
-        if (window.MutationObserver && target.length > 0) {
-            // Default items to monitor for the scroll position
-            const widgetcontainer = this.$el.parents('.g-hierarchy-widget-container');
-            // If the observer already exists disconnect it so it can be recreated
-            if (this.observer && this.observer.disconnect) {
-                this.observer.disconnect();
-            }
-
-            // Event handler for loading images declared once
-            const onLoadImage = (event) => {
-                if (this.observer) {
-                    this.centerSelected();
-                }
-            };
-
-            this.observer = new MutationObserver((mutations) => {
-                // for every mutation
-                _.each(mutations, (mutation) => {
-                    // If no nodes are added we can return
-                    if (!mutation.addedNodes) {
-                        return;
-                    }
-
-                    // for every added node
-                    _.each(mutation.addedNodes, (node) => {
-                        if (node.className && node.className.indexOf('g-item-list') !== -1) {
-                            // We want to do a onetime scroll to position if the screen is idle
-                            if (window.requestIdleCallback) {
-                                // Processing time is 2 seconds, but should finish much faster
-                                requestIdleCallback(() => {
-                                    this.centerSelected();
-                                }, { timeout: 2000 });
-                            } else {
-                                this.centerSelected();
-                            }
-                        }
-
-                        // For any images added we wait until loaded and rescroll to the selected
-                        if (_.isFunction(node.getElementsByTagName)) {
-                            this.$('img', node).on('load', onLoadImage);
-                        }
-                    });
-                });
-            });
-
-            // bind mutation observer to a specific element (probably a div somewhere)
-            this.observer.observe(target.parent()[0], { childList: true, subtree: true });
-
-            // Remove event listeners and disconnect observer
-            const unbindDisconnect = () => {
-                if (this.observer) {
-                    widgetcontainer.unbind('scroll.observerscroll');
-                    widgetcontainer.unbind('wheel.observerscroll');
-                    widgetcontainer.unbind('click.observerscroll');
-                    this.observer.disconnect();
-                    this.observer = null;
-                    this.tempScrollPos = undefined;
-                    // Prevents scrolling when user clicks 'show more...'
-                    this._highlightItem = false;
-                }
-            };
-
-            // Add in scroll event to monitor the scrollPos to prevent uncessary updates and also kill observer when user scrolls
-            widgetcontainer.bind('scroll.observerscroll', (evt) => {
-                if (this.tempScrollPos !== undefined && this.tempScrollPos !== widgetcontainer[0].scrollTop) {
-                    this.tempScrollPos = widgetcontainer[0].scrollTop;
-                    // If the event detail is not 'selected_item_scroll' the scroll should be a user initiated scroll
-                    if (evt.detail !== 'selected_item_scroll') {
-                        unbindDisconnect();
-                    }
-                }
-            });
-            // Backup function to kill observer if user clicks an item, moves scrollwheel, or touchpad equivalent
-            widgetcontainer.bind('wheel.selectionobserver', unbindDisconnect);
-            widgetcontainer.bind('click.selectionobserver', unbindDisconnect);
-        }
-    }
-});
-
-export default ItemListWidget;

package/views/widgets/LoadingAnimation.js

@@ -1,17 +0,0 @@
-import View from '@girder/core/views/View';
-
-import LoadingAnimationTemplate from '@girder/core/templates/widgets/loadingAnimation.pug';
-
-import '@girder/core/stylesheets/layout/loading.styl';
-
-/**
- * This widget can be used to display a small loading animation.
- */
-var LoadingAnimation = View.extend({
-    render: function () {
-        this.$el.html(LoadingAnimationTemplate());
-        return this;
-    }
-});
-
-export default LoadingAnimation;

package/views/widgets/MarkdownWidget.js

@@ -1,217 +0,0 @@
-import _ from 'underscore';
-
-import FileModel from '@girder/core/models/FileModel';
-import View from '@girder/core/views/View';
-import events from '@girder/core/events';
-import { renderMarkdown, formatSize } from '@girder/core/misc';
-
-import MarkdownWidgetTemplate from '@girder/core/templates/widgets/markdownWidget.pug';
-
-import '@girder/core/stylesheets/widgets/markdownWidget.styl';
-
-import '@girder/core/utilities/jquery/girderEnable';
-
-import 'bootstrap/js/tab';
-
-/**
- * A simple widget for editing markdown text with a preview tab.
- */
-var MarkdownWidget = View.extend({
-    events: {
-        'show.bs.tab .g-preview-link': function () {
-            renderMarkdown(this.val().trim() || 'Nothing to show',
-                this.$('.g-markdown-preview'));
-        },
-
-        'shown.bs.tab .g-write-link': function () {
-            this.$('.g-markdown-text').trigger('focus');
-        },
-
-        'click .g-browse': function () {
-            this.$('.g-file-input').trigger('click');
-        },
-
-        'change .g-file-input': function (e) {
-            var files = e.target.files;
-
-            if (files.length) {
-                this.files = files;
-                this.filesAdded();
-            }
-        },
-
-        'dragenter .g-markdown-drop-zone': function (e) {
-            e.stopPropagation();
-            e.preventDefault();
-            e.originalEvent.dataTransfer.dropEffect = 'copy';
-            this.$('.g-markdown-text,.g-upload-footer').addClass('dragover');
-        },
-
-        'dragleave .g-markdown-drop-zone': function (e) {
-            e.stopPropagation();
-            e.preventDefault();
-            this.$('.g-markdown-text,.g-upload-footer').removeClass('dragover');
-        },
-
-        'dragover .g-markdown-drop-zone': function (e) {
-            e.originalEvent.dataTransfer.dropEffect = 'copy';
-            this.$('.g-markdown-text,.g-upload-footer').addClass('dragover');
-        },
-
-        'drop .g-markdown-drop-zone': function (e) {
-            e.stopPropagation();
-            e.preventDefault();
-            this.$('.g-markdown-text,.g-upload-footer').removeClass('dragover');
-            this.files = e.originalEvent.dataTransfer.files;
-            this.filesAdded();
-        }
-    },
-
-    /**
-     * @param [settings.text=''] Initial markdown text.
-     * @param [settings.placeholder=''] Text area placeholder.
-     * @param [settings.prefix='markdown'] Prefix for element IDs in case
-     *     multiple of these widgets are rendered simultaneously.
-     * @param [settings.enableUploads=false] Whether to allow uploading files
-     *     inline into the markdown.
-     * @param [settings.maxUploadSize=10 MB] Max upload size in bytes.
-     * @param [settings.parent] If enableUploads is true, set this to the object
-     *     into which files should be uploaded.
-     * @param [settings.allowedExtensions=null] If you want to restrict to
-     *     certain file extensions, set this to a list of (lowercase) extensions,
-     *     not including periods. E.g.: ["png", "jpg", "jpeg"]
-     */
-    initialize: function (settings) {
-        this.text = settings.text || '';
-        this.placeholder = settings.placeholder || '';
-        this.prefix = settings.prefix || 'markdown';
-        this.enableUploads = settings.enableUploads || false;
-        this.parent = settings.parent || null;
-        this.maxUploadSize = settings.maxUploadSize || 1024 * 1024 * 10;
-        this.allowedExtensions = settings.allowedExtensions || null;
-        this.files = [];
-    },
-
-    filesAdded: function () {
-        try {
-            this.validateFiles();
-        } catch (err) {
-            events.trigger('g:alert', {
-                type: 'danger',
-                text: err.message,
-                icon: 'cancel',
-                timeout: 5000
-            });
-            return;
-        }
-
-        var file = this.files[0];
-        var fileModel = new FileModel();
-
-        fileModel.on('g:upload.complete', function () {
-            var val = this.$('.g-markdown-text').val();
-            val += '![' + file.name + '](' + fileModel.downloadUrl() + ')\n';
-
-            this.$('.g-upload-overlay').addClass('hide');
-            this.$('.g-markdown-text').girderEnable(true).val(val);
-
-            this.trigger('g:fileUploaded', {
-                file: file,
-                model: fileModel
-            });
-        }, this).on('g:upload.progress', function (info) {
-            var currentProgress = info.startByte + info.loaded;
-            this.$('.g-markdown-upload-progress>.progress-bar').css('width',
-                Math.ceil(100 * currentProgress / info.total) + '%');
-            this.$('.g-markdown-upload-progress-message').text(
-                'Uploading ' + info.file.name + ' - ' +
-                   formatSize(currentProgress) + ' / ' +
-                   formatSize(info.total)
-            );
-        }, this).on('g:upload.error', function (info) {
-            events.trigger('g:alert', {
-                type: 'danger',
-                text: info.message,
-                icon: 'cancel',
-                timeout: 5000
-            });
-            this.$('.g-upload-overlay').addClass('hide');
-            this.$('.g-markdown-text').girderEnable(true);
-        }, this).on('g:upload.errorStarting', function (info) {
-            events.trigger('g:alert', {
-                type: 'danger',
-                text: info.message,
-                icon: 'cancel',
-                timeout: 5000
-            });
-            this.$('.g-upload-overlay').addClass('hide');
-            this.$('.g-markdown-text').girderEnable(true);
-        }, this).upload(this.parent, file);
-
-        this.$('.g-upload-overlay').removeClass('hide');
-        this.$('.g-markdown-text').girderEnable(false);
-    },
-
-    /**
-     * Validate a selection of files. If invalid, throws an object containing
-     * a "message" field.
-     */
-    validateFiles: function (files) {
-        files = files || this.files;
-
-        if (this.files.length !== 1) {
-            throw new Error('Please add only one file at a time.');
-        }
-
-        var file = files[0],
-            ext = file.name.split('.').pop().toLowerCase();
-
-        if (this.maxUploadSize && file.size > this.maxUploadSize) {
-            throw new Error(
-                'That file is too large. You may only attach files ' +
-                'up to ' + formatSize(this.maxUploadSize) + '.'
-            );
-        }
-
-        if (this.allowedExtensions && !_.contains(this.allowedExtensions, ext)) {
-            throw new Error(
-                'Only files with the following extensions are allowed: ' +
-                this.allowedExtensions.join(', ') + '.'
-            );
-        }
-    },
-
-    render: function () {
-        this.$el.html(MarkdownWidgetTemplate({
-            text: this.text,
-            placeholder: this.placeholder,
-            prefix: this.prefix,
-            enableUploads: this.enableUploads
-        }));
-
-        return this;
-    },
-
-    /**
-     * Get or set the current markdown text. Call with no arguments to return
-     * the current value, or call with one argument to set the value to that.
-     */
-    val: function () {
-        if (arguments.length) {
-            return this.$('.g-markdown-text').val(arguments[0]);
-        } else {
-            return this.$('.g-markdown-text').val();
-        }
-    },
-
-    /**
-     * Normally, calling render() on this widget will reset it to its initial text
-     * value. Call this to set the text value that should be shown on re-render
-     * to the current value of the text area.
-     */
-    saveText: function () {
-        this.text = this.val();
-    }
-});
-
-export default MarkdownWidget;