125 lines
4.6 KiB
JavaScript
125 lines
4.6 KiB
JavaScript
|
|
!window.Common && (window.Common = {});
|
|
!Common.Views && (Common.Views = {});
|
|
|
|
define([
|
|
'common/main/lib/component/Window',
|
|
'common/main/lib/component/MetricSpinner',
|
|
'common/main/lib/component/TextareaField'
|
|
], function () { 'use strict';
|
|
|
|
Common.Views.ShareDialog = Common.UI.Window.extend(_.extend({
|
|
options: {
|
|
width: 300,
|
|
header: true,
|
|
style: 'min-width: 300px;',
|
|
cls: 'modal-dlg',
|
|
buttons: null
|
|
},
|
|
|
|
initialize : function(options) {
|
|
_.extend(this.options, {
|
|
title: this.textTitle
|
|
}, options || {});
|
|
|
|
this.template = [
|
|
'<div class="box" style="height: 110px;">',
|
|
'<table cols="2" style="width: 100%;">',
|
|
'<tr>',
|
|
'<td style="padding-right: 10px;">',
|
|
'<label class="input-label">' + this.textWidth + ':</label>',
|
|
'<div id="share-size-spin-width" style="display: inline-block;margin-left: 5px;"></div>',
|
|
'</td>',
|
|
'<td style="float:right;">',
|
|
'<label class="input-label">' + this.textHeight + ':</label>',
|
|
'<div id="share-size-spin-height" style="display: inline-block;margin-left: 5px;"></div>',
|
|
'</td>',
|
|
'</tr>',
|
|
'<tr>',
|
|
'<td colspan="2">',
|
|
'<div id="share-embed" style="margin-top: 15px;"></div>',
|
|
'</td>',
|
|
'</tr>',
|
|
'</table>',
|
|
'</div>',
|
|
'<div class="separator horizontal"></div>',
|
|
'<div class="footer center">',
|
|
'<button class="btn normal primary dlg-btn" style="min-width: 86px;width: auto;">' + this.txtCopy + '</button>',
|
|
'</div>'
|
|
].join('');
|
|
|
|
this.options.tpl = _.template(this.template)(this.options);
|
|
this.embedConfig = this.options.embedConfig;
|
|
this.embedCode = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="{0}" width="{1}" height="{2}"></iframe>';
|
|
|
|
Common.UI.Window.prototype.initialize.call(this, this.options);
|
|
},
|
|
|
|
render: function() {
|
|
Common.UI.Window.prototype.render.call(this);
|
|
|
|
this.spnWidth = new Common.UI.MetricSpinner({
|
|
el: $('#share-size-spin-width'),
|
|
step: 1,
|
|
width: 70,
|
|
defaultUnit : "px",
|
|
value: '400 px',
|
|
minValue: 400,
|
|
maxValue: 10000
|
|
});
|
|
this.spnWidth.on('change', _.bind(function(field, newValue, oldValue, eOpts){
|
|
this.updateEmbedCode();
|
|
}, this));
|
|
|
|
this.spnHeight = new Common.UI.MetricSpinner({
|
|
el: $('#share-size-spin-height'),
|
|
step: 1,
|
|
width: 70,
|
|
defaultUnit : "px",
|
|
value: '600 px',
|
|
minValue: 600,
|
|
maxValue: 10000
|
|
});
|
|
this.spnHeight.on('change', _.bind(function(field, newValue, oldValue, eOpts){
|
|
this.updateEmbedCode();
|
|
}, this));
|
|
|
|
this.textareaInput = new Common.UI.TextareaField({
|
|
el : $('#share-embed'),
|
|
style : 'width: 100%; height: 65px;',
|
|
value : ''
|
|
});
|
|
this.updateEmbedCode();
|
|
|
|
this.getChild().find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
|
|
},
|
|
|
|
getFocusedComponents: function() {
|
|
return [this.spnWidth, this.spnHeight, this.textareaInput];
|
|
},
|
|
|
|
getDefaultFocusableComponent: function () {
|
|
return this.textareaInput;
|
|
},
|
|
|
|
onBtnClick: function(event) {
|
|
this.textareaInput._input.select();
|
|
if ( !document.execCommand('copy') ) {
|
|
Common.UI.warning({
|
|
msg: this.warnCopy,
|
|
buttons: ['ok']
|
|
});
|
|
}
|
|
},
|
|
|
|
updateEmbedCode: function() {
|
|
this.textareaInput.setValue(Common.Utils.String.format(this.embedCode, this.embedConfig.embedUrl, this.spnWidth.getNumberValue(), this.spnHeight.getNumberValue()));
|
|
},
|
|
|
|
textTitle: 'Embed',
|
|
textWidth: 'Width',
|
|
textHeight: 'Height',
|
|
txtCopy: 'Copy to clipboard',
|
|
warnCopy: 'Browser\'s error! Use keyboard shortcut [Ctrl] + [C]'
|
|
}, Common.Views.ShareDialog || {}))
|
|
}); |