[DE embed] view changed: popovers => modals, action buttons => dropdown
This commit is contained in:
Maxim Kadushkin
parent
aec0a03ed2
commit
3c44af10e7
94
apps/common/embed/lib/view/modals.js
Normal file
94
apps/common/embed/lib/view/modals.js
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
/*
|
||||
*
|
||||
* (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
|
||||
*
|
||||
*/
|
||||
|
||||
!window.utils && (window.utils = {});
|
||||
utils.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">' +
|
||||
'<div class="modal-header">' +
|
||||
'<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
|
||||
'<span aria-hidden="true">×</span>' +
|
||||
'</button>' +
|
||||
'<h4 id="idm-title" class="modal-title">{title}</h4>'+
|
||||
'</div>'+
|
||||
'<div class="modal-body">{body}</div>'+
|
||||
'<div class="modal-footer">{footer}</div>'+
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
|
||||
var _tplbody_share = '<div class="share-link">' +
|
||||
'<input id="id-short-url" class="form-control" type="text" readonly/>' +
|
||||
'</div>' +
|
||||
'<div class="share-buttons">' +
|
||||
'<span class="svg big-facebook" data-name="facebook"></span>' +
|
||||
'<span class="svg big-twitter" data-name="twitter"></span>' +
|
||||
'<span class="svg big-gplus" data-name="gplus"></span>' +
|
||||
'<span class="svg big-email" data-name="email"></span>' +
|
||||
'</div>';
|
||||
|
||||
var _tplbody_embed = '<div class="size-manual">' +
|
||||
'<span class="caption">Width:</span>' +
|
||||
'<input id="txt-embed-width" class="form-control input-xs" type="text" value="400px">' +
|
||||
'<input id="txt-embed-height" class="form-control input-xs right" type="text" value="600px">' +
|
||||
'<span class="right caption">Height:</span>' +
|
||||
'</div>' +
|
||||
'<textarea id="txt-embed-url" rows="4" class="form-control" readonly></textarea>';
|
||||
|
||||
return {
|
||||
create: function(name, parent) {
|
||||
!parent && (parent = 'body');
|
||||
|
||||
var _$dlg;
|
||||
if (name == 'share') {
|
||||
_$dlg = $(tplDialog
|
||||
.replace(/\{title}/, 'Share Link')
|
||||
.replace(/\{body}/, _tplbody_share)
|
||||
.replace(/\{footer}/, '<button id="btn-copyshort" type="button" class="btn">Copy to clipboard</button>'))
|
||||
.appendTo(parent)
|
||||
.attr('id', 'dlg-share');
|
||||
} else
|
||||
if (name == 'embed') {
|
||||
_$dlg = $(tplDialog
|
||||
.replace(/\{title}/, 'Embed')
|
||||
.replace(/\{body}/, _tplbody_embed)
|
||||
.replace(/\{footer}/, '<button id="btn-copyembed" type="button" class="btn">Copy to clipboard</button>'))
|
||||
.appendTo(parent)
|
||||
.attr('id', 'dlg-embed');
|
||||
}
|
||||
|
||||
return _$dlg;
|
||||
}
|
||||
};
|
||||
})();
|
||||
51
apps/common/embed/resources/img/icon-menu-sprite.svg
Normal file
51
apps/common/embed/resources/img/icon-menu-sprite.svg
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="44 0 198 44" style="enable-background:new 0 0 198 44;" xml:space="preserve">
|
||||
<defs>
|
||||
<path id="imgtools" class="_st0" d="M46,5v2h18V5H46z M46,12h18v-2H46V12z M46,17h18v-2H46V17z"/>
|
||||
<path id="imgplus" d="M166,3h-2v7h-7v2h7v7h2v-7h7v-2h-7V3z"/>
|
||||
<rect id="imgminus" x="179" y="10" width="16" height="2"/>
|
||||
</defs>
|
||||
<style type="text/css">
|
||||
.st0{fill:#010202;}
|
||||
.st1{fill:#1E1E1C;}
|
||||
</style>
|
||||
<g id="XMLID_7_">
|
||||
<path id="XMLID_9_" class="st1" d="M84,17H70c-0.6,0-1,0.4-1,1s0.4,1,1,1h14c0.6,0,1-0.4,1-1S84.6,17,84,17z"/>
|
||||
<path id="XMLID_8_" class="st1" d="M76.1,14.6c0.1,0.1,0.2,0.2,0.4,0.2c0.1,0.1,0.3,0.1,0.5,0.1s0.3-0.1,0.5-0.1
|
||||
c0.1,0,0.3-0.1,0.4-0.2l3.5-3.5c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-2,2V4c0-0.6-0.4-1-1-1s-1,0.4-1,1v7.7l-2-2
|
||||
c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4L76.1,14.6z"/>
|
||||
</g>
|
||||
<path id="XMLID_14_" d="M103.3,14c-0.8,0-1.5,0.3-2.1,0.8l-4.7-2.7c0.1-0.3,0.2-0.7,0.2-1.1s-0.1-0.8-0.2-1.1l4.7-2.7
|
||||
c0.6,0.5,1.3,0.8,2.1,0.8c1.7,0,3.1-1.4,3.1-3.1s-1.4-3.1-3.1-3.1c-1.7,0-3.1,1.4-3.1,3.1c0,0.3,0,0.5,0.1,0.8l-4.9,2.8
|
||||
c-0.5-0.4-1.1-0.6-1.8-0.6c-1.7,0-3.1,1.4-3.1,3.1s1.4,3.1,3.1,3.1c0.7,0,1.3-0.2,1.8-0.6l4.8,2.8c-0.1,0.3-0.1,0.5-0.1,0.8
|
||||
c0,1.7,1.4,3.1,3.1,3.1s3.1-1.4,3.1-3.1C106.4,15.4,105,14,103.3,14z"/>
|
||||
<g>
|
||||
<path d="M112.6,10c0.5-0.5,1.2-0.5,1.7,0l5,5c0.5,0.5,0.5,1.2,0,1.7s-1.2,0.5-1.7,0l-5-5C112.1,11.2,112.1,10.5,112.6,10z"/>
|
||||
<path d="M112.6,12c0.5,0.5,1.2,0.5,1.7,0l5-5c0.5-0.5,0.5-1.2,0-1.7s-1.2-0.5-1.7,0l-5,5C112.1,10.8,112.1,11.5,112.6,12z"/>
|
||||
<path id="XMLID_13_" d="M129.4,12c-0.5,0.5-1.2,0.5-1.7,0l-5-5c-0.5-0.5-0.5-1.2,0-1.7s1.2-0.5,1.7,0l5,5
|
||||
C129.9,10.8,129.9,11.5,129.4,12z"/>
|
||||
<path d="M129.4,10c-0.5-0.5-1.2-0.5-1.7,0l-5,5c-0.5,0.5-0.5,1.2,0,1.7s1.2,0.5,1.7,0l5-5C129.9,11.2,129.9,10.5,129.4,10z"/>
|
||||
<g id="XMLID_4_">
|
||||
<path id="XMLID_21_" d="M150.9,3.7c0-0.1-0.1-0.2-0.2-0.3c-0.1-0.1-0.2-0.2-0.3-0.2C150.2,3,150.1,3,150,3h-4.2
|
||||
c-0.5,0-0.8,0.4-0.8,0.8c0,0.5,1,1.2,1,1.2l0.8,0.8l-2.6,2.6c-0.4,0.4-0.4,1,0,1.4c0.4,0.4,1,0.4,1.4,0l2.6-2.6l1.3,1.4
|
||||
c0.1,0.2,0.4,0.4,0.7,0.4c0.5,0,0.8-0.4,0.8-0.8V4C151,3.9,151,3.8,150.9,3.7z"/>
|
||||
<path id="XMLID_22_" d="M140.4,12.2l-2.6,2.6l-1.3-1.4c-0.1-0.2-0.4-0.4-0.7-0.4c-0.5,0-0.8,0.4-0.8,0.8V18c0,0.1,0,0.3,0.1,0.4
|
||||
c0,0.1,0.1,0.2,0.2,0.3c0.1,0.1,0.2,0.2,0.3,0.2c0.2,0.1,0.3,0.1,0.4,0.1h4.2c0.5,0,0.8-0.4,0.8-0.8s-1-1.2-1-1.2l-0.8-0.8
|
||||
l2.6-2.6c0.4-0.4,0.4-1,0-1.4C141.4,11.8,140.8,11.8,140.4,12.2z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M237.9,11L224,3v16L237.9,11z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M216,19V3l-13.9,8L216,19z"/>
|
||||
</g>
|
||||
<use xlink:href="#imgtools" fill="#010202"></use>
|
||||
<use xlink:href="#imgtools" fill="#fff" y="22"></use>
|
||||
<use xlink:href="#imgplus"></use>
|
||||
<use xlink:href="#imgplus" fill="#fff" y="22"></use>
|
||||
<use xlink:href="#imgminus"></use>
|
||||
<use xlink:href="#imgminus" fill="#fff" y="22"></use>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3 KiB |
28
apps/common/embed/resources/img/icon-social-sprite.svg
Normal file
28
apps/common/embed/resources/img/icon-social-sprite.svg
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 152 76" style="enable-background:new 0 0 152 76;" xml:space="preserve">
|
||||
<defs>
|
||||
<g id="XMLID_16_">
|
||||
<path id="sc-net" d="M144.9,0h-23.8c-3.9,0-7.1,3.2-7.1,7.1v23.7c0,3.9,3.2,7.1,7.1,7.1h23.8c3.9,0,7.1-3.2,7.1-7.1V7.1
|
||||
C152,3.2,148.8,0,144.9,0z M146.7,28.3c0,1.3-1.1,2.4-2.4,2.4h-22.4c-1.3,0-2.4-1.1-2.4-2.4V9.7c0-1.3,1.1-2.4,2.4-2.4h22.4
|
||||
c1.3,0,2.4,1.1,2.4,2.4V28.3z M68.9,0H45.1C41.2,0,38,3.2,38,7.1v23.7c0,3.9,3.2,7.1,7.1,7.1h23.7c3.9,0,7.1-3.2,7.1-7.1V7.1
|
||||
C76,3.2,72.8,0,68.9,0z M67.1,14.6c0,0.2,0,0.4,0,0.7c0,6.9-5.2,14.8-14.8,14.8c-2.9,0-5.7-0.9-8-2.3c0.4,0,0.8,0.1,1.2,0.1
|
||||
c2.4,0,4.7-0.8,6.5-2.2c-2.3,0-4.2-1.6-4.8-3.6c0.3,0,0.6,0.1,1,0.1c0.5,0,0.8-0.1,1.3-0.2c-2.4-0.5-4.3-2.6-4.3-5.1c0,0,0,0,0,0
|
||||
c0.8,0.4,1.6,0.6,2.5,0.6c-1.4-0.9-2.3-2.5-2.3-4.3c0-0.9,0.3-1.9,0.7-2.6c2.6,3.2,6.4,5.2,10.7,5.4c-0.1-0.4-0.1-0.8-0.1-1.2
|
||||
c0-2.9,2.3-5.2,5.2-5.2c1.5,0,2.8,0.6,3.8,1.6c1.2-0.2,2.3-0.7,3.3-1.3c-0.4,1.2-1.2,2.3-2.3,2.9c1.1-0.1,2.1-0.4,3-0.8
|
||||
C69,13,68.1,13.9,67.1,14.6z M30.9,0H7.1C3.2,0,0,3.2,0,7.1v23.7C0,34.8,3.2,38,7.1,38h11.7V26.8h-5.3v-5.7h5.3V17
|
||||
c0-4.8,3.2-7.5,7.9-7.5c2.2,0,4.2,0.1,4.7,0.2v5.1l-3.2,0c-2.6,0-3.1,1.1-3.1,2.7v3.6h6.1l-0.8,5.7h-5.3V38h5.7
|
||||
c3.9,0,7.1-3.2,7.1-7.1V7.1C38,3.2,34.8,0,30.9,0z M136.8,20.6c-1.1,0.9-2.4,2-3.8,2h0h0c-1.5,0-2.8-1.1-3.8-2c-2-1.6-4-3.2-6-4.8
|
||||
c-0.4-0.3-0.7-0.6-1-0.9v12.6c0,0.2,0.2,0.5,0.4,0.5h20.7c0.2,0,0.4-0.2,0.4-0.5V14.9c-0.3,0.3-0.6,0.6-1,0.9
|
||||
C140.8,17.4,138.8,19,136.8,20.6z M106.9,0H83.1C79.2,0,76,3.2,76,7.1v23.7c0,3.9,3.2,7.1,7.1,7.1h23.8c3.9,0,7.1-3.2,7.1-7.1V7.1
|
||||
C114,3.2,110.8,0,106.9,0z M89.6,28.5c-5.3,0-9.5-4.3-9.5-9.5c0-5.2,4.2-9.5,9.5-9.5c2.5,0,4.7,0.9,6.4,2.5l-2.6,2.5
|
||||
c-0.7-0.7-2-1.5-3.8-1.5c-3.3,0-5.9,2.7-5.9,6s2.6,6,5.9,6c3.8,0,5.2-2.7,5.4-4.1h-5.4v-3.3h9c0.1,0.5,0.1,1,0.1,1.6
|
||||
C98.7,24.6,95,28.5,89.6,28.5z M109.9,20.4h-2.7v2.7h-2.7v-2.7h-2.7v-2.7h2.7v-2.7h2.7v2.7h2.7V20.4z M143.3,10h-20.7
|
||||
c-0.2,0-0.4,0.2-0.4,0.5c0,1.6,0.8,3,2.1,4c1.9,1.5,3.8,3,5.6,4.5c0.7,0.6,2.1,1.9,3.1,1.9h0h0c1,0,2.3-1.3,3.1-1.9
|
||||
c1.9-1.5,3.7-3,5.6-4.5c0.9-0.7,2.1-2.3,2.1-3.5C143.8,10.6,143.9,10,143.3,10z"/>
|
||||
</g>
|
||||
</defs>
|
||||
<use xlink:href="#sc-net" fill="#999"></use>
|
||||
<use xlink:href="#sc-net" fill="#666666" y="38"></use>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
44
apps/common/embed/resources/img/logo.svg
Normal file
44
apps/common/embed/resources/img/logo.svg
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="18 45 93 19" style="enable-background:new 18 45 93 19;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#5B5B5B;}
|
||||
.st1{fill:#3A3A3A;}
|
||||
.st2{opacity:0.42;fill:#8C8C8C;enable-background:new ;}
|
||||
.st3{opacity:0.72;fill:#9B9B9B;enable-background:new ;}
|
||||
.st4{fill:#9B9B9B;}
|
||||
</style>
|
||||
<path class="st0" d="M40.1,55.4c0-1.5,0.4-2.7,1.3-3.5c0.9-0.8,1.9-1.2,3.1-1.2s2.2,0.4,3.1,1.2c0.9,0.8,1.3,1.9,1.3,3.5
|
||||
c0,1.5-0.4,2.7-1.3,3.5c-0.9,0.8-1.9,1.2-3.1,1.2s-2.2-0.4-3.1-1.2C40.6,58.1,40.1,56.9,40.1,55.4L40.1,55.4L40.1,55.4z M42,55.4
|
||||
c0,1.1,0.2,1.8,0.6,2.3c0.4,0.5,0.8,0.8,1.3,0.9c0.1,0,0.2,0,0.3,0.1c0.1,0,0.2,0,0.3,0s0.2,0,0.3,0s0.2,0,0.3-0.1
|
||||
c0.5-0.1,0.9-0.4,1.3-0.9c0.4-0.5,0.6-1.3,0.6-2.3s-0.2-1.8-0.6-2.3c-0.4-0.5-0.8-0.8-1.3-0.9c-0.1,0-0.2-0.1-0.3-0.1
|
||||
c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.3,0.1c-0.5,0.1-0.9,0.4-1.3,0.9C42.2,53.6,42,54.3,42,55.4L42,55.4L42,55.4z
|
||||
"/>
|
||||
<polygon class="st0" points="49.8,51 52.2,51 55.3,56.6 55.8,57.8 55.8,57.8 55.8,56.2 55.8,51 57.6,51 57.6,59.9 55.3,59.9
|
||||
52.1,54 51.7,53 51.6,53 51.7,54.6 51.7,59.9 49.8,59.9 "/>
|
||||
<polygon class="st0" points="59.1,51 61,51 61,58.4 64.6,58.4 64.6,59.9 59.1,59.9 "/>
|
||||
<polygon class="st0" points="63.5,51 65.6,51 67.4,54 67.6,54.7 67.7,54.7 68,54 69.8,51 71.8,51 68.5,56.2 68.5,59.9 66.8,59.9
|
||||
66.8,56.2 "/>
|
||||
<path class="st1" d="M71.9,55.4c0-1.5,0.4-2.7,1.3-3.5s1.9-1.2,3.1-1.2s2.2,0.4,3.1,1.2c0.9,0.8,1.3,1.9,1.3,3.5
|
||||
c0,1.5-0.4,2.7-1.3,3.5c-0.9,0.8-1.9,1.2-3.1,1.2c-1.2,0-2.2-0.4-3.1-1.2C72.3,58.1,71.9,56.9,71.9,55.4L71.9,55.4L71.9,55.4z
|
||||
M73.8,55.4c0,1.1,0.2,1.8,0.6,2.3c0.4,0.5,0.8,0.8,1.3,0.9c0.1,0,0.2,0,0.3,0.1c0.1,0,0.2,0,0.3,0s0.2,0,0.3,0s0.2,0,0.3-0.1
|
||||
c0.5-0.1,0.9-0.4,1.3-0.9c0.4-0.5,0.6-1.3,0.6-2.3s-0.2-1.8-0.6-2.3c-0.4-0.5-0.8-0.8-1.3-0.9c-0.1,0-0.2-0.1-0.3-0.1s-0.2,0-0.3,0
|
||||
s-0.2,0-0.3,0s-0.2,0-0.3,0.1c-0.5,0.1-0.9,0.4-1.3,0.9C74,53.6,73.8,54.3,73.8,55.4L73.8,55.4L73.8,55.4z"/>
|
||||
<polygon class="st1" points="81.6,51 86.6,51 86.6,52.5 83.4,52.5 83.4,54.6 86.5,54.6 86.5,56.1 83.4,56.1 83.4,59.9 81.6,59.9 "/>
|
||||
<polygon class="st1" points="87.7,51 92.7,51 92.7,52.5 89.5,52.5 89.5,54.6 92.5,54.6 92.5,56.1 89.5,56.1 89.5,59.9 87.7,59.9 "/>
|
||||
<polygon class="st1" points="93.7,59.9 93.7,51 95.6,51 95.6,59.9 "/>
|
||||
<path class="st1" d="M103.8,51.2v1.6c-0.3-0.1-0.6-0.2-1-0.3s-0.7-0.1-1.1-0.1c-1,0-1.7,0.3-2.2,0.9c-0.5,0.6-0.8,1.3-0.8,2.2
|
||||
s0.2,1.6,0.7,2.2c0.5,0.6,1.2,0.9,2.1,0.9c0.3,0,0.7,0,1-0.1c0.4,0,0.8-0.2,1.2-0.3l0.1,1.5c-0.1,0-0.1,0.1-0.2,0.1
|
||||
s-0.2,0.1-0.4,0.1c-0.2,0-0.4,0-0.8,0c-0.3,0-0.7,0.1-1.1,0.1c-0.1,0-0.1,0-0.2,0s-0.1,0-0.2,0c-1-0.1-2-0.5-2.9-1.2
|
||||
s-1.3-1.8-1.3-3.4c0-1.5,0.4-2.6,1.3-3.5c0.9-0.8,2-1.2,3.4-1.2c0.4,0,0.7,0,1,0s0.6,0.1,0.9,0.2c0.1,0,0.1,0,0.2,0.1
|
||||
C103.6,51.1,103.7,51.1,103.8,51.2L103.8,51.2L103.8,51.2z"/>
|
||||
<polygon class="st1" points="104.9,51 110.4,51 110.4,52.4 106.8,52.4 106.8,54.5 110,54.5 110,55.9 106.8,55.9 106.8,58.5
|
||||
110.4,58.5 110.4,59.9 104.9,59.9 "/>
|
||||
<path class="st2" d="M26.2,63l-7.7-3.7c-0.7-0.3-0.7-0.8,0-1.1l2.6-1.3l5.1,2.4c0.7,0.3,1.7,0.3,2.4,0l5.1-2.4l2.7,1.3
|
||||
c0.7,0.3,0.7,0.8,0,1.1L28.7,63C28,63.3,26.9,63.3,26.2,63L26.2,63z"/>
|
||||
<path class="st3" d="M26.2,58.6l-7.7-3.7c-0.7-0.3-0.7-0.8,0-1.1l2.7-1.3l5.1,2.4c0.7,0.3,1.7,0.3,2.4,0l5.2-2.4l2.7,1.2
|
||||
c0.7,0.3,0.7,0.8,0,1.1l-7.8,3.7C28,58.9,26.9,58.9,26.2,58.6L26.2,58.6z"/>
|
||||
<path class="st4" d="M26.2,54.2l-7.7-3.7c-0.7-0.3-0.7-0.8,0-1.1l7.7-3.7c0.7-0.3,1.7-0.3,2.4,0l7.7,3.7c0.7,0.3,0.7,0.8,0,1.1
|
||||
l-7.7,3.7C28,54.5,26.9,54.5,26.2,54.2L26.2,54.2z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
|
|
@ -39,12 +39,13 @@
|
|||
//@import "list-group.less";
|
||||
//@import "panels.less";
|
||||
//@import "wells.less";
|
||||
//@import "close.less";
|
||||
@import "../../../../../vendor/bootstrap/less/close.less";
|
||||
|
||||
// Components w/ JavaScript
|
||||
@import "../../../../../vendor/bootstrap/less/modals.less";
|
||||
@import "../../../../../vendor/bootstrap/less/tooltip.less";
|
||||
@import "../../../../../vendor/bootstrap/less/popovers.less";
|
||||
//@import "../../../../../vendor/bootstrap/less/popovers.less";
|
||||
@import "../../../../../vendor/bootstrap/less/dropdowns.less";
|
||||
//@import "carousel.less";
|
||||
|
||||
// Utility classes
|
||||
|
|
@ -60,7 +61,9 @@
|
|||
@toolbarFontSize: 12px;
|
||||
@controlBtnHoverTopColor: #6180C4;
|
||||
@controlBtnHoverBottomColor: #8AACF1;
|
||||
@btnActiveColor: #7d858c;
|
||||
@iconSpriteCommonPath: "../../../../common/embed/resources/img/glyphicons.png";
|
||||
@icon-socnet-size: 40px;
|
||||
|
||||
.input-xs {
|
||||
.input-size(@input-height-small - 8px; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
|
||||
|
|
@ -104,7 +107,8 @@
|
|||
font-size: @toolbarFontSize;
|
||||
min-width: 340px;
|
||||
z-index: 100;
|
||||
#gradient > .vertical(@toolbarTopColor, @toolbarBottomColor);
|
||||
//#gradient > .vertical(@toolbarTopColor, @toolbarBottomColor);
|
||||
background-color: @toolbarTopColor;
|
||||
|
||||
&.top {
|
||||
top: 0;
|
||||
|
|
@ -128,20 +132,23 @@
|
|||
box-shadow: inset 0 1px 0 @toolbarBorderColor, inset 0 2px 0 @toolbarBorderShadowColor;
|
||||
}
|
||||
|
||||
ul {
|
||||
.group {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
.item {
|
||||
input {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
width: 35px;
|
||||
padding: 0;
|
||||
height: 25px;
|
||||
margin: 3px;
|
||||
text-align: center;
|
||||
//height: 25px;
|
||||
//margin: 0 3px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text {
|
||||
|
|
@ -151,53 +158,63 @@
|
|||
|
||||
&.left {
|
||||
left: 0;
|
||||
padding-left: 10px;
|
||||
|
||||
li {
|
||||
.item {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
right: 0;
|
||||
padding-right: 10px;
|
||||
|
||||
li {
|
||||
.item {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
&.center {
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.separator {
|
||||
height: 24px;
|
||||
margin: 4px 9px;
|
||||
height: 22px;
|
||||
margin: 0 9px;
|
||||
border-right: 1px solid @toolbarBorderShadowColor;
|
||||
border-left: 1px solid @toolbarBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
font-size: 28px;
|
||||
color: #666666;
|
||||
opacity: 0.8;
|
||||
display: block;
|
||||
line-height: 22px;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Logo
|
||||
// -------------------------
|
||||
a.brand-logo {
|
||||
.brand-logo {
|
||||
display: block;
|
||||
background-image: url("@{iconSpriteCommonPath}");
|
||||
width: 124px;
|
||||
height: 20px;
|
||||
margin: 5px 0 0 10px;
|
||||
background-position: 0 -100px;
|
||||
width: 100px;
|
||||
height: 24px;
|
||||
//background-image: url("@{iconSpriteCommonPath}");
|
||||
//background-position: 0 -100px;
|
||||
background: data-uri('../../../../common/embed/resources/img/logo.svg') no-repeat;
|
||||
}
|
||||
|
||||
// Sprite icons path
|
||||
// -------------------------
|
||||
[class^="control-icon-"],
|
||||
[class*=" control-icon-"] {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: text-top;
|
||||
background-image: url("@{iconSpriteCommonPath}");
|
||||
background-repeat: no-repeat;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
[class^="overlay-icon-"],
|
||||
[class*=" overlay-icon-"] {
|
||||
display: inline-block;
|
||||
|
|
@ -209,12 +226,6 @@ a.brand-logo {
|
|||
opacity: .3;
|
||||
}
|
||||
|
||||
.control-icon-share { background-position: 0 0; }
|
||||
.control-icon-embed { background-position: 0 -20px; }
|
||||
.control-icon-fullscreen { background-position: 0 -40px; }
|
||||
.control-icon-close { background-position: 0 -60px; }
|
||||
.control-icon-save { background-position: 0 -80px; }
|
||||
|
||||
.overlay-icon-zoom-in { background-position: 0 -120px; }
|
||||
.overlay-icon-zoom-out { background-position: -32px -120px; }
|
||||
|
||||
|
|
@ -222,28 +233,20 @@ a.brand-logo {
|
|||
// -------------------------
|
||||
.control-btn {
|
||||
display: inline-block;
|
||||
padding: 1px 5px;
|
||||
font-size: @toolbarFontSize;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
//padding: 1px 5px;
|
||||
//font-size: @toolbarFontSize;
|
||||
//line-height: 20px;
|
||||
//text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
//background-image: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px;
|
||||
margin: 4px 5px 0 0;
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
//margin: 0;
|
||||
|
||||
&.no-caption {
|
||||
padding: 1px 2px;
|
||||
|
||||
i {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover state
|
||||
|
|
@ -251,12 +254,6 @@ a.brand-logo {
|
|||
color: @toolbarHoverColor;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0 @toolbarBorderShadowColor;
|
||||
|
||||
.control-icon-share { background-position: -20px 0; }
|
||||
.control-icon-embed { background-position: -20px -20px; }
|
||||
.control-icon-fullscreen { background-position: -20px -40px; }
|
||||
.control-icon-close { background-position: -20px -60px; }
|
||||
.control-icon-save { background-position: -20px -80px; }
|
||||
}
|
||||
|
||||
// Focus state for keyboard and accessibility
|
||||
|
|
@ -268,17 +265,11 @@ a.brand-logo {
|
|||
// Active state
|
||||
&.active,
|
||||
&:active {
|
||||
color: #ffffff;
|
||||
outline: none;
|
||||
border: 1px solid darken(@controlBtnHoverTopColor, 5%);
|
||||
#gradient > .vertical(@controlBtnHoverTopColor, @controlBtnHoverBottomColor);
|
||||
text-shadow: 0 1px 0 darken(@toolbarBorderColor, 20%);
|
||||
|
||||
.control-icon-share { background-position: -40px 0; }
|
||||
.control-icon-embed { background-position: -40px -20px; }
|
||||
.control-icon-fullscreen { background-position: -40px -40px; }
|
||||
.control-icon-close { background-position: -40px -60px; }
|
||||
.control-icon-save { background-position: -40px -80px; }
|
||||
border: 1px solid @btnActiveColor;
|
||||
background-color: @btnActiveColor;
|
||||
//#gradient > .vertical(@controlBtnHoverTopColor, @controlBtnHoverBottomColor);
|
||||
//text-shadow: 0 1px 0 darken(@toolbarBorderColor, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -313,32 +304,27 @@ a.brand-logo {
|
|||
height: 32px;
|
||||
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
//text-align: center;
|
||||
//vertical-align: middle;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
line-height: 0;
|
||||
background-color: black;
|
||||
//background-image: none;
|
||||
border: 5px solid black;
|
||||
border-radius: 50%;
|
||||
//padding: 0;
|
||||
//line-height: 0;
|
||||
outline: none;
|
||||
opacity: 0.3;
|
||||
|
||||
&:hover {
|
||||
[class^="overlay-icon-"],
|
||||
[class*=" overlay-icon-"] {
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
[class^="overlay-icon-"],
|
||||
[class*=" overlay-icon-"] {
|
||||
opacity: .8;
|
||||
&.active, &:active {
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Error mask
|
||||
// -------------------------
|
||||
|
|
@ -377,20 +363,6 @@ a.brand-logo {
|
|||
padding: 14px;
|
||||
}
|
||||
|
||||
&.hyperlink {
|
||||
.popover-content {
|
||||
padding: 5px 10px;
|
||||
|
||||
p {
|
||||
display: block;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.share {
|
||||
width: 280px;
|
||||
|
||||
|
|
@ -426,41 +398,6 @@ a.brand-logo {
|
|||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.share-buttons {
|
||||
ul {
|
||||
width: 244px;
|
||||
height: 25px;
|
||||
list-style-type: none;
|
||||
margin: 5px 0 0;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin: 1px 5px 0 0;
|
||||
vertical-align: middle;
|
||||
|
||||
&.share-mail {
|
||||
float: right;
|
||||
padding-right: 1px;
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
min-width: 64px;
|
||||
}
|
||||
|
||||
.glyphicon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.share-twitter {
|
||||
max-width: 93px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.embed {
|
||||
|
|
@ -492,14 +429,6 @@ a.brand-logo {
|
|||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 238px;
|
||||
resize: none;
|
||||
cursor: auto;
|
||||
font-size: 1em;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
float: right;
|
||||
margin: 10px 0 15px;
|
||||
|
|
@ -512,10 +441,249 @@ a.brand-logo {
|
|||
// -------------------------
|
||||
.modal {
|
||||
.modal-header {
|
||||
padding: 5px 15px;
|
||||
//padding: 5px 15px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-top: none;
|
||||
//border-top: none;
|
||||
}
|
||||
|
||||
//&.in .modal-dialog { .translate(0, 100%)}
|
||||
}
|
||||
|
||||
.share-buttons {
|
||||
ul {
|
||||
width: 244px;
|
||||
//height: 25px;
|
||||
list-style-type: none;
|
||||
margin: 5px 0 0;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin: 1px 5px 0 0;
|
||||
vertical-align: middle;
|
||||
|
||||
&.share-mail {
|
||||
float: right;
|
||||
padding-right: 1px;
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
min-width: 64px;
|
||||
}
|
||||
|
||||
.glyphicon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.share-twitter {
|
||||
max-width: 93px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.size-manual {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.caption {
|
||||
margin-top: 2px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
input {
|
||||
display: inline-block;
|
||||
font-size: 1em;
|
||||
padding: 0 4px;
|
||||
//border-radius: 0;
|
||||
margin: 0;
|
||||
margin-top: -1px;
|
||||
|
||||
&.input-xs {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-hor-align {
|
||||
li {
|
||||
float: left;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.socnet-btn(@index) {
|
||||
background-position: -@icon-socnet-size*@index 0;
|
||||
|
||||
&:hover {
|
||||
background-position: -@icon-socnet-size*@index -@icon-socnet-size;
|
||||
}
|
||||
}
|
||||
|
||||
.svg {
|
||||
background: data-uri('../../../../common/embed/resources/img/icon-social-sprite.svg');
|
||||
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-size: @icon-socnet-size*4 @icon-socnet-size*2;
|
||||
|
||||
&.big-facebook:hover {
|
||||
background-position: 0 -@icon-socnet-size;
|
||||
}
|
||||
|
||||
&.big-twitter { .socnet-btn(1); }
|
||||
&.big-gplus { .socnet-btn(2); }
|
||||
&.big-email { .socnet-btn(3); }
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
background: data-uri('../../../../common/embed/resources/img/icon-menu-sprite.svg') no-repeat;
|
||||
background-size: 22px*9 22px*2;
|
||||
|
||||
&.download {
|
||||
background-position: -22px 0;
|
||||
}
|
||||
&.share {
|
||||
background-position: -22px*2 0;
|
||||
}
|
||||
&.embed {
|
||||
background-position: -22px*3 0;
|
||||
}
|
||||
&.fullscr {
|
||||
background-position: -22px*4 0;
|
||||
}
|
||||
&.zoom-up {
|
||||
background-position: -22px*5 -22px;
|
||||
}
|
||||
&.zoom-down {
|
||||
background-position: -22px*6 -22px;
|
||||
}
|
||||
}
|
||||
|
||||
.mi-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
//display: inline-block;
|
||||
float: left;
|
||||
margin: -1px 5px 0 -15px;
|
||||
}
|
||||
|
||||
.btn, button {
|
||||
&:focus, &:active:focus {
|
||||
outline: 0 none;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
.share-buttons {
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
margin: 0 7px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.share-link {
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding-bottom: 10px;
|
||||
text-align: center;
|
||||
|
||||
.close {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#dlg-share, #dlg-embed {
|
||||
.modal-dialog {
|
||||
width: 330px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 288px;
|
||||
resize: none;
|
||||
cursor: auto;
|
||||
font-size: 1em;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
> li > a {
|
||||
&:hover, &:focus {
|
||||
background-color: #d8dadc;
|
||||
outline: 0 none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
&.open {
|
||||
> button {
|
||||
background-color: @btnActiveColor;
|
||||
background-position: 0 -22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#box-tools {
|
||||
button {
|
||||
width: 24px;
|
||||
height: 22px;
|
||||
|
||||
&:active {
|
||||
background-position: 0 -22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.masked {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#pages {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: 22px;
|
||||
padding: 0 0 0 3px;
|
||||
}
|
||||
|
||||
#page-number {
|
||||
&.masked {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
.tooltip-inner {
|
||||
background-color: #fff;
|
||||
border: 1px solid #333;
|
||||
color: #333
|
||||
}
|
||||
}
|
||||
|
|
@ -273,25 +273,25 @@
|
|||
|
||||
<div class="overlay-controls" style="margin-left: -32px">
|
||||
<ul class="left">
|
||||
<li id="id-btn-zoom-in"><button class="overlay"><i class="overlay-icon-zoom-in"></i></button></li>
|
||||
<li id="id-btn-zoom-out"><button class="overlay"><i class="overlay-icon-zoom-out"></i></button></li>
|
||||
<li id="id-btn-zoom-in"><button class="overlay svg-icon zoom-up"></button></li>
|
||||
<li id="id-btn-zoom-out"><button class="overlay svg-icon zoom-down"></button></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="toolbar" id="toolbar">
|
||||
<ul class="left">
|
||||
<li><a id="header-logo" class="brand-logo" href="http://www.onlyoffice.com/" target="_blank"></a></li>
|
||||
<li class="separator"></li>
|
||||
<li id="id-btn-copy"><button class="control-btn"><i class="control-icon-save"></i><span>Save Copy</span></button></li>
|
||||
<li id="id-btn-share"><button class="control-btn"><i class="control-icon-share"></i><span>Share</span></button></li>
|
||||
<li id="id-btn-embed"><button class="control-btn"><i class="control-icon-embed"></i><span>Embed</span></button></li>
|
||||
</ul>
|
||||
<ul class="right">
|
||||
<li><input id="page-number" class="form-control input-sm" style="width: 25px;" type="text" value="0"><span class="text" id="pages">of 0</span></li>
|
||||
<li class="separator"></li>
|
||||
<li><button id="id-btn-fullscreen" class="control-btn no-caption"><i class="control-icon-fullscreen"></i></button></li>
|
||||
<li><button id="id-btn-close" class="control-btn no-caption"><i class="control-icon-close"></i></button></li>
|
||||
</ul>
|
||||
<div class="group left">
|
||||
<div id="box-tools" class="dropdown">
|
||||
<button class="control-btn svg-icon tools"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group center">
|
||||
<span><a id="header-logo" class="brand-logo" href="http://www.onlyoffice.com/" target="_blank"></a></span>
|
||||
</div>
|
||||
<div class="group right">
|
||||
<div class="item"><input id="page-number" class="form-control input-xs masked" type="text" value="0"><span class="text" id="pages" tabindex="-1">of 0</span></div>
|
||||
<div class="item separator"></div>
|
||||
<div class="item"><button id="id-btn-close" class="control-btn close"><span aria-hidden="true">×</span></button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade error" id="id-critical-error-dialog" tabindex="-1" role="dialog">
|
||||
|
|
@ -315,10 +315,13 @@
|
|||
<div class="cmd-loader-title">Please wait...</div>
|
||||
</div>
|
||||
|
||||
<div class="hyperlink-tooltip" data-toggle="tooltip" title="Press Ctrl and click the link" style="display:none;"></div>
|
||||
|
||||
<!--vendor-->
|
||||
<script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../../vendor/jquery.browser/dist/jquery.browser.min.js"></script>
|
||||
<script type="text/javascript" src="../../../vendor/bootstrap/dist/js/bootstrap.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../../vendor/sockjs/sockjs.min.js"></script>
|
||||
<script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
|
||||
<script type="text/javascript" src="../../../vendor/jszip/jszip.min.js"></script>
|
||||
|
|
@ -335,6 +338,7 @@
|
|||
<!--application-->
|
||||
<script type="text/javascript" src="../../common/Gateway.js"></script>
|
||||
<script type="text/javascript" src="../../common/Analytics.js"></script>
|
||||
<script type="text/javascript" src="../../common/embed/lib/view/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>
|
||||
|
|
|
|||
|
|
@ -38,11 +38,9 @@ var ApplicationController = new(function(){
|
|||
embedConfig = {},
|
||||
permissions = {},
|
||||
maxPages = 0,
|
||||
minToolbarWidth = 550,
|
||||
minEmbedWidth = 400,
|
||||
minEmbedHeight = 600,
|
||||
embedCode = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="{embed-url}" width="{width}" height="{height}"></iframe>',
|
||||
maxZIndex = 9090,
|
||||
created = false,
|
||||
iframePrint = null;
|
||||
|
||||
|
|
@ -64,42 +62,10 @@ var ApplicationController = new(function(){
|
|||
// Utils
|
||||
// -------------------------
|
||||
|
||||
function emptyFn(){}
|
||||
|
||||
function htmlEncode(value){
|
||||
return $('<div/>').text(value).html();
|
||||
}
|
||||
|
||||
function createBuffered(fn, buffer, scope, args) {
|
||||
return function(){
|
||||
var timerId;
|
||||
return function() {
|
||||
var me = this;
|
||||
if (timerId) {
|
||||
clearTimeout(timerId);
|
||||
timerId = null;
|
||||
}
|
||||
timerId = setTimeout(function(){
|
||||
fn.apply(scope || me, args || arguments);
|
||||
}, buffer);
|
||||
};
|
||||
}();
|
||||
}
|
||||
|
||||
function updateSocial() {
|
||||
var $socialPanel = $('#id-popover-social-container');
|
||||
|
||||
if ($socialPanel.length > 0) {
|
||||
if ($socialPanel.attr('data-loaded') == 'false') {
|
||||
typeof FB !== 'undefined' && FB.XFBML && FB.XFBML.parse();
|
||||
typeof twttr !== 'undefined' && twttr.widgets && twttr.widgets.load();
|
||||
|
||||
$socialPanel.attr('data-loaded', 'true');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Handlers
|
||||
// -------------------------
|
||||
|
||||
|
|
@ -107,33 +73,14 @@ var ApplicationController = new(function(){
|
|||
config = $.extend(config, data.config);
|
||||
embedConfig = $.extend(embedConfig, data.config.embedded);
|
||||
|
||||
$('#id-short-url').val(embedConfig.shareUrl || 'Unavailable');
|
||||
$('#id-textarea-embed').text(embedCode.replace('{embed-url}', embedConfig.embedUrl).replace('{width}', minEmbedWidth).replace('{height}', minEmbedHeight));
|
||||
if ( !embedConfig.shareUrl )
|
||||
$('#idt-share').hide();
|
||||
|
||||
if (typeof embedConfig.shareUrl !== 'undefined' && embedConfig.shareUrl != ''){
|
||||
(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
|
||||
if ($('#id-popover-social-container ul')){
|
||||
$('#id-popover-social-container ul').append('<li><div class="fb-like" data-href="' + embedConfig.shareUrl + '" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div></li>');
|
||||
$('#id-popover-social-container ul').append('<li class="share-twitter"><a href="https://twitter.com/share" class="twitter-share-button" data-url="' + embedConfig.shareUrl + '">Tweet</a></li>'); //data-count="none"
|
||||
$('#id-popover-social-container ul').append('<li class="share-mail"><a class="btn btn-xs btn-default" href="mailto:?subject=I have shared a document with you: ' + embedConfig.docTitle + '&body=I have shared a document with you: ' + embedConfig.shareUrl + '"><span class="glyphicon glyphicon-envelope"></span>Email</a></li>');
|
||||
}
|
||||
}
|
||||
if (typeof embedConfig.shareUrl === 'undefined')
|
||||
$('#id-btn-share').hide();
|
||||
|
||||
if (typeof embedConfig.embedUrl === 'undefined')
|
||||
$('#id-btn-embed').hide();
|
||||
if ( !embedConfig.embedUrl )
|
||||
$('#idt-embed').hide();
|
||||
|
||||
if (typeof embedConfig.fullscreenUrl === 'undefined')
|
||||
$('#id-btn-fullscreen').hide();
|
||||
$('#idt-fullscr').hide();
|
||||
|
||||
if (config.canBackToFolder === false || !(config.customization && config.customization.goback && config.customization.goback.url))
|
||||
$('#id-btn-close').hide();
|
||||
|
|
@ -149,7 +96,7 @@ var ApplicationController = new(function(){
|
|||
}
|
||||
|
||||
// Hide last separator
|
||||
if (!$('#id-btn-fullscreen').is(":visible") && !$('#id-btn-close').is(":visible")) {
|
||||
if (!$('#id-btn-close').is(":visible")) {
|
||||
$('#toolbar .right .separator').hide();
|
||||
$('#pages').css('margin-right', '12px');
|
||||
}
|
||||
|
|
@ -177,11 +124,8 @@ var ApplicationController = new(function(){
|
|||
Common.Analytics.trackEvent('Load', 'Start');
|
||||
}
|
||||
|
||||
if (typeof embedConfig.saveUrl === 'undefined' && permissions.print === false)
|
||||
$('#id-btn-copy').hide();
|
||||
|
||||
if (!$('#id-btn-copy').is(":visible") && !$('#id-btn-share').is(":visible") && !$('#id-btn-embed').is(":visible") )
|
||||
$('#toolbar .left .separator').hide();
|
||||
if ( !embedConfig.saveUrl && permissions.print === false)
|
||||
$('#idt-copy').hide();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -230,32 +174,43 @@ var ApplicationController = new(function(){
|
|||
|
||||
function onDocMouseMoveEnd() {
|
||||
if (me.isHideBodyTip) {
|
||||
var $tipHyperlink = $('#id-tip-hyperlink');
|
||||
|
||||
if ($tipHyperlink.length > 0) {
|
||||
$tipHyperlink.hide();
|
||||
if ( $tooltip ) {
|
||||
$tooltip.tooltip('hide');
|
||||
$tooltip = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var $ttEl, $tooltip;
|
||||
function onDocMouseMove(data) {
|
||||
if (data) {
|
||||
if (data.get_Type() == 1) { // hyperlink
|
||||
me.isHideBodyTip = false;
|
||||
|
||||
var $tipHyperlink = $('#id-tip-hyperlink'),
|
||||
hyperProps = data.get_Hyperlink(),
|
||||
toolTip = (hyperProps.get_ToolTip()) ? hyperProps.get_ToolTip() : hyperProps.get_Value();
|
||||
if ( !$ttEl ) {
|
||||
$ttEl = $('.hyperlink-tooltip');
|
||||
$ttEl.tooltip({'container':'body', 'trigger':'manual'});
|
||||
$ttEl.on('shown.bs.tooltip', function(e) {
|
||||
$tooltip = $ttEl.data('bs.tooltip').tip();
|
||||
|
||||
if ($tipHyperlink.length > 0) {
|
||||
$tipHyperlink.find('.popover-content p').html(htmlEncode(toolTip) + '<br><b>Press Ctrl and click link</b>');
|
||||
$tipHyperlink.show();
|
||||
$tooltip.css({
|
||||
left: $ttEl.ttpos[0] - 10,
|
||||
top: $ttEl.ttpos[1] - 5
|
||||
});
|
||||
|
||||
$tooltip.find('.tooltip-arrow').css({left: 10});
|
||||
});
|
||||
}
|
||||
|
||||
$tipHyperlink.css({
|
||||
left: data.get_X() - 10,
|
||||
top : data.get_Y() - 25
|
||||
})
|
||||
if ( !$tooltip ) {
|
||||
$ttEl.ttpos = [data.get_X(), data.get_Y()];
|
||||
$ttEl.tooltip('show');
|
||||
} else {
|
||||
$tooltip.css({
|
||||
left:data.get_X() - 10,
|
||||
top:data.get_Y() - 5
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -298,13 +253,22 @@ var ApplicationController = new(function(){
|
|||
}
|
||||
|
||||
function onDocumentContentReady() {
|
||||
setVisiblePopover($('#id-popover-share'), false);
|
||||
setVisiblePopover($('#id-popover-embed'), false);
|
||||
$('#id-tip-hyperlink').hide();
|
||||
|
||||
handlerToolbarSize();
|
||||
hidePreloader();
|
||||
|
||||
ApplicationView.modals.create(embedConfig);
|
||||
|
||||
api.asc_registerCallback('asc_onStartAction', onLongActionBegin);
|
||||
api.asc_registerCallback('asc_onEndAction', onLongActionEnd);
|
||||
api.asc_registerCallback('asc_onMouseMoveStart', onDocMouseMoveStart);
|
||||
api.asc_registerCallback('asc_onMouseMoveEnd', onDocMouseMoveEnd);
|
||||
api.asc_registerCallback('asc_onMouseMove', onDocMouseMove);
|
||||
api.asc_registerCallback('asc_onHyperlinkClick', onHyperlinkClick);
|
||||
api.asc_registerCallback('asc_onDownloadUrl', onDownloadUrl);
|
||||
api.asc_registerCallback('asc_onPrint', onPrint);
|
||||
|
||||
Common.Gateway.on('processmouse', onProcessMouse);
|
||||
Common.Gateway.on('downloadas', onDownloadAs);
|
||||
|
||||
function _copytext(el, event) {
|
||||
el.select();
|
||||
if ( !document.execCommand('copy') ) {
|
||||
|
|
@ -312,6 +276,115 @@ var ApplicationController = new(function(){
|
|||
}
|
||||
}
|
||||
|
||||
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(){
|
||||
openLink(embedConfig.fullscreenUrl);
|
||||
});
|
||||
|
||||
ApplicationView.tools.get('#idt-download')
|
||||
.on('click', function(){
|
||||
if ( !!embedConfig.saveUrl ){
|
||||
openLink(embedConfig.saveUrl);
|
||||
} else
|
||||
if (api && permissions.print!==false){
|
||||
api.asc_Print($.browser.chrome || $.browser.safari || $.browser.opera);
|
||||
}
|
||||
|
||||
Common.Analytics.trackEvent('Save');
|
||||
});
|
||||
|
||||
$('#id-btn-close').on('click', function(){
|
||||
if (config.customization && config.customization.goback && config.customization.goback.url)
|
||||
window.parent.location.href = config.customization.goback.url;
|
||||
});
|
||||
|
||||
$('#id-btn-zoom-in').on('click', api.zoomIn.bind(this));
|
||||
$('#id-btn-zoom-out').on('click', api.zoomOut.bind(this));
|
||||
|
||||
var $pagenum = $('#page-number');
|
||||
$pagenum.on({
|
||||
'keyup': function(e){
|
||||
if ( e.keyCode == 13 ){
|
||||
var newPage = parseInt($('#page-number').val());
|
||||
|
||||
if ( newPage > maxPages ) newPage = maxPages;
|
||||
if (newPage < 2 || isNaN(newPage)) newPage = 1;
|
||||
|
||||
api.goToPage(newPage-1);
|
||||
$pagenum.blur();
|
||||
}
|
||||
}
|
||||
, 'focusin' : function(e) {
|
||||
$pagenum.removeClass('masked');
|
||||
}
|
||||
, 'focusout': function(e){
|
||||
!$pagenum.hasClass('masked') && $pagenum.addClass('masked');
|
||||
}
|
||||
});
|
||||
|
||||
$('#pages').on('click', function(e) {
|
||||
$pagenum.focus();
|
||||
});
|
||||
|
||||
var documentMoveTimer;
|
||||
var ismoved = false;
|
||||
$(document).mousemove(function(event){
|
||||
$('#id-btn-zoom-in').fadeIn();
|
||||
$('#id-btn-zoom-out').fadeIn();
|
||||
|
||||
ismoved = true;
|
||||
if ( !documentMoveTimer ) {
|
||||
documentMoveTimer = setInterval(function(){
|
||||
if ( !ismoved ) {
|
||||
$('#id-btn-zoom-in').fadeOut();
|
||||
$('#id-btn-zoom-out').fadeOut();
|
||||
clearInterval(documentMoveTimer);
|
||||
documentMoveTimer = undefined;
|
||||
}
|
||||
|
||||
ismoved = false;
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
|
||||
Common.Analytics.trackEvent('Load', 'Complete');
|
||||
}
|
||||
|
||||
|
|
@ -436,95 +509,16 @@ var ApplicationController = new(function(){
|
|||
// Helpers
|
||||
// -------------------------
|
||||
|
||||
var handlerToolbarSize = createBuffered(function(size){
|
||||
var visibleCaption = function(btn, visible){
|
||||
if (visible){
|
||||
$(btn + ' button').addClass('no-caption');
|
||||
$(btn + ' button span').css('display', 'none');
|
||||
} else {
|
||||
$(btn + ' button').removeClass('no-caption');
|
||||
$(btn + ' button span').css('display', 'inline');
|
||||
}
|
||||
};
|
||||
|
||||
var isMinimize = $('#toolbar').width() < minToolbarWidth;
|
||||
|
||||
visibleCaption('#id-btn-copy', isMinimize);
|
||||
visibleCaption('#id-btn-share', isMinimize);
|
||||
visibleCaption('#id-btn-embed', isMinimize);
|
||||
}, 10);
|
||||
|
||||
function onDocumentResize() {
|
||||
if (api)
|
||||
api.Resize();
|
||||
|
||||
handlerToolbarSize();
|
||||
}
|
||||
|
||||
function isVisiblePopover(popover){
|
||||
return popover.hasClass('in');
|
||||
}
|
||||
|
||||
function setVisiblePopover(popover, visible, owner){
|
||||
api && api.asc_enableKeyEvents(!visible);
|
||||
|
||||
if (visible){
|
||||
if (owner){
|
||||
popover.css('display', 'block');
|
||||
|
||||
var popoverData = owner.data('bs.popover'),
|
||||
$tip = popoverData.tip(),
|
||||
pos = popoverData.getPosition(false),
|
||||
actualHeight = $tip[0].offsetHeight,
|
||||
placement = (embedConfig.toolbarDocked === 'top') ? 'bottom' : 'top',
|
||||
tp;
|
||||
|
||||
$tip.removeClass('fade in top bottom left right');
|
||||
|
||||
switch (placement) {
|
||||
case 'bottom':
|
||||
tp = {
|
||||
top : pos.top + pos.height,
|
||||
left: owner.position().left + (owner.width() - popover.width()) * 0.5
|
||||
};
|
||||
break;
|
||||
|
||||
default:
|
||||
case 'top':
|
||||
tp = {
|
||||
top : pos.top - actualHeight,
|
||||
left: owner.position().left + (owner.width() - popover.width()) * 0.5
|
||||
};
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
$tip
|
||||
.css(tp)
|
||||
.addClass(placement)
|
||||
.addClass('in')
|
||||
}
|
||||
|
||||
if (popover.hasClass('embed')) {
|
||||
clipEmbedObj.show();
|
||||
}
|
||||
|
||||
if (popover.hasClass('share')) {
|
||||
clipShortUrl.show();
|
||||
updateSocial();
|
||||
}
|
||||
} else {
|
||||
popover.removeClass('in');
|
||||
popover.css('display', 'none');
|
||||
|
||||
popover.hasClass('embed') && clipEmbedObj.hide();
|
||||
popover.hasClass('share') && clipShortUrl.hide();
|
||||
}
|
||||
api && api.Resize();
|
||||
}
|
||||
|
||||
function updateEmbedCode(){
|
||||
var newWidth = parseInt($('#id-input-embed-width').val()),
|
||||
newHeight = parseInt($('#id-input-embed-height').val());
|
||||
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;
|
||||
|
|
@ -532,10 +526,10 @@ var ApplicationController = new(function(){
|
|||
if (newHeight < minEmbedHeight)
|
||||
newHeight = minEmbedHeight;
|
||||
|
||||
$('#id-textarea-embed').text(embedCode.replace('{embed-url}', embedConfig.embedUrl).replace('{width}', newWidth).replace('{height}', newHeight));
|
||||
$dlg.find('#txt-embed-url').text(embedCode.replace('{embed-url}', embedConfig.embedUrl).replace('{width}', newWidth).replace('{height}', newHeight));
|
||||
|
||||
$('#id-input-embed-width').val(newWidth + 'px');
|
||||
$('#id-input-embed-height').val(newHeight + 'px');
|
||||
$txtwidth.val(newWidth + 'px');
|
||||
$txtheight.val(newHeight + 'px');
|
||||
}
|
||||
|
||||
function openLink(url){
|
||||
|
|
@ -551,124 +545,40 @@ var ApplicationController = new(function(){
|
|||
me = this;
|
||||
created = true;
|
||||
|
||||
var documentMoveTimer;
|
||||
|
||||
|
||||
// popover ui handlers
|
||||
|
||||
$('#id-btn-copy').on('click', function(){
|
||||
var saveUrl = embedConfig.saveUrl;
|
||||
if (typeof saveUrl !== 'undefined' && saveUrl.length > 0){
|
||||
openLink(saveUrl);
|
||||
} else if (api && permissions.print!==false){
|
||||
api.asc_Print($.browser.chrome || $.browser.safari || $.browser.opera);
|
||||
}
|
||||
|
||||
Common.Analytics.trackEvent('Save');
|
||||
});
|
||||
|
||||
$('#id-btn-share').on('click', function(event){
|
||||
setVisiblePopover($('#id-popover-share'), !isVisiblePopover($('#id-popover-share')), $('#id-btn-share'));
|
||||
setVisiblePopover($('#id-popover-embed'), false);
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
$('#id-btn-embed').on('click', function(event){
|
||||
setVisiblePopover($('#id-popover-embed'), !isVisiblePopover($('#id-popover-embed')), $('#id-btn-embed'));
|
||||
setVisiblePopover($('#id-popover-share'), false);
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
$('#id-input-embed-width').on('keypress', function(e){
|
||||
if (e.keyCode == 13)
|
||||
updateEmbedCode();
|
||||
});
|
||||
|
||||
$('#id-input-embed-height').on('keypress', function(e){
|
||||
if (e.keyCode == 13)
|
||||
updateEmbedCode();
|
||||
});
|
||||
|
||||
$('#id-input-embed-width').on('focusin', function(e){
|
||||
api && api.asc_enableKeyEvents(false);
|
||||
});
|
||||
|
||||
$('#id-input-embed-height').on('focusin', function(e){
|
||||
api && api.asc_enableKeyEvents(false);
|
||||
});
|
||||
|
||||
$('#id-input-embed-width').on('focusout', function(e){
|
||||
updateEmbedCode();
|
||||
api && api.asc_enableKeyEvents(true);
|
||||
});
|
||||
|
||||
$('#id-input-embed-height').on('focusout', function(e){
|
||||
updateEmbedCode();
|
||||
api && api.asc_enableKeyEvents(true);
|
||||
});
|
||||
|
||||
$('#page-number').on('keyup', function(e){
|
||||
if (e.keyCode == 13){
|
||||
var newPage = parseInt($('#page-number').val());
|
||||
|
||||
if (newPage > maxPages)
|
||||
newPage = maxPages;
|
||||
if (newPage < 2 || isNaN(newPage))
|
||||
newPage = 1;
|
||||
|
||||
if (api)
|
||||
api.goToPage(newPage-1);
|
||||
}
|
||||
});
|
||||
|
||||
$('#page-number').on('focusout', function(e){
|
||||
api && api.asc_enableKeyEvents(true);
|
||||
});
|
||||
|
||||
$('#id-btn-fullscreen').on('click', function(){
|
||||
openLink(embedConfig.fullscreenUrl);
|
||||
});
|
||||
|
||||
$('#id-btn-close').on('click', function(){
|
||||
if (config.customization && config.customization.goback && config.customization.goback.url)
|
||||
window.parent.location.href = config.customization.goback.url;
|
||||
});
|
||||
|
||||
$('#id-btn-zoom-in').on('click', function(){
|
||||
if (api)
|
||||
api.zoomIn();
|
||||
});
|
||||
|
||||
$('#id-btn-zoom-out').on('click', function(){
|
||||
if (api)
|
||||
api.zoomOut();
|
||||
});
|
||||
|
||||
$(window).resize(function(){
|
||||
onDocumentResize();
|
||||
});
|
||||
|
||||
$(document).click(function(event){
|
||||
if (event && event.target && $(event.target).closest('.popover').length > 0)
|
||||
return;
|
||||
var ismodalshown = false;
|
||||
$(document.body).on('show.bs.modal', '.modal',
|
||||
function(e) {
|
||||
ismodalshown = true;
|
||||
api.asc_enableKeyEvents(false);
|
||||
}
|
||||
).on('hidden.bs.modal', '.modal',
|
||||
function(e) {
|
||||
ismodalshown = false;
|
||||
api.asc_enableKeyEvents(true);
|
||||
}
|
||||
).on('hidden.bs.dropdown', '.dropdown',
|
||||
function(e) {
|
||||
if ( !ismodalshown )
|
||||
api.asc_enableKeyEvents(true);
|
||||
}
|
||||
).on('blur', 'input, textarea',
|
||||
function(e) {
|
||||
if ( !ismodalshown ) {
|
||||
if (!/area_id/.test(e.target.id) ) {
|
||||
api.asc_enableKeyEvents(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
setVisiblePopover($('#id-popover-share'), false);
|
||||
setVisiblePopover($('#id-popover-embed'), false);
|
||||
});
|
||||
|
||||
$(document).mousemove(function(event){
|
||||
$('#id-btn-zoom-in').fadeIn();
|
||||
$('#id-btn-zoom-out').fadeIn();
|
||||
|
||||
clearTimeout(documentMoveTimer);
|
||||
documentMoveTimer = setTimeout(function(){
|
||||
$('#id-btn-zoom-in').fadeOut();
|
||||
$('#id-btn-zoom-out').fadeOut();
|
||||
}, 2000);
|
||||
$('#editor_sdk').on('click', function(e) {
|
||||
if ( e.target.localName == 'canvas' ) {
|
||||
e.currentTarget.focus();
|
||||
}
|
||||
});
|
||||
|
||||
window["flat_desine"] = true;
|
||||
|
|
@ -680,27 +590,16 @@ var ApplicationController = new(function(){
|
|||
api.asc_registerCallback('asc_onError', onError);
|
||||
api.asc_registerCallback('asc_onDocumentContentReady', onDocumentContentReady);
|
||||
api.asc_registerCallback('asc_onOpenDocumentProgress', onOpenDocument);
|
||||
api.asc_registerCallback('asc_onPrintUrl', onPrintUrl);
|
||||
|
||||
api.asc_registerCallback('asc_onCountPages', onCountPages);
|
||||
// api.asc_registerCallback('OnCurrentVisiblePage', onCurrentPage);
|
||||
api.asc_registerCallback('asc_onCurrentPage', onCurrentPage);
|
||||
api.asc_registerCallback('asc_onHyperlinkClick', onHyperlinkClick);
|
||||
api.asc_registerCallback('asc_onStartAction', onLongActionBegin);
|
||||
api.asc_registerCallback('asc_onEndAction', onLongActionEnd);
|
||||
|
||||
api.asc_registerCallback('asc_onMouseMoveStart', onDocMouseMoveStart);
|
||||
api.asc_registerCallback('asc_onMouseMoveEnd', onDocMouseMoveEnd);
|
||||
api.asc_registerCallback('asc_onMouseMove', onDocMouseMove);
|
||||
|
||||
api.asc_registerCallback('asc_onDownloadUrl', onDownloadUrl);
|
||||
api.asc_registerCallback('asc_onPrint', onPrint);
|
||||
api.asc_registerCallback('asc_onPrintUrl', onPrintUrl);
|
||||
|
||||
// Initialize api gateway
|
||||
Common.Gateway.on('init', loadConfig);
|
||||
Common.Gateway.on('opendocument', loadDocument);
|
||||
Common.Gateway.on('showerror', onExternalError);
|
||||
Common.Gateway.on('processmouse', onProcessMouse);
|
||||
Common.Gateway.on('downloadas', onDownloadAs);
|
||||
Common.Gateway.ready();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,49 +32,56 @@
|
|||
*/
|
||||
var ApplicationView = new(function(){
|
||||
|
||||
var $btnTools;
|
||||
var $dlgEmbed,
|
||||
$dlgShare;
|
||||
|
||||
// Initialize view
|
||||
|
||||
function createView(){
|
||||
$('#id-btn-share').popover({
|
||||
trigger : 'manual',
|
||||
html : true,
|
||||
template : '<div class="popover share" id="id-popover-share"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>',
|
||||
content : '<div class="share-link">' +
|
||||
'<span class="caption">Link:</span>' +
|
||||
'<input id="id-short-url" class="input-xs form-control" readonly/>' +
|
||||
'<button id="id-btn-copy-short" type="button" class="btn btn-xs btn-primary" style="width: 65px;" data-copied-text="Copied">Copy</button>' +
|
||||
'</div> ' +
|
||||
'<div class="share-buttons" style="height: 25px" id="id-popover-social-container" data-loaded="false">' +
|
||||
'<ul></ul>' +
|
||||
'</div>'
|
||||
}).popover('show');
|
||||
$btnTools = $('#box-tools button');
|
||||
|
||||
$('#id-btn-embed').popover({
|
||||
trigger : 'manual',
|
||||
html : true,
|
||||
template : '<div class="popover embed" id="id-popover-embed"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>',
|
||||
content : '<div class="size-manual">' +
|
||||
'<span class="caption">Width:</span>' +
|
||||
'<input id="id-input-embed-width" class="form-control input-xs" type="text" value="400px">' +
|
||||
'<input id="id-input-embed-height" class="form-control input-xs right" type="text" value="600px">' +
|
||||
'<span class="right caption">Height:</span>' +
|
||||
'</div>' +
|
||||
'<textarea id="id-textarea-embed" rows="4" class="form-control" readonly></textarea>' +
|
||||
'<button id="id-btn-copy-embed" type="button" class="btn btn-xs btn-primary" data-copied-text="Copied">Copy</button>'
|
||||
$btnTools.addClass('dropdown-toggle').attr('data-toggle', 'dropdown').attr('aria-expanded', 'true');
|
||||
$btnTools.parent().append(
|
||||
'<ul class="dropdown-menu">' +
|
||||
'<li><a id="idt-download" href="#"><span class="mi-icon svg-icon download"></span>Download</a></li>' +
|
||||
'<li><a id="idt-share" href="#" data-toggle="modal"><span class="mi-icon svg-icon share"></span>Share</a></li>' +
|
||||
'<li><a id="idt-embed" href="#" data-toggle="modal"><span class="mi-icon svg-icon embed"></span>Embed</a></li>' +
|
||||
'<li><a id="idt-fullscreen" href="#"><span class="mi-icon svg-icon fullscr"></span>Full Screen</a></li>' +
|
||||
'</ul>');
|
||||
}
|
||||
|
||||
function getTools(name) {
|
||||
return $btnTools.parent().find(name);
|
||||
}
|
||||
|
||||
}).popover('show');
|
||||
|
||||
$('body').popover({
|
||||
trigger : 'manual',
|
||||
html : true,
|
||||
animation : false,
|
||||
template : '<div class="popover hyperlink" id="id-tip-hyperlink"><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>',
|
||||
content : '<br><b>Press Ctrl and click link</b>'
|
||||
}).popover('show');
|
||||
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'));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in a new issue