[common] added controller 'modals' to embed

This commit is contained in:
Maxim Kadushkin 2016-11-02 13:28:44 +03:00
parent c2d14e0ff7
commit aa58b8afdb
5 changed files with 152 additions and 96 deletions

View file

@ -0,0 +1,143 @@
/*
*
* (c) Copyright Ascensio System Limited 2010-2016
*
* This program is a free software product. You can redistribute it and/or
* modify it under the terms of the GNU Affero General Public License (AGPL)
* version 3 as published by the Free Software Foundation. In accordance with
* Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
* that Ascensio System SIA expressly excludes the warranty of non-infringement
* of any third-party rights.
*
* This program is distributed WITHOUT ANY WARRANTY; without even the implied
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
* details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
*
* You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
* EU, LV-1021.
*
* The interactive user interfaces in modified source and object code versions
* of the Program must display Appropriate Legal Notices, as required under
* Section 5 of the GNU AGPL version 3.
*
* Pursuant to Section 7(b) of the License you must retain the original Product
* logo when distributing the program. Pursuant to Section 7(e) we decline to
* grant you any rights under trademark law for use of our trademarks.
*
* All the Product's GUI elements, including illustrations and icon sets, as
* well as technical writing content are licensed under the terms of the
* Creative Commons Attribution-ShareAlike 4.0 International. See the License
* terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
*
*/
+function () {
!window.common && (window.common = {});
!common.controller && (common.controller = {});
common.controller.modals = new(function() {
var $dlgShare, $dlgEmbed;
var appConfig;
var embedCode = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="{embed-url}" width="{width}" height="{height}"></iframe>',
minEmbedWidth = 400,
minEmbedHeight = 600;
function copytext(el, event) {
el.select();
if ( !document.execCommand('copy') ) {
window.alert('Browser\'s error! Use keyboard shortcut [Ctrl] + [C]');
}
}
var createDlgShare = function () {
$dlgShare = common.view.modals.create('share');
$dlgShare.find('#btn-copyshort').on('click', copytext.bind(this, $dlgShare.find('#id-short-url')));
$dlgShare.find('.share-buttons > span').on('click', function(e){
var _url;
switch ($(e.target).attr('data-name')) {
case 'facebook':
_url = 'https://www.facebook.com/sharer/sharer.php?u=' + appConfig.shareUrl + '&t=' + appConfig.docTitle;
window.open(_url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
break;
case 'twitter':
_url = 'https://twitter.com/share?url='+ appConfig.shareUrl;
!!appConfig.docTitle && (_url += '&text=' + appConfig.docTitle);
window.open(_url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
break;
case 'gplus':
_url = 'https://plus.google.com/share?url=' + appConfig.shareUrl;
window.open(_url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes');
break;
case 'email':
window.open('mailto:?subject=I have shared a document with you: ' + appConfig.docTitle + '&body=I have shared a document with you: ' + appConfig.shareUrl + '"', '_self');
break;
}
});
$dlgShare.find('#id-short-url').val(appConfig.shareUrl);
};
var createDlgEmbed =function () {
$dlgEmbed = common.view.modals.create('embed');
var txtembed = $dlgEmbed.find('#txt-embed-url');
txtembed.text(embedCode.replace('{embed-url}', appConfig.embedUrl).replace('{width}', minEmbedWidth).replace('{height}', minEmbedHeight));
$dlgEmbed.find('#btn-copyembed').on('click', copytext.bind(this, txtembed));
$dlgEmbed.find('#txt-embed-width, #txt-embed-height').on({
'keypress': function(e){
if (e.keyCode == 13)
updateEmbedCode();
}
, 'focusout': function(e){
updateEmbedCode();
}
});
};
function updateEmbedCode(){
var $txtwidth = $dlgEmbed.find('#txt-embed-width');
var $txtheight = $dlgEmbed.find('#txt-embed-height');
var newWidth = parseInt($txtwidth.val()),
newHeight = parseInt($txtheight.val());
if (newWidth < minEmbedWidth)
newWidth = minEmbedWidth;
if (newHeight < minEmbedHeight)
newHeight = minEmbedHeight;
$dlgEmbed.find('#txt-embed-url').text(embedCode.replace('{embed-url}', appConfig.embedUrl).replace('{width}', newWidth).replace('{height}', newHeight));
$txtwidth.val(newWidth + 'px');
$txtheight.val(newHeight + 'px');
}
var attachToView = function(config) {
if ( config.share && !!appConfig.shareUrl ) {
if ( !$dlgShare ) {
createDlgShare();
}
$(config.share).on('click', function(e){
$dlgShare.modal('show');
});
}
if ( config.embed && !!appConfig.embedUrl ) {
if ( !$dlgEmbed ) {
createDlgEmbed();
}
$(config.embed).on('click', function(e) {
$dlgEmbed.modal('show');
})
}
};
return {
init: function(config) { appConfig = config; }
, attach: attachToView
};
});
}();

View file

@ -31,8 +31,9 @@
*
*/
!window.utils && (window.utils = {});
utils.modals = new(function() {
!window.common && (window.common = {});
!common.view && (common.view = {});
common.view.modals = new(function() {
var tplDialog = '<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="idm-title" aria-hidden="true">' +
'<div class="modal-dialog" role="document">' +
'<div class="modal-content">' +

View file

@ -340,6 +340,7 @@
<script type="text/javascript" src="../../common/Analytics.js"></script>
<script type="text/javascript" src="../../common/embed/lib/util/utils.js"></script>
<script type="text/javascript" src="../../common/embed/lib/view/modals.js"></script>
<script type="text/javascript" src="../../common/embed/lib/controller/modals.js"></script>
<script type="text/javascript" src="js/ApplicationView.js"></script>
<script type="text/javascript" src="js/ApplicationController.js"></script>
<script type="text/javascript" src="js/application.js"></script>

View file

@ -38,9 +38,6 @@ var ApplicationController = new(function(){
embedConfig = {},
permissions = {},
maxPages = 0,
minEmbedWidth = 400,
minEmbedHeight = 600,
embedCode = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="{embed-url}" width="{width}" height="{height}"></iframe>',
created = false,
ttOffset = [0, -10];
@ -73,6 +70,7 @@ var ApplicationController = new(function(){
config = $.extend(config, data.config);
embedConfig = $.extend(embedConfig, data.config.embedded);
common.controller.modals.init(embedConfig);
if ( !embedConfig.shareUrl )
$('#idt-share').hide();
@ -227,7 +225,10 @@ var ApplicationController = new(function(){
function onDocumentContentReady() {
hidePreloader();
ApplicationView.modals.create(embedConfig);
common.controller.modals.attach({
share: '#idt-share',
embed: '#idt-embed'
});
api.asc_registerCallback('asc_onStartAction', onLongActionBegin);
api.asc_registerCallback('asc_onEndAction', onLongActionEnd);
@ -241,51 +242,6 @@ var ApplicationController = new(function(){
Common.Gateway.on('processmouse', onProcessMouse);
Common.Gateway.on('downloadas', onDownloadAs);
function _copytext(el, event) {
el.select();
if ( !document.execCommand('copy') ) {
window.alert('Browser\'s error! Use keyboard shortcut [Ctrl] + [C]');
}
}
var m = ApplicationView.modals.get('share');
m.find('#btn-copyshort').on('click', _copytext.bind(this, m.find('#id-short-url')));
m.find('.share-buttons > span').on('click', function(e){
var _url;
switch ($(e.target).attr('data-name')) {
case 'facebook':
_url = 'https://www.facebook.com/sharer/sharer.php?u=' + embedConfig.shareUrl + '&t=' + embedConfig.docTitle;
window.open(_url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
break;
case 'twitter':
_url = 'https://twitter.com/share?url='+ embedConfig.shareUrl;
!!embedConfig.docTitle && (_url += '&text=' + embedConfig.docTitle);
window.open(_url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
break;
case 'gplus':
_url = 'https://plus.google.com/share?url=' + embedConfig.shareUrl;
window.open(_url, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes');
break;
case 'email':
window.open('mailto:?subject=I have shared a document with you: ' + embedConfig.docTitle + '&body=I have shared a document with you: ' + embedConfig.shareUrl + '"', '_self');
break;
}
});
var dlgembed = ApplicationView.modals.get('embed');
var txtembed = dlgembed.find('#txt-embed-url');
txtembed.text(embedCode.replace('{embed-url}', embedConfig.embedUrl).replace('{width}', minEmbedWidth).replace('{height}', minEmbedHeight));
dlgembed.find('#btn-copyembed').on('click', _copytext.bind(this, txtembed));
dlgembed.find('#txt-embed-width, #txt-embed-height').on({
'keypress': function(e){
if (e.keyCode == 13)
updateEmbedCode();
}
, 'focusout': function(e){
updateEmbedCode();
}
});
ApplicationView.tools.get('#idt-fullscreen')
.on('click', function(){
common.utils.openLink(embedConfig.fullscreenUrl);
@ -485,25 +441,6 @@ var ApplicationController = new(function(){
api && api.Resize();
}
function updateEmbedCode(){
var $dlg = ApplicationView.modals.get('emded');
var $txtwidth = $dlg.find('#txt-embed-width');
var $txtheight = $dlg.find('#txt-embed-height');
var newWidth = parseInt($txtwidth.val()),
newHeight = parseInt($txtheight.val());
if (newWidth < minEmbedWidth)
newWidth = minEmbedWidth;
if (newHeight < minEmbedHeight)
newHeight = minEmbedHeight;
$dlg.find('#txt-embed-url').text(embedCode.replace('{embed-url}', embedConfig.embedUrl).replace('{width}', newWidth).replace('{height}', newHeight));
$txtwidth.val(newWidth + 'px');
$txtheight.val(newHeight + 'px');
}
function createController(){
if (created)
return me;

View file

@ -31,10 +31,7 @@
*
*/
var ApplicationView = new(function(){
var $btnTools;
var $dlgEmbed,
$dlgShare;
// Initialize view
@ -55,33 +52,10 @@ var ApplicationView = new(function(){
return $btnTools.parent().find(name);
}
function getModal(name) {
switch (name) {
case 'embed': return $dlgEmbed;
case 'share': return $dlgShare;
}
}
return {
create: createView
, tools: {
get: getTools
}
, modals: {
get: getModal
, create: function (config) {
if ( !$dlgShare && !!config.shareUrl ) {
$dlgShare = utils.modals.create('share');
$btnTools.parent().find('#idt-share').attr('data-target', "#" + $dlgShare.attr('id'));
$dlgShare.find('#id-short-url').val(config.shareUrl);
}
if ( !$dlgEmbed && !!config.embedUrl ) {
$dlgEmbed = utils.modals.create('embed');
$btnTools.parent().find('#idt-embed').attr('data-target', "#"+ $dlgEmbed.attr('id'));
}
}
}
}
})();