2017-01-31 07:50:28 +01:00
|
|
|
const Backbone = require('backbone');
|
|
|
|
const IconMap = require('../const/icon-map');
|
|
|
|
const Launcher = require('../comp/launcher');
|
|
|
|
const Logger = require('../util/logger');
|
2015-12-12 09:53:50 +01:00
|
|
|
|
2017-01-31 07:50:28 +01:00
|
|
|
const logger = new Logger('icon-select-view');
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2017-01-31 07:50:28 +01:00
|
|
|
const IconSelectView = Backbone.View.extend({
|
2015-12-16 22:50:45 +01:00
|
|
|
template: require('templates/icon-select.hbs'),
|
2015-10-17 23:49:24 +02:00
|
|
|
|
|
|
|
events: {
|
2015-11-21 18:04:04 +01:00
|
|
|
'click .icon-select__icon': 'iconClick',
|
|
|
|
'click .icon-select__icon-download': 'downloadIcon',
|
|
|
|
'click .icon-select__icon-select': 'selectIcon',
|
|
|
|
'change .icon-select__file-input': 'iconSelected'
|
2015-10-17 23:49:24 +02:00
|
|
|
},
|
|
|
|
|
2015-11-22 09:21:12 +01:00
|
|
|
initialize: function() {
|
|
|
|
this.special = {
|
|
|
|
select: null,
|
|
|
|
download: null
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2015-10-17 23:49:24 +02:00
|
|
|
render: function() {
|
|
|
|
this.renderTemplate({
|
|
|
|
sel: this.model.iconId,
|
2015-11-21 18:04:04 +01:00
|
|
|
icons: IconMap,
|
2015-11-21 23:15:51 +01:00
|
|
|
canDownloadFavicon: !!this.model.url,
|
|
|
|
customIcons: this.model.file.getCustomIcons()
|
2015-10-17 23:49:24 +02:00
|
|
|
}, true);
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
iconClick: function(e) {
|
2017-01-31 07:50:28 +01:00
|
|
|
const target = $(e.target).closest('.icon-select__icon');
|
|
|
|
const iconId = target[0].getAttribute('data-val');
|
2015-11-22 09:21:12 +01:00
|
|
|
if (iconId === 'special') {
|
2017-01-31 07:50:28 +01:00
|
|
|
const iconData = this.special[target.data('special')];
|
2015-11-22 09:21:12 +01:00
|
|
|
if (iconData) {
|
2017-01-31 07:50:28 +01:00
|
|
|
const id = this.model.file.addCustomIcon(iconData.data);
|
2015-11-22 09:21:12 +01:00
|
|
|
this.trigger('select', { id: id, custom: true });
|
|
|
|
e.preventDefault();
|
|
|
|
e.stopImmediatePropagation();
|
|
|
|
}
|
|
|
|
} else if (iconId) {
|
2017-01-31 07:50:28 +01:00
|
|
|
const isCustomIcon = target.hasClass('icon-select__icon-custom');
|
2015-11-21 23:15:51 +01:00
|
|
|
this.trigger('select', { id: iconId, custom: isCustomIcon });
|
2015-10-17 23:49:24 +02:00
|
|
|
}
|
2015-11-21 18:04:04 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
downloadIcon: function() {
|
|
|
|
if (this.downloadingFavicon) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.downloadingFavicon = true;
|
|
|
|
this.$el.find('.icon-select__icon-download>i').addClass('fa-spinner fa-spin');
|
2016-03-05 19:31:32 +01:00
|
|
|
this.$el.find('.icon-select__icon-download').removeClass('icon-select__icon--download-error');
|
2017-01-31 07:50:28 +01:00
|
|
|
const url = this.getIconUrl(!Launcher); // inside launcher we can load images without CORS
|
|
|
|
const img = document.createElement('img');
|
2015-11-22 09:21:12 +01:00
|
|
|
img.crossOrigin = 'Anonymous';
|
2015-11-21 18:04:04 +01:00
|
|
|
img.src = url;
|
2016-07-17 13:30:38 +02:00
|
|
|
img.onload = () => {
|
|
|
|
this.setSpecialImage(img, 'download');
|
|
|
|
this.$el.find('.icon-select__icon-download img').remove();
|
|
|
|
this.$el.find('.icon-select__icon-download>i').removeClass('fa-spinner fa-spin');
|
|
|
|
this.$el.find('.icon-select__icon-download').addClass('icon-select__icon--custom-selected').append(img);
|
|
|
|
this.downloadingFavicon = false;
|
2015-11-21 18:04:04 +01:00
|
|
|
};
|
2016-07-17 13:30:38 +02:00
|
|
|
img.onerror = e => {
|
2015-12-12 09:53:50 +01:00
|
|
|
logger.error('Favicon download error: ' + url, e);
|
2016-07-17 13:30:38 +02:00
|
|
|
this.$el.find('.icon-select__icon-download>i').removeClass('fa-spinner fa-spin');
|
|
|
|
this.$el.find('.icon-select__icon-download')
|
2016-03-05 19:31:32 +01:00
|
|
|
.removeClass('icon-select__icon--custom-selected')
|
|
|
|
.addClass('icon-select__icon--download-error');
|
2016-07-17 13:30:38 +02:00
|
|
|
this.downloadingFavicon = false;
|
2015-11-21 18:04:04 +01:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2015-12-19 16:47:53 +01:00
|
|
|
getIconUrl: function(useService) {
|
2015-11-21 18:04:04 +01:00
|
|
|
if (!this.model.url) {
|
|
|
|
return null;
|
|
|
|
}
|
2017-01-31 07:50:28 +01:00
|
|
|
let url = this.model.url.replace(/([^\/:]\/.*)?$/, match => (match && match[0]) + '/favicon.ico');
|
2016-03-05 19:22:00 +01:00
|
|
|
if (url.indexOf('://') < 0) {
|
2015-11-21 18:04:04 +01:00
|
|
|
url = 'http://' + url;
|
|
|
|
}
|
2015-12-19 16:47:53 +01:00
|
|
|
if (useService) {
|
2017-11-13 22:35:46 +01:00
|
|
|
return 'https://favicon.keeweb.info/' + url.replace(/^.*:\/+/, '').replace(/\/.*/, '');
|
2015-11-22 11:59:13 +01:00
|
|
|
}
|
2015-11-21 18:04:04 +01:00
|
|
|
return url;
|
|
|
|
},
|
|
|
|
|
|
|
|
selectIcon: function() {
|
|
|
|
this.$el.find('.icon-select__file-input').click();
|
|
|
|
},
|
|
|
|
|
|
|
|
iconSelected: function(e) {
|
2017-01-31 07:50:28 +01:00
|
|
|
const file = e.target.files[0];
|
2015-11-21 18:04:04 +01:00
|
|
|
if (file) {
|
2017-01-31 07:50:28 +01:00
|
|
|
const reader = new FileReader();
|
2016-07-17 13:30:38 +02:00
|
|
|
reader.onload = e => {
|
2017-01-31 07:50:28 +01:00
|
|
|
const img = document.createElement('img');
|
2016-07-17 13:30:38 +02:00
|
|
|
img.onload = () => {
|
|
|
|
this.setSpecialImage(img, 'select');
|
|
|
|
this.$el.find('.icon-select__icon-select img').remove();
|
|
|
|
this.$el.find('.icon-select__icon-select').addClass('icon-select__icon--custom-selected').append(img);
|
2015-11-22 09:21:12 +01:00
|
|
|
};
|
2015-11-21 18:04:04 +01:00
|
|
|
img.src = e.target.result;
|
|
|
|
};
|
|
|
|
reader.readAsDataURL(file);
|
|
|
|
} else {
|
2016-07-17 13:30:38 +02:00
|
|
|
this.$el.find('.icon-select__icon-select img').remove();
|
|
|
|
this.$el.find('.icon-select__icon-select').removeClass('icon-select__icon--custom-selected');
|
2015-11-21 18:04:04 +01:00
|
|
|
}
|
2015-11-22 09:21:12 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
setSpecialImage: function(img, name) {
|
2017-01-31 07:50:28 +01:00
|
|
|
const size = Math.min(img.width, 32);
|
|
|
|
const canvas = document.createElement('canvas');
|
|
|
|
const ctx = canvas.getContext('2d');
|
2015-11-22 09:21:12 +01:00
|
|
|
canvas.width = size;
|
|
|
|
canvas.height = size;
|
|
|
|
ctx.drawImage(img, 0, 0, size, size);
|
2017-01-31 07:50:28 +01:00
|
|
|
const data = canvas.toDataURL().replace(/^.*,/, '');
|
2015-11-22 09:21:12 +01:00
|
|
|
this.special[name] = { width: img.width, height: img.height, data: data };
|
2015-10-17 23:49:24 +02:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2015-10-31 20:09:32 +01:00
|
|
|
module.exports = IconSelectView;
|