').attr({\n class: 'g-widget-metadata-row editing'\n }).appendTo(this.$el.find('.g-widget-metadata-container'));\n var value = (mode === 'json') ? '{}' : '';\n\n var widget = new girder.views.MetadatumWidget({\n el: newRow,\n mode: mode,\n key: '',\n value: value,\n item: this.item,\n fieldName: this.fieldName,\n apiPath: this.apiPath,\n accessLevel: this.accessLevel,\n girder: girder,\n parentView: this,\n onMetadataEdited: this.onMetadataEdited,\n onMetadataAdded: this.onMetadataAdded\n });\n\n var newEditRow = $('
').appendTo(widget.$el);\n\n new EditWidget({\n el: newEditRow,\n item: this.item,\n key: '',\n value: value,\n fieldName: this.fieldName,\n apiPath: this.apiPath,\n accessLevel: this.accessLevel,\n newDatum: true,\n parentView: widget,\n onMetadataEdited: this.onMetadataEdited,\n onMetadataAdded: this.onMetadataAdded\n }).render();\n },\n\n render: function () {\n var metaDict = this.item.get(this.fieldName) || {};\n var metaKeys = Object.keys(metaDict);\n metaKeys.sort(girder.localeSort);\n\n // Metadata header\n this.$el.html(girder.templates.metadataWidget({\n item: this.item,\n title: this.title,\n accessLevel: this.accessLevel,\n girder: girder\n }));\n\n // Append each metadatum\n _.each(metaKeys, function (metaKey) {\n this.$el.find('.g-widget-metadata-container').append(new girder.views.MetadatumWidget({\n mode: this.getModeFromValue(metaDict[metaKey]),\n key: metaKey,\n value: metaDict[metaKey],\n accessLevel: this.accessLevel,\n girder: girder,\n parentView: this,\n fieldName: this.fieldName,\n apiPath: this.apiPath,\n onMetadataEdited: this.onMetadataEdited,\n onMetadataAdded: this.onMetadataAdded\n }).render().$el);\n }, this);\n\n this.$('.g-widget-metadata-add-button').tooltip({\n container: this.$el,\n placement: 'left',\n animation: false,\n delay: {show: 100}\n });\n\n return this;\n }\n});\n\ngirder.views.MetadatumWidget = girder.View.extend({\n events: {\n 'click .g-widget-metadata-edit-button': 'editMetadata'\n },\n\n initialize: function (settings) {\n if (!_.has(this.parentView.modes, settings.mode)) {\n throw 'Unsupported metadatum mode ' + settings.mode + ' detected.';\n }\n\n this.mode = settings.mode;\n this.key = settings.key;\n this.value = settings.value;\n this.accessLevel = settings.accessLevel;\n this.parentView = settings.parentView;\n this.fieldName = settings.fieldName;\n this.apiPath = settings.apiPath;\n this.onMetadataEdited = settings.onMetadataEdited;\n this.onMetadataAdded = settings.onMetadataAdded;\n },\n\n _validate: function (from, to, value) {\n var newMode = this.parentView.modes[to];\n\n if (_.has(newMode, 'validation') &&\n _.has(newMode.validation, 'from') &&\n _.has(newMode.validation.from, from)) {\n var validate = newMode.validation.from[from][0];\n var msg = newMode.validation.from[from][1];\n\n if (!validate(value)) {\n girder.events.trigger('g:alert', {\n text: msg,\n type: 'warning'\n });\n return false;\n }\n }\n\n return true;\n },\n\n // @todo too much duplication with editMetadata\n toggleEditor: function (event, newEditorMode, existingEditor, overrides) {\n var fromEditorMode =\n (existingEditor instanceof girder.views.JsonMetadatumEditWidget)\n ? 'json' : 'simple';\n var newValue = (overrides || {}).value || existingEditor.$el.attr('g-value');\n if (!this._validate(fromEditorMode, newEditorMode, newValue)) {\n return;\n }\n\n var row = existingEditor.$el;\n existingEditor.destroy();\n row.addClass('editing').empty();\n\n var opts = _.extend({\n el: row,\n item: this.parentView.item,\n key: row.attr('g-key'),\n value: row.attr('g-value'),\n accessLevel: this.accessLevel,\n newDatum: false,\n parentView: this,\n fieldName: this.fieldName,\n apiPath: this.apiPath,\n onMetadataEdited: this.onMetadataEdited,\n onMetadataAdded: this.onMetadataAdded\n }, overrides || {});\n\n this.parentView.modes[newEditorMode].editor(opts).render();\n },\n\n editMetadata: function (event) {\n var row = $(event.currentTarget.parentElement);\n row.addClass('editing').empty();\n\n var newEditRow = row.append('
');\n\n var opts = {\n el: newEditRow.find('div'),\n item: this.parentView.item,\n key: row.attr('g-key'),\n value: row.attr('g-value'),\n accessLevel: this.accessLevel,\n newDatum: false,\n parentView: this,\n fieldName: this.fieldName,\n apiPath: this.apiPath,\n onMetadataEdited: this.onMetadataEdited,\n onMetadataAdded: this.onMetadataAdded\n };\n\n // If they're trying to open false, null, 6, etc which are not stored as strings\n if (this.mode === 'json') {\n try {\n var jsonValue = JSON.parse(row.attr('g-value'));\n\n if (jsonValue !== undefined && !_.isObject(jsonValue)) {\n opts.value = jsonValue;\n }\n } catch (e) {}\n }\n\n this.parentView.modes[this.mode].editor(opts).render();\n },\n\n render: function () {\n this.$el.attr({\n class: 'g-widget-metadata-row',\n 'g-key': this.key,\n 'g-value': _.bind(this.parentView.modes[this.mode].displayValue, this)()\n }).empty();\n\n this.$el.html(this.parentView.modes[this.mode].template({\n key: this.key,\n value: _.bind(this.parentView.modes[this.mode].displayValue, this)(),\n accessLevel: this.accessLevel,\n girder: girder\n }));\n\n return this;\n }\n});\n\ngirder.views.MetadatumEditWidget = girder.View.extend({\n events: {\n 'click .g-widget-metadata-cancel-button': 'cancelEdit',\n 'click .g-widget-metadata-save-button': 'save',\n 'click .g-widget-metadata-delete-button': 'deleteMetadatum',\n 'click .g-widget-metadata-toggle-button': function (event) {\n var editorType;\n // @todo modal\n // in the future this event will have the new editorType (assuming a dropdown)\n if (this instanceof girder.views.JsonMetadatumEditWidget) {\n editorType = 'simple';\n } else {\n editorType = 'json';\n }\n\n this.parentView.toggleEditor(event, editorType, this, {\n // Save state before toggling editor\n key: this.$el.find('.g-widget-metadata-key-input').val(),\n value: this.getCurrentValue()\n });\n }\n },\n\n initialize: function (settings) {\n this.item = settings.item;\n this.key = settings.key || '';\n this.fieldName = settings.fieldName || 'meta';\n this.value = (settings.value !== undefined) ? settings.value : '';\n this.accessLevel = settings.accessLevel;\n this.newDatum = settings.newDatum;\n this.fieldName = settings.fieldName;\n this.apiPath = settings.apiPath;\n this.onMetadataEdited = settings.onMetadataEdited;\n this.onMetadataAdded = settings.onMetadataAdded;\n },\n\n editTemplate: girder.templates.metadatumEditWidget,\n\n getCurrentValue: function () {\n return this.$el.find('.g-widget-metadata-value-input').val();\n },\n\n deleteMetadatum: function (event) {\n event.stopImmediatePropagation();\n var metadataList = $(event.currentTarget.parentElement).parent();\n var params = {\n text: 'Are you sure you want to delete the metadatum
' +\n _.escape(this.key) + '?',\n escapedHtml: true,\n yesText: 'Delete',\n confirmCallback: _.bind(function () {\n this.item.removeMetadata(this.key, function () {\n metadataList.remove();\n }, null, {\n field: this.fieldName,\n path: this.apiPath\n });\n }, this)\n };\n girder.confirm(params);\n },\n\n cancelEdit: function (event) {\n event.stopImmediatePropagation();\n var curRow = $(event.currentTarget.parentElement).parent();\n if (this.newDatum) {\n curRow.remove();\n } else {\n this.parentView.render();\n }\n },\n\n save: function (event, value) {\n event.stopImmediatePropagation();\n var curRow = $(event.currentTarget.parentElement),\n tempKey = curRow.find('.g-widget-metadata-key-input').val(),\n tempValue = (value !== undefined) ? value : curRow.find('.g-widget-metadata-value-input').val();\n\n if (this.newDatum && tempKey === '') {\n girder.events.trigger('g:alert', {\n text: 'A key is required for all metadata.',\n type: 'warning'\n });\n return;\n }\n\n var saveCallback = _.bind(function () {\n this.key = tempKey;\n this.value = tempValue;\n\n this.parentView.key = this.key;\n this.parentView.value = this.value;\n\n if (this instanceof girder.views.JsonMetadatumEditWidget) {\n this.parentView.mode = 'json';\n } else {\n this.parentView.mode = 'simple';\n }\n\n this.parentView.render();\n\n this.newDatum = false;\n }, this);\n\n var errorCallback = function (out) {\n girder.events.trigger('g:alert', {\n text: out.message,\n type: 'danger'\n });\n };\n\n if (this.newDatum) {\n if (this.onMetadataAdded) {\n this.onMetadataAdded(tempKey, tempValue, saveCallback, errorCallback);\n } else {\n this.item.addMetadata(tempKey, tempValue, saveCallback, errorCallback, {\n field: this.fieldName,\n path: this.apiPath\n });\n }\n } else {\n if (this.onMetadataEdited) {\n this.onMetadataEdited(tempKey, this.key, tempValue, saveCallback, errorCallback);\n } else {\n this.item.editMetadata(tempKey, this.key, tempValue, saveCallback, errorCallback, {\n field: this.fieldName,\n path: this.apiPath\n });\n }\n }\n },\n\n render: function () {\n this.$el.html(this.editTemplate({\n item: this.item,\n key: this.key,\n value: this.value,\n accessLevel: this.accessLevel,\n newDatum: this.newDatum,\n girder: girder\n }));\n this.$el.find('.g-widget-metadata-key-input').focus();\n\n this.$('[title]').tooltip({\n container: this.$el,\n placement: 'bottom',\n animation: false,\n delay: {show: 100}\n });\n\n return this;\n }\n});\n\ngirder.views.JsonMetadatumEditWidget = girder.views.MetadatumEditWidget.extend({\n editTemplate: girder.templates.jsonMetadatumEditWidget,\n\n getCurrentValue: function () {\n return this.editor.getText();\n },\n\n save: function (event) {\n try {\n girder.views.MetadatumEditWidget.prototype.save.call(\n this, event, this.editor.get());\n } catch (err) {\n girder.events.trigger('g:alert', {\n text: 'The field contains invalid JSON and can not be saved.',\n type: 'warning'\n });\n }\n },\n\n render: function () {\n girder.views.MetadatumEditWidget.prototype.render.apply(this, arguments);\n\n this.editor = new JSONEditor(this.$el.find('.g-json-editor')[0], {\n mode: 'tree',\n modes: ['code', 'tree'],\n error: function () {\n girder.events.trigger('g:alert', {\n text: 'The field contains invalid JSON and can not be viewed in Tree Mode.',\n type: 'warning'\n });\n }\n });\n\n if (this.value !== undefined) {\n this.editor.setText(JSON.stringify(this.value));\n this.editor.expandAll();\n }\n\n return this;\n }\n});\n","/**\n * This widget is for creating new assetstores. The parent view is responsible\n * for checking admin privileges before rendering this widget.\n */\ngirder.views.NewAssetstoreWidget = girder.View.extend({\n events: {\n 'submit #g-new-fs-form': function (e) {\n this.createAssetstore(e, this.$('#g-new-fs-error'), {\n type: girder.AssetstoreType.FILESYSTEM,\n name: this.$('#g-new-fs-name').val(),\n root: this.$('#g-new-fs-root').val()\n });\n },\n\n 'submit #g-new-gridfs-form': function (e) {\n this.createAssetstore(e, this.$('#g-new-gridfs-error'), {\n type: girder.AssetstoreType.GRIDFS,\n name: this.$('#g-new-gridfs-name').val(),\n db: this.$('#g-new-gridfs-db').val(),\n mongohost: this.$('#g-new-gridfs-mongohost').val(),\n replicaset: this.$('#g-new-gridfs-replicaset').val()\n });\n },\n\n 'submit #g-new-s3-form': function (e) {\n this.createAssetstore(e, this.$('#g-new-s3-error'), {\n type: girder.AssetstoreType.S3,\n name: this.$('#g-new-s3-name').val(),\n bucket: this.$('#g-new-s3-bucket').val(),\n prefix: this.$('#g-new-s3-prefix').val(),\n accessKeyId: this.$('#g-new-s3-access-key-id').val(),\n secret: this.$('#g-new-s3-secret').val(),\n service: this.$('#g-new-s3-service').val(),\n readOnly: this.$('#g-new-s3-readonly').is(':checked')\n });\n }\n },\n\n render: function () {\n this.$el.html(girder.templates.newAssetstore());\n return this;\n },\n\n /**\n * Call this to make the request to the server to create the assetstore.\n * @param e The submit event from the form.\n * @param container The element to write the error message into.\n * @param data The form data to POST to /assetstore\n */\n createAssetstore: function (e, container, data) {\n e.preventDefault();\n this.$('.g-new-assetstore-submit').addClass('disabled');\n container.empty();\n\n var assetstore = new girder.models.AssetstoreModel();\n assetstore.set(data);\n assetstore.on('g:saved', function () {\n this.$('.g-new-assetstore-submit').removeClass('disabled');\n this.trigger('g:created', assetstore);\n }, this).on('g:error', function (err) {\n this.$('.g-new-assetstore-submit').removeClass('disabled');\n container.text(err.responseJSON.message);\n }, this).save();\n }\n});\n","/**\n * This widget is used to provide a consistent widget for iterating amongst\n * pages of a girder.Collection.\n */\ngirder.views.PaginateWidget = girder.View.extend({\n events: {\n 'click .g-page-next': function (e) {\n if (!$(e.currentTarget).hasClass('disabled')) {\n this.collection.fetchNextPage();\n }\n },\n 'click .g-page-prev': function (e) {\n if (!$(e.currentTarget).hasClass('disabled')) {\n this.collection.fetchPreviousPage();\n }\n }\n },\n\n initialize: function (settings) {\n this.collection = settings.collection;\n },\n\n /**\n * Do not call render() until the collection has been fetched once.\n */\n render: function () {\n this.$el.html(girder.templates.paginateWidget({\n collection: this.collection\n }));\n\n if (this.collection.hasNextPage()) {\n this.$('.g-page-next').removeClass('disabled');\n } else {\n this.$('.g-page-next').addClass('disabled');\n }\n\n if (this.collection.hasPreviousPage()) {\n this.$('.g-page-prev').removeClass('disabled');\n } else {\n this.$('.g-page-prev').addClass('disabled');\n }\n return this;\n }\n});\n","/**\n * This widget provides a consistent breadcrumb to be displayed on the admin\n * configuration pages for plugins.\n */\ngirder.views.PluginConfigBreadcrumbWidget = girder.View.extend({\n events: {\n 'click a.g-admin-console-link': function () {\n girder.router.navigate('admin', {trigger: true});\n },\n 'click a.g-plugins-link': function () {\n girder.router.navigate('plugins', {trigger: true});\n }\n },\n\n initialize: function (settings) {\n this.pluginName = settings.pluginName;\n },\n\n render: function () {\n this.$el.html(girder.templates.pluginConfigBreadcrumb({\n pluginName: this.pluginName\n }));\n\n return this;\n }\n});\n","/**\n * This widget provides a text field that will search any set of data types\n * and show matching results as the user types. Results can be clicked,\n * triggering a callback.\n */\ngirder.views.SearchFieldWidget = girder.View.extend({\n events: {\n 'input .g-search-field': 'search',\n\n 'click .g-search-mode-radio': function (e) {\n this.currentMode = $(e.target).val();\n this.hideResults().search();\n\n window.setTimeout(_.bind(function () {\n this.$('.g-search-mode-choose').popover('hide');\n }, this), 250);\n },\n\n 'click .g-search-result>a': function (e) {\n this._resultClicked($(e.currentTarget));\n },\n\n 'keydown .g-search-field': function (e) {\n var code = e.keyCode || e.which;\n var list, pos;\n if (code === 40) { /* down arrow */\n list = this.$('.g-search-result');\n pos = list.index(list.filter('.g-search-selected')) + 1;\n list.removeClass('g-search-selected');\n if (pos < list.length) {\n list.eq(pos).addClass('g-search-selected');\n }\n } else if (code === 38) { /* up arrow */\n list = this.$('.g-search-result');\n pos = list.index(list.filter('.g-search-selected')) - 1;\n list.removeClass('g-search-selected');\n if (pos === -2) {\n pos = list.length - 1;\n }\n if (pos >= 0) {\n list.eq(pos).addClass('g-search-selected');\n }\n } else if (code === 13) { /* enter */\n var link = this.$('.g-search-result.g-search-selected>a');\n if (link.length) {\n this._resultClicked(link);\n }\n }\n }\n },\n\n /**\n * @param [settings.placeholder=\"Search...\"] The placeholder text for the input field.\n * @param [settings.getInfoCallback] For custom resource types, this callback can\n * be passed in to resolve their title and icon. This callback should\n * return an object with \"icon\" and \"text\" fields if it can resolve\n * the result, or return falsy otherwise.\n * @param [settings.modes=[\"text\", \"prefix\"]] A string or list of strings\n * representing the allowed search modes. Supported modes: \"text\", \"prefix\".\n * If multiple are allowed, users are able to select which one to use\n * via a dropdown.\n */\n initialize: function (settings) {\n this.ajaxLock = false;\n this.pending = null;\n\n this.placeholder = settings.placeholder || 'Search...';\n this.getInfoCallback = settings.getInfoCallback || null;\n this.types = settings.types || [];\n this.modes = settings.modes || ['text', 'prefix'];\n\n if (!_.isArray(this.modes)) {\n this.modes = [this.modes];\n }\n\n this.currentMode = this.modes[0];\n },\n\n search: function () {\n var q = this.$('.g-search-field').val();\n\n if (!q) {\n this.hideResults();\n return this;\n }\n\n if (this.ajaxLock) {\n this.pending = q;\n } else {\n this._doSearch(q);\n }\n\n return this;\n },\n\n _resultClicked: function (link) {\n this.trigger('g:resultClicked', {\n type: link.attr('resourcetype'),\n id: link.attr('resourceid'),\n text: link.text().trim(),\n icon: link.attr('g-icon')\n });\n },\n\n render: function () {\n this.$el.html(girder.templates.searchField({\n placeholder: this.placeholder,\n modes: this.modes,\n currentMode: this.currentMode\n }));\n\n this.$('[title]').tooltip({\n placement: 'auto'\n });\n\n this.$('.g-search-options-button').popover({\n trigger: 'manual',\n html: true,\n viewport: {\n selector: 'body',\n padding: 10\n },\n content: _.bind(function () {\n return girder.templates.searchHelp({\n mode: this.currentMode\n });\n }, this)\n }).click(function () {\n $(this).popover('toggle');\n });\n\n this.$('.g-search-mode-choose').popover({\n trigger: 'manual',\n html: true,\n viewport: {\n selector: 'body',\n padding: 10\n },\n content: _.bind(function () {\n return girder.templates.searchModeSelect({\n modes: this.modes,\n currentMode: this.currentMode\n });\n }, this)\n }).click(function () {\n $(this).popover('toggle');\n });\n\n return this;\n },\n\n /**\n * Parent views should call this if they wish to hide the result list.\n */\n hideResults: function () {\n this.$('.dropdown').removeClass('open');\n return this;\n },\n\n /**\n * Parent views should call this if they wish to clear the search text.\n */\n clearText: function () {\n this.$('.g-search-field').val('');\n return this;\n },\n\n /**\n * Parent views should call this if they wish to reset the search widget,\n * i.e. clear it and hide any results.\n */\n resetState: function () {\n return this.hideResults().clearText();\n },\n\n _doSearch: function (q) {\n this.ajaxLock = true;\n this.pending = null;\n\n girder.restRequest({\n path: 'resource/search',\n data: {\n q: q,\n mode: this.currentMode,\n types: JSON.stringify(this.types)\n }\n }).done(_.bind(function (results) {\n this.ajaxLock = false;\n\n if (this.pending) {\n this._doSearch(this.pending);\n } else {\n var list = this.$('.g-search-results>ul');\n var resources = [];\n _.each(this.types, function (type) {\n _.each(results[type] || [], function (result) {\n var text, icon;\n if (type === 'user') {\n text = result.firstName + ' ' + result.lastName +\n ' (' + result.login + ')';\n icon = 'user';\n } else if (type === 'group') {\n text = result.name;\n icon = 'users';\n } else if (type === 'collection') {\n text = result.name;\n icon = 'sitemap';\n } else if (type === 'folder') {\n text = result.name;\n icon = 'folder';\n } else if (type === 'item') {\n text = result.name;\n icon = 'doc-text-inv';\n } else {\n if (this.getInfoCallback) {\n var res = this.getInfoCallback(type, result);\n if (res) {\n text = res.text;\n icon = res.icon;\n }\n }\n if (!text || !icon) {\n text = '[unknown type]';\n icon = 'attention';\n }\n }\n resources.push({\n type: type,\n id: result._id,\n text: text,\n icon: icon\n });\n }, this);\n }, this);\n list.html(girder.templates.searchResults({\n results: resources\n }));\n\n this.$('.dropdown').addClass('open');\n }\n }, this));\n }\n});\n","/**\n * This widget renders the state of a progress notification.\n */\ngirder.views.TaskProgressWidget = girder.View.extend({\n\n initialize: function (settings) {\n this.progress = settings.progress;\n },\n\n render: function () {\n var width = '0', barClass = [], progressClass = [], percentText = '',\n timeLeftText = '';\n\n if (this.progress.data.state === 'active') {\n if (this.progress.data.total <= 0) {\n width = '100%';\n barClass.push('progress-bar-warning');\n progressClass.push('progress-striped', 'active');\n } else if (this.progress.data.current <= 0) {\n width = '0';\n percentText = '0%';\n } else if (this.progress.data.current >= this.progress.data.total) {\n percentText = width = '100%';\n } else {\n var percent = (100 * this.progress.data.current /\n this.progress.data.total);\n width = Math.round(percent) + '%';\n percentText = percent.toFixed(1) + '%';\n var timeLeft = parseInt(this.progress.estimatedTotalTime - (\n this.progress.updatedTime - this.progress.startTime), 10);\n if (timeLeft >= 3600) {\n timeLeftText = sprintf('%d:%02d:%02d left',\n timeLeft / 3600, (timeLeft / 60) % 60, timeLeft % 60);\n } else if (timeLeft > 0) {\n timeLeftText = sprintf('%d:%02d left',\n timeLeft / 60, timeLeft % 60);\n }\n }\n } else if (this.progress.data.state === 'success') {\n width = '100%';\n barClass.push('progress-bar-success');\n\n this._scheduleHide(5000);\n } else if (this.progress.data.state === 'error') {\n width = '100%';\n barClass.push('progress-bar-danger');\n\n this._scheduleHide(10000);\n }\n\n this.$el.html(girder.templates.taskProgress({\n progress: this.progress,\n width: width,\n barClass: barClass.join(' '),\n progressClass: progressClass.join(' '),\n percentText: percentText,\n timeLeftText: timeLeftText\n }));\n return this;\n },\n\n /**\n * Renders an update of the progress object.\n */\n update: function (progress) {\n this.progress = progress;\n this.render();\n },\n\n /**\n * Schedule a hide event to be triggered in the future.\n */\n _scheduleHide: function (ms) {\n var widget = this;\n window.setTimeout(function () {\n widget.$el.fadeOut(500, function () {\n widget.remove();\n widget.trigger('g:hide', widget.progress);\n });\n }, ms);\n }\n});\n","/**\n * This widget displays a timeline of events. This is visualized as a line (a bar)\n * with two sorts of primitives overlaid:\n *\n * 1. Segments: spans of time, with a start and end.\n * 2. Points: a single point in time. Points always display on top of segments.\n *\n * Any number of these primitives can be displayed on the timeline, so long as they\n * are bounded between the specified startTime and endTime. The time values for\n * startTime, endTime, and for the primitives can be specified either as numeric\n * values (i.e. a relative offset in time), or as date strings that can be parsed\n * by JavaScript, or as Date objects. For obvious reasons, in a single instance of\n * this widget, it is not possible to mix the numeric/relative values with datestamp\n * values.\n */\ngirder.views.TimelineWidget = girder.View.extend({\n /**\n * Initialize the timeline widget.\n *\n * @param settings.startTime The numeric value or timestamp representing where\n * the timeline should start.\n * @param settings.endTime The numeric value or timestamp representing where\n * the timeline should end. Must be greater than the startTime value. All\n * segments and points should be bounded within the interval [startTime, endTime].\n * @param [settings.numeric=false] If the time values being passed in are simply\n * relative, scalar values (e.g. number of seconds since start) rather than\n * timestamps, set this to true.\n * @param [settings.startLabel] Pass to show a label for the start of the timeline.\n * @param [settings.endLabel] Pass to show a label for the end of the timeline.\n * @param [settings.defaultSegmentClass='g-segment-default'] A CSS class set\n * on segments that do not specify a class.\n * @param [settings.defaultPointClass='g-point-default'] A CSS class set\n * on points that do not specify a class.\n * @param [settings.segments=[]] A list of segments. Each element of the list\n * should be an object with the following keys:\n * - start: A number or timestamp representing\n * - end: A numer of timestamp representing the end of this segment.\n * - [class]: A CSS class name to apply to the segment. Uses the\n * widget's defaultSegmentClass if this key is not set.\n * - [tooltip]: A tooltip value for this segment. Tooltips containing the\n * special token \"%r\" will have that token expanded into the\n * elapsed time between start and end.\n * @param [settings.points=[]] A list of points. Each element of the list should\n * be an object with the following keys:\n * - time: A number or timestamp representing the location of the point.\n * - [class]: A CSS class name to apply to the point. Uses the\n * widget's defaultPointClass if this key is not set.\n * - [tooltip]: A tooltip value for this point. Tooltips containing the\n * special token \"%t\" will have that token expanded into the\n * time value for that point.\n */\n initialize: function (settings) {\n this.startTime = settings.startTime;\n this.endTime = settings.endTime;\n this.segments = settings.segments || [];\n this.points = settings.points || [];\n this.numeric = !!settings.numeric;\n this.startLabel = settings.startLabel;\n this.endLabel = settings.endLabel;\n this.defaultSegmentClass = settings.defaultSegmentClass || 'g-segment-default';\n this.defaultPointClass = settings.defaultPointClass || 'g-point-default';\n\n this._processData();\n },\n\n // Processes the points and segments for display in the widget\n _processData: function () {\n if (!this.numeric) {\n this.startTime = new Date(this.startTime);\n this.endTime = new Date(this.endTime);\n }\n\n if (this.endTime <= this.startTime) {\n console.error('Timeline widget: end time must be after start time.');\n this._processedSegments = [];\n this._processedPoints = [];\n return;\n }\n\n var range = this.endTime - this.startTime;\n\n this._processedSegments = _.map(this.segments, function (segment) {\n var start = this.numeric ? segment.start : new Date(segment.start);\n var end = this.numeric ? segment.end : new Date(segment.end);\n var classes = segment.class ? [segment.class] : [this.defaultSegmentClass];\n\n if (segment.tooltip) {\n classes.push('g-tooltip');\n }\n\n return {\n class: classes.join(' '),\n left: (100 * (start - this.startTime) / range).toFixed(1) + '%',\n width: (100 * (end - start) / range).toFixed(1) + '%',\n tooltip: this._segmentTooltip(segment, {\n range: this.numeric ? end - start : (end - start) / 1000\n })\n };\n }, this);\n\n this._processedPoints = _.map(this.points, function (point) {\n var time = this.numeric ? point.time : new Date(point.time);\n var classes = point.class ? [point.class] : [this.defaultPointClass];\n\n if (point.tooltip) {\n classes.push('g-tooltip');\n }\n\n return {\n class: classes.join(' '),\n left: (100 * (time - this.startTime) / range).toFixed(1) + '%',\n tooltip: this._pointTooltip(point, {\n time: time\n })\n };\n }, this);\n },\n\n _segmentTooltip: function (segment, info) {\n if (!segment.tooltip) {\n return null;\n }\n\n return segment.tooltip.replace('%r', info.range);\n },\n\n _pointTooltip: function (point, info) {\n if (!point.tooltip) {\n return null;\n }\n\n if (this.numeric) {\n return point.tooltip.replace('%t', info.time);\n } else {\n return point.tooltip.replace('%t', info.time.toISOString());\n }\n },\n\n render: function () {\n this.$el.html(girder.templates.timeline({\n segments: this._processedSegments,\n points: this._processedPoints,\n startLabel: this.startLabel,\n endLabel: this.endLabel\n }));\n\n this.$('.g-tooltip').tooltip({\n delay: 100,\n container: this.$el\n });\n\n return this;\n }\n});\n","/**\n * This widget is used to upload files to a folder. Pass a folder model\n * to its constructor as the parent folder that will be uploaded into.\n * Events:\n * itemComplete: Triggered each time an individual item is finished uploading.\n * finished: Triggered when the entire set of items is uploaded.\n */\ngirder.views.UploadWidget = girder.View.extend({\n events: {\n 'submit #g-upload-form': function (e) {\n e.preventDefault();\n this.startUpload();\n },\n 'click .g-resume-upload': function () {\n this.$('.g-upload-error-message').html('');\n this.currentFile.resumeUpload();\n },\n 'click .g-restart-upload': function () {\n this.$('.g-upload-error-message').html('');\n this.uploadNextFile();\n },\n 'change #g-files': function () {\n var files = this.$('#g-files')[0].files;\n\n if (files.length) {\n this.files = files;\n this.filesChanged();\n }\n },\n 'click .g-drop-zone': function () {\n this.$('#g-files').click();\n },\n 'dragenter .g-drop-zone': function (e) {\n e.stopPropagation();\n e.preventDefault();\n e.originalEvent.dataTransfer.dropEffect = 'copy';\n this.$('.g-drop-zone')\n .addClass('g-dropzone-show')\n .html('
Drop files here');\n },\n 'dragleave .g-drop-zone': function (e) {\n e.stopPropagation();\n e.preventDefault();\n this.$('.g-drop-zone')\n .removeClass('g-dropzone-show')\n .html(' Browse or drop files');\n },\n 'dragover .g-drop-zone': function (e) {\n e.preventDefault();\n },\n 'drop .g-drop-zone': 'filesDropped'\n },\n\n /**\n * This widget has several configuration options to control its view and\n * behavior. The following keys can be passed in the settings object:\n *\n * @param [parent] If the parent object is known when instantiating this\n * upload widget, pass the object here.\n * @param [parentType=folder] If the parent type is known when instantiating this\n * upload widget, pass the object here. Otherwise set noParent: true and\n * set it later, prior to starting the upload.\n * @param [noParent=false] If the parent object being uploaded into is not known\n * at the time of widget instantiation, pass noParent: true. Callers must\n * ensure that the parent is set by the time uploadNextFile() actually gets\n * called.\n * @param [title=\"Upload files\"] Title for the widget. This is highly recommended\n * when rendering as a modal dialog. To disable rendering of the title, simply\n * pass a falsy object.\n * @param [modal=true] This widget normally renders as a modal dialog. Pass\n * modal: false to disable the modal behavior and simply render underneath a\n * parent element.\n * @param [overrideStart=false] Some callers will want to hook into the pressing\n * of the start upload button and add their own logic prior to actually sending\n * the files. To do so, set overrideStart: true and bind to the \"g:uploadStarted\"\n * event of this widget. The caller is then responsible for calling \"uploadNextFile()\"\n * on the widget when they have completed their actions and are ready to actually\n * send the files.\n *\n * Other events:\n * - \"g:filesChanged\": This is triggered any time the user changes the\n * file selection, either by dropping or browsing and selecting new files.\n * Handlers will receive a single argument, which is the list of chosen files.\n * - \"g:uploadFinished\": When all files have been successfully uploaded,\n * this event is fired.\n */\n initialize: function (settings) {\n if (settings.noParent) {\n this.parent = null;\n this.parentType = null;\n } else {\n this.parent = settings.parent || settings.folder;\n this.parentType = settings.parentType || 'folder';\n }\n this.files = [];\n this.totalSize = 0;\n this.title = _.has(settings, 'title') ? settings.title : 'Upload files';\n this.modal = _.has(settings, 'modal') ? settings.modal : true;\n this.overrideStart = settings.overrideStart || false;\n },\n\n render: function () {\n if (this.modal) {\n this.$el.html(girder.templates.uploadWidget({\n parent: this.parent,\n parentType: this.parentType,\n title: this.title\n }));\n\n var base = this;\n var dialogid;\n if (this.parentType === 'file') {\n dialogid = this.parent.get('_id');\n }\n\n this.$el.girderModal(this).on('hidden.bs.modal', function () {\n /* If we are showing the resume option, we have a partial upload\n * that should be deleted, since the user has no way to get back\n * to it. */\n if ($('.g-resume-upload').length && base.currentFile) {\n base.currentFile.abortUpload();\n }\n girder.dialogs.handleClose('upload', undefined, dialogid);\n });\n\n girder.dialogs.handleOpen('upload', undefined, dialogid);\n } else {\n this.$el.html(girder.templates.uploadWidgetNonModal({\n parent: this.parent,\n parentType: this.parentType,\n title: this.title\n }));\n }\n return this;\n },\n\n filesDropped: function (e) {\n e.stopPropagation();\n e.preventDefault();\n this.$('.g-drop-zone')\n .removeClass('g-dropzone-show')\n .html(' Browse or drop files');\n this.files = e.originalEvent.dataTransfer.files;\n this.filesChanged();\n },\n\n filesChanged: function () {\n if (this.files.length === 0) {\n this.$('.g-overall-progress-message').text('No files selected');\n this.setUploadEnabled(false);\n } else {\n this.totalSize = 0;\n _.each(this.files, function (file) {\n this.totalSize += file.size;\n }, this);\n\n var msg;\n\n if (this.files.length > 1) {\n msg = 'Selected ' + this.files.length + ' files';\n } else {\n msg = 'Selected ' + this.files[0].name + '';\n }\n this.$('.g-overall-progress-message').html(' ' +\n msg + ' (' + girder.formatSize(this.totalSize) +\n ') -- Press start button');\n this.setUploadEnabled(true);\n this.$('.g-progress-overall,.g-progress-current').addClass('hide');\n this.$('.g-current-progress-message').empty();\n this.$('.g-upload-error-message').empty();\n }\n\n this.trigger('g:filesChanged', this.files);\n },\n\n startUpload: function () {\n this.setUploadEnabled(false);\n this.$('.g-drop-zone').addClass('hide');\n this.$('.g-progress-overall,.g-progress-current').removeClass('hide');\n this.$('.g-upload-error-message').empty();\n\n this.currentIndex = 0;\n this.overallProgress = 0;\n this.trigger('g:uploadStarted');\n\n if (!this.overrideStart) {\n this.uploadNextFile();\n }\n },\n\n /**\n * Enable or disable the start upload button.\n *\n * @param state {bool} Truthy for enabled, falsy for disabled.\n */\n setUploadEnabled: function (state) {\n if (state) {\n this.$('.g-start-upload').removeClass('disabled');\n } else {\n this.$('.g-start-upload').addClass('disabled');\n }\n },\n\n /**\n * Initializes the upload of a file by requesting the upload token\n * from the server. If successful, this will call _uploadChunk to send the\n * actual bytes from the file if it is of non-zero length.\n */\n uploadNextFile: function () {\n if (this.currentIndex >= this.files.length) {\n // All files have finished\n if (this.modal) {\n this.$el.modal('hide');\n }\n this.trigger('g:uploadFinished', {\n files: this.files,\n totalSize: this.totalSize\n });\n return;\n }\n\n this.currentFile = this.parentType === 'file'\n ? this.parent : new girder.models.FileModel();\n\n this.currentFile.on('g:upload.complete', function () {\n this.currentIndex += 1;\n this.uploadNextFile();\n }, this).on('g:upload.chunkSent', function (info) {\n this.overallProgress += info.bytes;\n }, this).on('g:upload.progress', function (info) {\n var currentProgress = info.startByte + info.loaded;\n\n this.$('.g-progress-current>.progress-bar').css('width',\n Math.ceil(100 * currentProgress / info.total) + '%');\n this.$('.g-progress-overall>.progress-bar').css('width',\n Math.ceil(100 * (this.overallProgress + info.loaded) /\n this.totalSize) + '%');\n this.$('.g-current-progress-message').html(\n '' + (this.currentIndex + 1) + ' of ' +\n this.files.length + ' - ' + info.file.name + ': ' +\n girder.formatSize(currentProgress) + ' / ' +\n girder.formatSize(info.total)\n );\n this.$('.g-overall-progress-message').html('Overall progress: ' +\n girder.formatSize(this.overallProgress + info.loaded) + ' / ' +\n girder.formatSize(this.totalSize));\n }, this).on('g:upload.error', function (info) {\n var html = info.message + ' ' +\n 'Click to resume upload';\n $('.g-upload-error-message').html(html);\n }, this).on('g:upload.errorStarting', function (info) {\n var html = info.message + ' ' +\n 'Click to restart upload';\n $('.g-upload-error-message').html(html);\n }, this);\n\n if (this.parentType === 'file') {\n this.currentFile.updateContents(this.files[this.currentIndex]);\n } else {\n this.currentFile.upload(this.parent, this.files[this.currentIndex]);\n }\n }\n});\n"]}