Skip to content

W
web-apps
Commit 3c44af10 authored by Maxim Kadushkin's avatar Maxim Kadushkin
Browse files
Options

[DE embed] view changed: popovers => modals, action buttons => dropdown

parent aec0a03e
Hide whitespace changes
Inline Side-by-side
Showing with 786 additions and 491 deletions
apps/common/embed/lib/view/modals.js 0 → 100644
View file @ 3c44af10
/*
*
* (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">&times;</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;
}
};
})();
apps/common/embed/resources/img/icon-menu-sprite.svg 0 → 100644
View file @ 3c44af10
<?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>
apps/common/embed/resources/img/icon-social-sprite.svg 0 → 100644
View file @ 3c44af10
<?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>
apps/common/embed/resources/img/logo.svg 0 → 100644
View file @ 3c44af10
<?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>
apps/common/embed/resources/less/common.less
View file @ 3c44af10
......@@ -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
}
}
\ No newline at end of file
apps/documenteditor/embed/index.html
View file @ 3c44af10
......@@ -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">&times;</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>
......
apps/documenteditor/embed/js/ApplicationController.js
View file @ 3c44af10
......@@ -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 (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 ( !embedConfig.shareUrl )
$('#idt-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();
$tooltip.css({
left: $ttEl.ttpos[0] - 10,
top: $ttEl.ttpos[1] - 5
});
if ($tipHyperlink.length > 0) {
$tipHyperlink.find('.popover-content p').html(htmlEncode(toolTip) + '<br><b>Press Ctrl and click link</b>');
$tipHyperlink.show();
$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;
setVisiblePopover($('#id-popover-share'), false);
setVisiblePopover($('#id-popover-embed'), false);
});
$(document).mousemove(function(event){
$('#id-btn-zoom-in').fadeIn();
$('#id-btn-zoom-out').fadeIn();
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);
}
}
}
);
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();
}
......
apps/documenteditor/embed/js/ApplicationView.js
View file @ 3c44af10
......@@ -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');
$('#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 = $('#box-tools 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>');
}
}).popover('show');
function getTools(name) {
return $btnTools.parent().find(name);
}
$('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'));
}
}
}
}
})();
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7