Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | 300x 300x 498x 498x 498x 497x 497x 497x 497x 497x 994x 994x 497x 497x 4x 4x 4x 497x 497x 497x 497x 491x 497x 497x | /*
* This module renders a dropdown list that allows the user to change the
* display type for a grid.
*
* @author Tamara Robichet <tamara.robichet@akeneo.com>
* @copyright 2017 Akeneo SAS (http://www.akeneo.com)
* @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
*/
define([
'jquery',
'underscore',
'backbone',
'oro/translator',
'pim/form',
'pim/template/datagrid/display-selector',
'pim/router'
], function (
$,
_,
Backbone,
__,
BaseForm,
template,
Routing
) {
return BaseForm.extend({
className: 'AknDropdown AknDropdown--left AknTitleContainer-displaySelector',
gridName: null,
template: _.template(template),
events: {
'click .display-selector-item': 'setDisplayType'
},
/**
* @inheritDoc
*/
initialize(options) {
this.gridName = options.config.gridName;
Iif (null === this.gridName) {
new Error('You must specify gridName for the display-selector');
}
return BaseForm.prototype.initialize.apply(this, arguments);
},
/**
* @inheritDoc
*/
configure() {
this.listenTo(this.getRoot(), 'grid_load:start', this.collectDisplayOptions.bind(this));
return BaseForm.prototype.configure.apply(this, arguments);
},
/**
* Receives the grid displayTypes config from the gridView and
* renders them (with translated labels);
*
* @param {Backbone.Collection} collection The datagrid collection
* @param {Backbone.View} gridView The datagrid view
*/
collectDisplayOptions(collection, gridView) {
const displayTypes = gridView.options.displayTypes;
Iif (undefined === displayTypes) {
return;
}
for (let display in displayTypes) {
const type = displayTypes[display];
type.label = __(type.label);
}
this.renderDisplayTypes(displayTypes);
},
/**
* Returns the display type stored for a grid name
* @return {String} The name of the display type e.g. thumbnail
*/
getStoredType() {
return localStorage.getItem(`display-selector:${this.gridName}`);
},
/**
* Gets the name of the display type from the event target and
* puts it in localStorage using the gridName as the key.
*
* @param {jQuery.Event} event The dropdown item click event
*/
setDisplayType(event) {
const type = this.$(event.target).data('type');
localStorage.setItem(`display-selector:${this.gridName}`, type);
return Routing.reloadPage();
},
/**
* Renders the dropdown list to show the display types
*
* @param {Object} types A config object containing the display types
* @return {Function}
*/
renderDisplayTypes(types) {
const firstType = Object.keys(types)[0];
let selectedType = this.getStoredType();
const displayLabel = __('pim_datagrid.display_selector.label');
if (undefined === types[selectedType]) {
selectedType = firstType;
}
this.$el.html(this.template({
displayLabel,
types,
selectedType
}));
return BaseForm.prototype.render.apply(this, arguments);
}
});
});
|