Repository: binjospookie/--shots Branch: master Commit: 5c35ab3c196e Files: 78 Total size: 52.2 MB Directory structure: gitextract_brzbnbrg/ ├── .gitignore ├── .travis.yml ├── ISSUE_TEMPLATE.md ├── LICENSE ├── README.md ├── build/ │ └── icon.icns ├── common.css ├── download.md ├── functions.php ├── gulpfile.js ├── images/ │ └── spinner.piskel ├── index.html ├── index.mac.html ├── main.js ├── package.json ├── posts.md ├── rpm/ │ └── shots-1.2.0-2.x86_64.rpm ├── savephoto.default ├── savephoto.php ├── scripts/ │ ├── appMenu.js │ ├── functions/ │ │ ├── addModalButtonListeners.js │ │ ├── addScreenshot.js │ │ ├── arrowListeners.js │ │ ├── calcAngle.js │ │ ├── calcDistance.js │ │ ├── closeModal.js │ │ ├── commonSettingsInputChangeHandler.js │ │ ├── createDeleteButton.js │ │ ├── createEditButton.js │ │ ├── createTransformButton.js │ │ ├── cropListeners.js │ │ ├── decodeBase64Image.js │ │ ├── determineScreenShotSize.js │ │ ├── fieldsetsListener.js │ │ ├── getCookieByName.js │ │ ├── getDegree.js │ │ ├── getSettings.js │ │ ├── hideControls.js │ │ ├── hideLoader.js │ │ ├── initCommonSettings.js │ │ ├── initSettings.js │ │ ├── modalOnStart.js │ │ ├── penListeners.js │ │ ├── popUp.js │ │ ├── preventDND.js │ │ ├── rectListeners.js │ │ ├── sendToServer.js │ │ ├── sendToSocialNetwork.js │ │ ├── serverButtonClickHandler.js │ │ ├── serverMessage.js │ │ ├── setDefaultFrame.js │ │ ├── setDefaultScene.js │ │ ├── setFieldsetStatus.js │ │ ├── setTransformRectDistance.js │ │ ├── showControls.js │ │ ├── signinFormSubmitHandler.js │ │ └── textEventListeners.js │ ├── ipc/ │ │ ├── ipcAdd.js │ │ └── ipcRendered.js │ ├── menu.js │ └── renderer.js ├── shots.cli ├── shots.package/ │ ├── mac/ │ │ └── package.json │ └── win.linux/ │ └── package.json ├── stylelint.config.js └── styles/ ├── common.css └── src/ ├── aside#loader.css ├── aside#messageToUser.css ├── aside.settings.css ├── aside.shortcut.css ├── aside.sign-in.css ├── body.css ├── canvas.css ├── div#frame.css ├── hint.css ├── reset.css ├── switcher.css └── textSidebar.css ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ node_modules dist ================================================ FILE: .travis.yml ================================================ git: depth: 10 notifications: email: false language: node_js node_js: - "6" install: - rm -rf node_modules - npm install os: - linux env: - TARGET_ARCH=x64 matrix: include: - os: linux env: TARGET_ARCH=arm script: - npm run compile - stylelint ./common.css branches: only: - master ================================================ FILE: ISSUE_TEMPLATE.md ================================================ # How to reproduce ## Expected behavior ## Actual behavior * Operating system: * --shots version: ================================================ FILE: LICENSE ================================================ Non-Profit Open Software License ("Non-Profit OSL") 3.0 This Non-Profit Open Software License ("Non-Profit OSL") version 3.0 (the "License") applies to any original work of authorship (the "Original Work") whose owner (the "Licensor") has placed the following licensing notice adjacent to the copyright notice for the Original Work: Licensed under the Non-Profit Open Software License version 3.0 1) Grant of Copyright License. Licensor grants You a worldwide, royalty-free, non-exclusive, sublicensable license, for the duration of the copyright, to do the following: a) to reproduce the Original Work in copies, either alone or as part of a collective work; b) to translate, adapt, alter, transform, modify, or arrange the Original Work, thereby creating derivative works ("Derivative Works") based upon the Original Work; c) to distribute or communicate copies of the Original Work and Derivative Works to the public, with the proviso that copies of Original Work or Derivative Works that You distribute or communicate shall be licensed under this Non-Profit Open Software License or as provided in section 17(d); d) to perform the Original Work publicly; and e) to display the Original Work publicly. 2) Grant of Patent License. Licensor grants You a worldwide, royalty-free, non-exclusive, sublicensable license, under patent claims owned or controlled by the Licensor that are embodied in the Original Work as furnished by the Licensor, for the duration of the patents, to make, use, sell, offer for sale, have made, and import the Original Work and Derivative Works. 3) Grant of Source Code License. The term "Source Code" means the preferred form of the Original Work for making modifications to it and all available documentation describing how to modify the Original Work. Licensor agrees to provide a machine-readable copy of the Source Code of the Original Work along with each copy of the Original Work that Licensor distributes. Licensor reserves the right to satisfy this obligation by placing a machine-readable copy of the Source Code in an information repository reasonably calculated to permit inexpensive and convenient access by You for as long as Licensor continues to distribute the Original Work. 4) Exclusions From License Grant. Neither the names of Licensor, nor the names of any contributors to the Original Work, nor any of their trademarks or service marks, may be used to endorse or promote products derived from this Original Work without express prior permission of the Licensor. Except as expressly stated herein, nothing in this License grants any license to Licensor's trademarks, copyrights, patents, trade secrets or any other intellectual property. No patent license is granted to make, use, sell, offer for sale, have made, or import embodiments of any patent claims other than the licensed claims defined in Section 2. No license is granted to the trademarks of Licensor even if such marks are included in the Original Work. Nothing in this License shall be interpreted to prohibit Licensor from licensing under terms different from this License any Original Work that Licensor otherwise would have a right to license. 5) External Deployment. The term "External Deployment" means the use, distribution, or communication of the Original Work or Derivative Works in any way such that the Original Work or Derivative Works may be used by anyone other than You, whether those works are distributed or communicated to those persons or made available as an application intended for use over a network. As an express condition for the grants of license hereunder, You must treat any External Deployment by You of the Original Work or a Derivative Work as a distribution under section 1(c). 6) Attribution Rights. You must retain, in the Source Code of any Derivative Works that You create, all copyright, patent, or trademark notices from the Source Code of the Original Work, as well as any notices of licensing and any descriptive text identified therein as an "Attribution Notice." You must cause the Source Code for any Derivative Works that You create to carry a prominent Attribution Notice reasonably calculated to inform recipients that You have modified the Original Work. 7) Warranty of Provenance and Disclaimer of Warranty. The Original Work is provided under this License on an "AS IS" BASIS and WITHOUT WARRANTY, either express or implied, including, without limitation, the warranties of non-infringement, merchantability or fitness for a particular purpose. THE ENTIRE RISK AS TO THE QUALITY OF THE ORIGINAL WORK IS WITH YOU. This DISCLAIMER OF WARRANTY constitutes an essential part of this License. No license to the Original Work is granted by this License except under this disclaimer. 8) Limitation of Liability. Under no circumstances and under no legal theory, whether in tort (including negligence), contract, or otherwise, shall the Licensor be liable to anyone for any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or the use of the Original Work including, without limitation, damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses. This limitation of liability shall not apply to the extent applicable law prohibits such limitation. 9) Acceptance and Termination. If, at any time, You expressly assented to this License, that assent indicates your clear and irrevocable acceptance of this License and all of its terms and conditions. If You distribute or communicate copies of the Original Work or a Derivative Work, You must make a reasonable effort under the circumstances to obtain the express assent of recipients to the terms of this License. This License conditions your rights to undertake the activities listed in Section 1, including your right to create Derivative Works based upon the Original Work, and doing so without honoring these terms and conditions is prohibited by copyright law and international treaty. Nothing in this License is intended to affect copyright exceptions and limitations (including "fair use" or "fair dealing"). This License shall terminate immediately and You may no longer exercise any of the rights granted to You by this License upon your failure to honor the conditions in Section 1(c). 10) Termination for Patent Action. This License shall terminate automatically and You may no longer exercise any of the rights granted to You by this License as of the date You commence an action, including a cross-claim or counterclaim, against Licensor or any licensee alleging that the Original Work infringes a patent. This termination provision shall not apply for an action alleging patent infringement by combinations of the Original Work with other software or hardware. 11) Jurisdiction, Venue and Governing Law. Any action or suit relating to this License may be brought only in the courts of a jurisdiction wherein the Licensor resides or in which Licensor conducts its primary business, and under the laws of that jurisdiction excluding its conflict-of-law provisions. The application of the United Nations Convention on Contracts for the International Sale of Goods is expressly excluded. Any use of the Original Work outside the scope of this License or after its termination shall be subject to the requirements and penalties of copyright or patent law in the appropriate jurisdiction. This section shall survive the termination of this License. 12) Attorneys' Fees. In any action to enforce the terms of this License or seeking damages relating thereto, the prevailing party shall be entitled to recover its costs and expenses, including, without limitation, reasonable attorneys' fees and costs incurred in connection with such action, including any appeal of such action. This section shall survive the termination of this License. 13) Miscellaneous. If any provision of this License is held to be unenforceable, such provision shall be reformed only to the extent necessary to make it enforceable. 14) Definition of "You" in This License. "You" throughout this License, whether in upper or lower case, means an individual or a legal entity exercising rights under, and complying with all of the terms of, this License. For legal entities, "You" includes any entity that controls, is controlled by, or is under common control with you. For purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. 15) Right to Use. You may use the Original Work in all ways not otherwise restricted or conditioned by this License or by law, and Licensor promises not to interfere with or be responsible for such uses by You. 16) Modification of This License. This License is Copyright © 2005 Lawrence Rosen. Permission is granted to copy, distribute, or communicate this License without modification. Nothing in this License permits You to modify this License as applied to the Original Work or to Derivative Works. However, You may modify the text of this License and copy, distribute or communicate your modified version (the "Modified License") and apply it to other original works of authorship subject to the following conditions: (i) You may not indicate in any way that your Modified License is the "Open Software License" or "OSL" and you may not use those names in the name of your Modified License; (ii) You must replace the notice specified in the first paragraph above with the notice "Licensed under " or with a notice of your own that is not confusingly similar to the notice in this License; and (iii) You may not claim that your original works are open source software unless your Modified License has been approved by Open Source Initiative (OSI) and You comply with its license review and certification process. 17) Non-Profit Amendment. The name of this amended version of the Open Software License ("OSL 3.0") is "Non-Profit Open Software License 3.0". The original OSL 3.0 license has been amended as follows: (a) Licensor represents and declares that it is a not-for-profit organization that derives no revenue whatsoever from the distribution of the Original Work or Derivative Works thereof, or from support or services relating thereto. (b) The first sentence of Section 7 ["Warranty of Provenance"] of OSL 3.0 has been stricken. For Original Works licensed under this Non-Profit OSL 3.0, LICENSOR OFFERS NO WARRANTIES WHATSOEVER. (c) In the first sentence of Section 8 ["Limitation of Liability"] of this Non-Profit OSL 3.0, the list of damages for which LIABILITY IS LIMITED now includes "direct" damages. (d) The proviso in Section 1(c) of this License now refers to this "Non-Profit Open Software License" rather than the "Open Software License". You may distribute or communicate the Original Work or Derivative Works thereof under this Non-Profit OSL 3.0 license only if You make the representation and declaration in paragraph (a) of this Section 17. Otherwise, You shall distribute or communicate the Original Work or Derivative Works thereof only under the OSL 3.0 license and You shall publish clear licensing notices so stating. Also by way of clarification, this License does not authorize You to distribute or communicate works under this Non-Profit OSL 3.0 if You received them under the original OSL 3.0 license. (e) Original Works licensed under this license shall reference "Non-Profit OSL 3.0" in licensing notices to distinguish them from works licensed under the original OSL 3.0 license. ================================================ FILE: README.md ================================================ # --shots ***Project is not maintainable. If you want to use it you must to see > How can I save screenshots on my own server?*** [![http://electron.atom.io](https://cdn.rawgit.com/amitmerchant1990/electron-markdownify/d0059441c4440c89f9d098b367fd5d987ac044f2/img/electron-badge.svg)](http://electron.atom.io) [![Build Status](https://travis-ci.org/binjospookie/--shots.svg?branch=master)](https://travis-ci.org/binjospookie/--shots) [![Github All Releases](https://img.shields.io/github/downloads/binjospookie/--shots/total.svg)](https://github.com/binjospookie/--shots) [![GitHub release](https://img.shields.io/github/release/binjospookie/--shots.svg)](https://github.com/binjospookie/--shots/) Task-focused application for creating screenshots. It's simple and free!
Just download the package for your OS and start working!
To access the tools use the global menu, context menu(click on the right mouse button) or shortcuts.
[Project's site with video](https://theshots.ru)
[Download links](https://github.com/binjospookie/--shots/blob/master/download.md)
## --shots in action --shots in action
## Why --shots __--shots__ provides all the tools you may need to work with screenshots.
It's forever free application without annoying ads and etc. Learn about all the opportunities available [here](https://github.com/binjospookie/--shots/wiki) ## Ways to save your screenshot * locally * to clipboard * to our servers. On success we put link to screenshot to clipboard * to Dropbox * to Imgur. On success we put link to screenshot to clipboard Also you could post your screenshots from --shots to Facebook, Twitter, VKontakte. ## Available tools * Arrow * Crop * Pen * Rect * Sticker * Blur * Text
> All shortcuts [here](https://github.com/binjospookie/--shots/wiki/Shortcuts)
## How can I save screenshots on my own server? * Put `functions.php` and `savePhoto.php` on your server * Launch app * Open 'Settings' and click on 'Change server path' * Type path and click on 'Save'. > If you want send shots to default server just erase your path than click on 'Save'.
But you can't use admin-page. ## How run --shots from console? * `npm install` * `npm run && npm start` > You cannot save screenshots to Dropbox or imgur, because we do not provide the keys of our application in the source code.
## Posts about --shots * https://mavielinux.com/2016/11/28/shots-pour-prendre-et-editer-vos-captures-decran/ * http://blog.desdelinux.net/shots-capturar-pantalla/# * http://www.fousoft.com/shots.html * http://www.softpedia.com/get/Multimedia/Graphic/Graphic-Capture/--shots.shtml (duplicate of ^) * https://habrahabr.ru/post/316880/ * http://www.omgubuntu.co.uk/2017/02/shots-annotate-screenshots-ubuntu-app * http://126kr.com/article/3y9sb54m6p1 (duplicate of ^) * http://www.lffl.org/2017/02/shots-prendere-annotare-screenshot.html * http://alternativeto.net/software/shots/ * http://www.ticeman.fr/lecoutelas/?p=4253 * http://www.stahuj.centrum.cz/grafika_a_design/zachycovani_obrazovky/-shots/?&g%5Boz%5D=0.1.1 * http://linux-actif.fr/shots * http://andro-buntu.blogspot.ru/2017/02/shots-aplikasi-screenshot-berbasis.html * http://linoxide.com/linux-how-to/screenshots-elementary-loki-ubuntu/ * "Planete LINUX" #96 * https://fredfire1.wordpress.com/2016/03/31/install-gyazo-debian-64bit/ * http://www.linux-magazine.com/Issues/2017/198/FOSSPicks/(offset)/3 ## Podcasts about --shots * https://soundcloud.com/humane-technology/shots-screenshot-annotation
***First commit was added 24 Sep 2016*** If you want to thank us, just starring the project and tell your friends about --shots :tada: ================================================ FILE: common.css ================================================ @import "https://fonts.googleapis.com/css?family=Roboto:300,400,700&subset=cyrillic"; /* stylelint-disable */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{ padding: 0; margin: 0; font: inherit; font-size: 100%; vertical-align: baseline; border: 0; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ display: block; } body{ line-height: 1; } ol, ul{ list-style: none; } blockquote, q{ quotes: none; } blockquote:before, blockquote:after, q:before, q:after{ content: ""; content: none; } table{ border-collapse: collapse; border-spacing: 0; } body{ position: relative; width: 100vw; height: 100vh; background: #ededed; } body.modal:before{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none; content: ""; background: rgba(0, 0, 0, .8); } body.crop{ cursor: crosshair; } body.move{ cursor: move; } body.draw{ cursor: pointer; } body.text{ cursor: text; } body.centered > canvas{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } div#frame{ position: absolute; top: 0; left: 0; display: none; width: 5px; height: 5px; outline: 1000vw solid rgba(0, 0, 0, .8); } div#frame.show{ display: block; } aside.hint{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; display: none; width: 500px; max-height: 495px; padding: 20px; margin: auto; font-family: "Roboto", sans-serif; background: #F4F3F2; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .08), 0 3px 12px 0 rgba(0, 0, 0, .12); } aside.hint > h1{ padding: 0; margin: 30px 0 0 10px; font-size: 24px; font-weight: 600; } aside.hint > h2{ padding: 0; margin: 30px 0 0 10px; font-weight: 600; } aside.hint > ul{ padding: 10px 0 0 20px; margin: 0; } aside.hint > ul > li{ padding: 0; margin-bottom: 10px; font-size: 14px; line-height: 1.4rem; } aside.hint > ul > li > span{ font-weight: 600; } aside.hint > button{ display: inline-block; font-size: .9em; text-transform: uppercase; cursor: pointer; color: #4285f4; background: none; border: none; } aside.hint > button.js-close-agree{ width: 100%; padding-right: 20px; margin-top: 20px; text-align: right; } aside.hint > button.js-close-hint{ position: absolute; top: 10px; right: 5px; display: block; overflow: hidden; width: 40px; height: 32px; text-indent: 40px; cursor: pointer; opacity: .3; } aside.hint > button.js-close-hint:before, aside.hint > button.js-close-hint:after{ position: absolute; top: 0; left: 18px; width: 2px; height: 33px; content: ""; background-color: #8C8888; } aside.hint > button.js-close-hint:before{ transform: rotate(45deg); } aside.hint > button.js-close-hint:after{ transform: rotate(-45deg); } aside.hint > button.js-close-hint:hover{ opacity: 1; } aside.hint > button:focus{ outline: none; } aside.hint.open{ display: block; } aside#loader{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; display: none; margin: auto; background: rgba(0, 0, 0, .8); } aside#loader > span{ position: absolute; top: 50%; right: 0; bottom: 0; left: 0; margin: 55px auto; font-family: "Roboto", sans-serif; text-align: center; color: white; } aside#loader > .spinner{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 70px; height: 70px; margin: auto; animation: rotation 1.4s linear infinite; stroke: #4285f4; } aside#loader > .spinner > .circle{ transform-origin: center; animation: turn 1.4s ease-in-out infinite; stroke-dasharray: 187; stroke-dashoffset: 0; } aside#loader.show{ display: block; } @keyframes rotation{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(270deg); } } @keyframes turn{ 0%{ stroke-dashoffset: 187; } 50%{ transform: rotate(135deg); stroke-dashoffset: 46.75; } 100%{ transform: rotate(450deg); stroke-dashoffset: 187; } } aside.hint.shortcut{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; width: 570px; height: 390px; padding: 20px; margin: auto; font-family: "Roboto", sans-serif; background: #F4F3F2; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .08), 0 3px 12px 0 rgba(0, 0, 0, .12); } aside.hint.shortcut > ul{ width: 550px; margin: 30px 0 0; list-style-type: none; -webkit-column-count: 2; } aside.hint.shortcut > ul > li{ width: 250px; margin-bottom: 10px; } aside.hint.shortcut > ul > li > span{ font-weight: bold; } aside.settings{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; display: none; width: 570px; height: 280px; padding: 20px; margin: auto; font-family: "Roboto", sans-serif; background: #F4F3F2; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .08), 0 3px 12px 0 rgba(0, 0, 0, .12); } aside.settings > h2{ padding: 0; margin: 20px 0 0 10px; font-weight: 600; } aside.settings > form{ margin: 40px 0 0 10px; } aside.settings > form > fieldset{ display: inline-block; width: 270px; vertical-align: top; } aside.settings > form > fieldset > legend{ padding: 0; margin-bottom: 10px; font-size: 16px; font-weight: 600; } aside.settings > form > fieldset > ul{ margin-top: 10px; margin-bottom: 35px; } aside.settings > form > fieldset > ul > li{ display: block; margin-bottom: 10px; } aside.settings > form > fieldset > ul > li > label{ display: inline-block; } aside.settings > form > fieldset > ul > li > label > input{} aside.settings > form > fieldset > ul > li > label > input[type="number"]{ display: inline-block; width: 60px; } aside.settings > form > fieldset > ul > li > input{ margin-right: 10px; } aside.settings > form > fieldset.not-blocked > ul{ margin-top: 36px; } aside.settings > form > fieldset:disabled{ opacity: .5; } aside.settings > form > fieldset:disabled input, aside.settings > form > fieldset:disabled label{ cursor: not-allowed; } aside.settings > form label{ -webkit-user-select: none; } aside.settings > form > input#serverinput, aside.settings > form > button#serverPath{ position: absolute; left: 305px; } aside.settings > form > input#serverinput{ top: 135px; display: none; } aside.settings > form > input#serverinput.visible{ display: block; } aside.settings > form > button#serverPath{ top: 95px; padding: 0; font-size: 16px; font-weight: 600; cursor: pointer; color: black; background: none; border: none; outline: none; } aside.settings > form > button#serverPath:hover{ color: #4285f4; } aside.settings > button{ display: inline-block; font-size: .9em; text-transform: uppercase; cursor: pointer; color: #4285f4; background: none; border: none; } aside.settings > button.js-close-agree{ width: 100%; padding-right: 20px; margin-top: 20px; text-align: right; } aside.settings > button.js-close-hint{ position: absolute; top: 10px; right: 5px; display: block; overflow: hidden; width: 40px; height: 32px; text-indent: 40px; cursor: pointer; opacity: .3; } aside.settings > button.js-close-hint:before, aside.settings > button.js-close-hint:after{ position: absolute; top: 0; left: 18px; width: 2px; height: 33px; content: ""; background-color: #8C8888; } aside.settings > button.js-close-hint:before{ transform: rotate(45deg); } aside.settings > button.js-close-hint:after{ transform: rotate(-45deg); } aside.settings > button.js-close-hint:hover{ opacity: 1; } aside.settings > button:focus{ outline: none; } aside.settings.open{ display: block; } aside.sign-in{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; display: none; width: 300px; height: 210px; padding: 20px; margin: auto; font-family: "Roboto", sans-serif; background: #F4F3F2; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .08), 0 3px 12px 0 rgba(0, 0, 0, .12); } aside.sign-in >h2{ padding: 0; margin: 20px 0 0 10px; font-weight: 600; } aside.sign-in >form{ margin: 40px 0 0 10px; } aside.sign-in >form > label{ display: block; width: 220px; margin: 0 auto 20px; } aside.sign-in >form > label > input{ width: 100%; height: 20px; font-size: 14px; color: black; background: transparent; border: none; border-bottom: 1px solid #37aee2; } aside.sign-in >form >button{ display: inline-block; font-size: .9em; text-transform: uppercase; cursor: pointer; color: #4285f4; background: none; border: none; } aside.sign-in >form >button[type="submit"]{ display: block; margin: 40px auto; } aside.sign-in >form >button.js-close-agree{ width: 100%; padding-right: 20px; margin-top: 20px; text-align: right; } aside.sign-in >form >button.js-close-hint{ position: absolute; top: 10px; right: 5px; display: block; overflow: hidden; width: 40px; height: 32px; text-indent: 40px; cursor: pointer; opacity: .3; } aside.sign-in >form >button.js-close-hint:before, aside.sign-in >form >button.js-close-hint:after{ position: absolute; top: 0; left: 18px; width: 2px; height: 33px; content: ""; background-color: #8C8888; } aside.sign-in >form >button.js-close-hint:before{ transform: rotate(45deg); } aside.sign-in >form >button.js-close-hint:after{ transform: rotate(-45deg); } aside.sign-in >form >button.js-close-hint:hover{ opacity: 1; } aside.sign-in >form >button:focus{ outline: none; } aside.sign-in.open{ display: block; } aside#messageToUser{ position: fixed; top: 0; right: 0; left: 0; z-index: 5; display: flex; justify-content: center; align-items: center; visibility: hidden; padding: 50px 20px; margin: auto; opacity: 0; background: white; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .08),0 3px 12px 0 rgba(0, 0, 0, .12); transition: all .3s; } aside#messageToUser > p{ position: relative; z-index: 1; font-family: "Roboto", sans-serif; font-size: 20px; } aside#messageToUser > p:before{ position: fixed; top: 120px; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; content: ""; background: rgba(0, 0, 0, .8); } aside#messageToUser.show-hide{ visibility: visible; opacity: 1; transition: all .3s; } .switch{ position: absolute; right: 46px; bottom: 20px; display: inline-block; width: 50px; height: 25px; } .switch > span{ position: absolute; top: 9px; left: -106px; width: 107px; } .switch input{ display: none; } .slider{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before{ position: absolute; bottom: 3px; left: 4px; width: 19px; height: 19px; content: ""; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider{ background-color: #2196F3; } input:focus + .slider{ box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before{ -webkit-transform: translateX(24px); -ms-transform: translateX(24px); transform: translateX(24px); } .slider.round{ border-radius: 34px; } .slider.round:before{ border-radius: 50%; } form#textSidebar{ position: fixed; top: 50%; left: 20px; display: none; width: 310px; min-height: 335px; padding-top: 50px; padding-bottom: 20px; padding-left: 10px; font-family: "Roboto", sans-serif; background: #F4F3F2; box-shadow: 0 14px 28px rgba(0, 0, 0 , .25), 0 10px 10px rgba(0, 0, 0, .22); transform: translateY(-50%); } form#textSidebar > label{ display: block; padding: 0; margin: 20px 0 10px 10px; font-weight: 600; font-size: 20px; } form#textSidebar > textarea, form#textSidebar > select, form#textSidebar > input{ display: block; margin-bottom: 30px; margin-left: 10px; } form#textSidebar > textarea{ width: 280px; resize: vertical; } form#textSidebar > button{ display: inline-block; font-size: .9em; text-transform: uppercase; cursor: pointer; color: #4285f4; background: none; border: none; } form#textSidebar > button.close-button{ position: absolute; top: 10px; right: 5px; display: block; overflow: hidden; width: 40px; height: 32px; text-indent: 40px; cursor: pointer; } form#textSidebar > button.close-button:before, form#textSidebar > button.close-button:after{ position: absolute; top: 0; left: 18px; width: 2px; height: 33px; content: ""; background-color: #8C8888; } form#textSidebar > button.close-button:before{ transform: rotate(45deg); } form#textSidebar > button.close-button:after{ transform: rotate(-45deg); } form#textSidebar > button:focus{ outline: none; } form#textSidebar > button.deleteText{ margin-left: 4px; } form#textSidebar.show{ display: block; } ================================================ FILE: download.md ================================================ # Download Available for Linux,Windows, MacOS (exclude v0.1.3) ## v1.2.0 * [shots-1.2.0-x86_64.AppImage](https://github.com/binjospookie/--shots/releases/download/v1.2.0/shots-1.2.0-x86_64.AppImage) * [shots-1.2.0.dmg](https://github.com/binjospookie/--shots/releases/download/v1.2.0/shots-1.2.0.dmg) * [shots-1.2.0.pacman](https://github.com/binjospookie/--shots/releases/download/v1.2.0/shots-1.2.0.pacman) * [shots.portable.1.2.0.exe](https://github.com/binjospookie/--shots/releases/download/v1.2.0/shots.portable.1.2.0.exe) * [shots.Setup.1.2.0.exe](https://github.com/binjospookie/--shots/releases/download/v1.2.0/shots.Setup.1.2.0.exe) * [shots_1.2.0_amd64.deb](https://github.com/binjospookie/--shots/releases/download/v1.2.0/shots_1.2.0_amd64.deb) * [Source code (zip)](https://github.com/binjospookie/--shots/archive/v1.2.0.zip) * [Source code (tar.gz)](https://github.com/binjospookie/--shots/archive/v1.2.0.tar.gz) ## v1.1.0 * [shots-1.1.0-x86_64.AppImage](https://github.com/binjospookie/--shots/releases/download/v1.1.0/shots-1.1.0-x86_64.AppImage) * [shots-1.1.0.pacman](https://github.com/binjospookie/--shots/releases/download/v1.1.0/shots-1.1.0.pacman) * [shots.portable.1.1.0.exe](https://github.com/binjospookie/--shots/releases/download/v1.1.0/shots.portable.1.1.0.exe) * [shots.Setup.1.1.0.exe](https://github.com/binjospookie/--shots/releases/download/v1.1.0/shots.Setup.1.1.0.exe) * [shots_1.1.0_amd64.deb](https://github.com/binjospookie/--shots/releases/download/v1.1.0/shots_1.1.0_amd64.deb) * [Source code (zip)](https://github.com/binjospookie/--shots/archive/v1.1.0.zip) * [Source code (tar.gz)](https://github.com/binjospookie/--shots/archive/v1.1.0.tar.gz) ## v1.0.4 * [shots-1.0.4-x86_64.AppImage](https://github.com/binjospookie/--shots/releases/download/v1.0.4/shots-1.0.4-x86_64.AppImage) * [shots.portable.1.0.4.exe](https://github.com/binjospookie/--shots/releases/download/v1.0.4/shots.portable.1.0.4.exe) * [shots.Setup.1.0.4.exe](https://github.com/binjospookie/--shots/releases/download/v1.0.4/shots.Setup.1.0.4.exe) * [shots_1.0.4_amd64.deb](https://github.com/binjospookie/--shots/releases/download/v1.0.4/shots_1.0.4_amd64.deb) * [Source code (zip)](https://github.com/binjospookie/--shots/archive/v1.0.4.zip) * [Source code (tar.gz)](https://github.com/binjospookie/--shots/archive/v1.0.4.tar.gz) ## v1.0.3 * [shots-1.0.3-amd64.deb](https://github.com/binjospookie/--shots/releases/download/v1.0.3/shots_1.0.3_amd64.deb)
* [shots-1.0.3-x86_64.AppImage](https://github.com/binjospookie/--shots/releases/download/v1.0.3/shots-1.0.3-x86_64.AppImage)
* [shots-1.0.3.dmg](https://github.com/binjospookie/--shots/releases/download/v1.0.3/shots-1.0.3.dmg)
* [shots.Setup.1.0.3.exe](https://github.com/binjospookie/--shots/releases/download/v1.0.3/shots.Setup.1.0.3.exe)
* [shots.portable.1.0.3.exe](https://github.com/binjospookie/--shots/releases/download/v1.0.3/shots.portable.1.0.3.exe)
* [Source code (zip)](https://github.com/binjospookie/--shots/archive/v1.0.3.zip)
* [Source code (tar.gz)](https://github.com/binjospookie/--shots/archive/v1.0.3.tar.gz) ## v1.0.2 * [shots-1.0.2-amd64.deb](https://github.com/binjospookie/--shots/releases/download/v1.0.2/shots_1.0.2_amd64.deb)
* [shots-1.0.2-x86_64.AppImage](https://github.com/binjospookie/--shots/releases/download/v1.0.2/shots-1.0.2-x86_64.AppImage)
* [shots-1.0.2.pacman](https://github.com/binjospookie/--shots/releases/download/v1.0.2/shots-1.0.2.pacman)
* [shots-1.0.20.dmg](https://github.com/binjospookie/--shots/releases/download/v1.0.2/shots-1.0.2.dmg)
* [shots.Setup.1.0.2.exe](https://github.com/binjospookie/--shots/releases/download/v1.0.2/shots.Setup.1.0.2.exe)
* [shots.portable.1.0.2.exe](https://github.com/binjospookie/--shots/releases/download/v1.0.2/shots.1.0.2.portable.exe)
* [Source code (zip)](https://github.com/binjospookie/--shots/archive/v1.0.2.zip)
* [Source code (tar.gz)](https://github.com/binjospookie/--shots/archive/v1.0.2.tar.gz) ## v1.0.1 Short links were added. You don't need to download new version of app. It's works from v0.1.1. ## v1.0.0 * [shots-1.0.0-amd64.deb](https://github.com/binjospookie/--shots/releases/download/v1.0.0/shots_1.0.0_amd64.deb)
* [shots-1.0.0-x86_64.AppImage](https://github.com/binjospookie/--shots/releases/download/v1.0.0/shots-1.0.0-x86_64.AppImage)
* [shots-1.0.0.pacman](https://github.com/binjospookie/--shots/releases/download/v1.0.0/shots-1.0.0.pacman)
* [shots-1.0.0.dmg](https://github.com/binjospookie/--shots/releases/download/v1.0.0/shots-1.0.0.dmg)
* [shots.Setup.1.0.0.exe](https://github.com/binjospookie/--shots/releases/download/v1.0.0/shots.Setup.1.0.0.exe)
* [Source code (zip)](https://github.com/binjospookie/--shots/archive/v1.0.0.zip)
* [Source code (tar.gz)](https://github.com/binjospookie/--shots/archive/v1.0.0.tar.gz) ## v0.1.3 * [shots-0.1.3-amd64.deb](https://github.com/binjospookie/--shots/releases/download/v0.1.3/shots_0.1.3_amd64.deb)
* [shots-0.1.3-x86_64.AppImage](https://github.com/binjospookie/--shots/releases/download/v0.1.3/shots-0.1.3-x86_64.AppImage) ## v0.1.2 * [shots-0.1.2-amd64.deb](https://github.com/binjospookie/--shots/releases/download/v0.1.2/shots-0.1.2-amd64.deb)
* [shots-0.1.2-x86_64.AppImage](https://github.com/binjospookie/--shots/releases/download/v0.1.2/shots-0.1.2-x86_64.AppImage)
* [shots-0.1.2.dmg.zip](https://github.com/binjospookie/--shots/releases/download/v0.1.2/shots-0.1.2-mac.zip)
* [shots-0.1.2.rpm](https://github.com/binjospookie/--shots/releases/download/v0.1.2/shots-0.1.2.rpm)
* [shots.Setup.0.1.2.exe](https://github.com/binjospookie/--shots/releases/download/v0.1.2/shots.Setup.0.1.2.exe)
* [Source code (zip)](https://github.com/binjospookie/--shots/archive/v0.1.2.zip)
* [Source code (tar.gz)](https://github.com/binjospookie/--shots/archive/v0.1.2.tar.gz) ## v0.1.1 * [shots-0.1.1-amd64.deb](https://github.com/binjospookie/--shots/releases/download/v0.1.1/shots-0.1.1-amd64.deb)
* [shots-0.1.1-x86_64.AppImage](https://github.com/binjospookie/--shots/releases/download/v0.1.1/shots-0.1.1-x86_64.AppImage)
* [shots-0.1.1.dmg](https://github.com/binjospookie/--shots/releases/download/v0.1.1/shots-0.1.1.dmg)
* [shots-0.1.1.dmg.zip](https://github.com/binjospookie/--shots/releases/download/v0.1.1/shots-0.1.1.dmg.zip)
* [shots-0.1.1.rpm](https://github.com/binjospookie/--shots/releases/download/v0.1.1/shots-0.1.1.rpm)
* [shots.Setup.0.1.1.exe](https://github.com/binjospookie/--shots/releases/download/v0.1.1/shots.Setup.0.1.1.exe)
* [shots.Setup.0.1.1.exe.zip](https://github.com/binjospookie/--shots/releases/download/v0.1.1/shots.Setup.0.1.1.exe.zip)
* [Source code (zip)](https://github.com/binjospookie/--shots/archive/v0.1.1.zip)
* [Source code (tar.gz)](https://github.com/binjospookie/--shots/archive/v0.1.1.tar.gz) ================================================ FILE: functions.php ================================================ --shots
================================================ FILE: index.mac.html ================================================ --shots
================================================ FILE: main.js ================================================ /* eslint-disable */ const fs = require('fs'); const electron = require('electron'); const app = electron.app; const globalShortcut = electron.globalShortcut; const BrowserWindow = electron.BrowserWindow; const { ipcMain } = require('electron'); const ipc = require('electron').ipcMain; ipc.on('errorInWindow', function(event, error, url, line){ console.log(url, line, error); }); const dialog = require('electron').dialog; const { Menu } = require('electron'); const appMenu = require('./scripts/appMenu'); const { clipboard, Tray } = require('electron'); let tray = null; let globalShot; /** * Окно приложения */ let appWindow; const argv = require('minimist')(process.argv); let gettedDbToken; let gettedIMToken; /** * Опции диалога о новом скриншоте * @type {{type: string, title: string, message: string, buttons: string[]}} */ const newShotDialog = { type: 'info', title: 'Create new shot', message: 'All your progress will be lost. Are you sure?', buttons: ['Yes', 'No'] }; const signInDialog = { type: 'info', title: 'Sign out', message: `You're authorized user. Would you want to sign out?`, buttons: ['Yes', 'No'] }; let appFirstStart = true; const shouldQuit = app.makeSingleInstance(function(commandLine, workingDirectory) { // apply params from console if (commandLine[1]) { parseAndDo(commandLine[1]); return true; } // Someone tried to run a second instance, we should focus our window if (appWindow) { if (appWindow.isMinimized()) appWindow.restore(); appWindow.focus(); } return true; }); if (shouldQuit) { app.quit(); return; } /** * Создаём окно, когда приложение инициализировано * И регистрируем необходимые клаиши для обработки истории */ app.on('ready', () => { tray = new Tray(__dirname + '/icon.png'); createWindow(); rigesterGlobalHotkey(); const template = appMenu(app, appWindow, getDropboxToken, getImgurToken); const menu = Menu.buildFromTemplate(template); /** * Содаём меню приложения */ Menu.setApplicationMenu(menu); app.firstStartTray = true; appWindow.hide(); tray.setToolTip('--shots'); }); app.on('will-quit', () => { globalShortcut.unregisterAll(); }); /** * Уничтожаем процесс, когда все окна закрыты */ app.on('window-all-closed', function() { if (process.platform !== 'darwin') { app.quit(); } }); /** * Принимаем сообщения из рендера и отвечаем на них */ ipcMain.on('synchronous-message', (event, arg, data) => { if (arg === 'hide') { event.returnValue = 'ok'; appWindow.hide(); } else if (arg === 'crop') { event.returnValue = 'ok'; } else if (arg === 'rect') { event.returnValue = 'ok'; } else if (arg === 'pen') { event.returnValue = 'ok'; } else if (arg === 'arrow') { event.returnValue = 'ok'; } else if (arg === 'optimize') { let oImg = optimizeShots(data); event.returnValue = 'data'; } else if (arg === 'version') { event.returnValue = app.getVersion(); } else if (arg === 'dropbox-token') { validateDropboxToken(data); event.returnValue = 'ty'; } else if (arg === 'imgur-token') { validateImgurToken(data); event.returnValue = 'ty'; } else if (arg === 'createNew') { if (data === 'ask') { dialog.showMessageBox(newShotDialog, function(index) { // если пользователь подтвердил выбор — далем новый скриншот if (index === 0) { appWindow.webContents.send('new'); } event.returnValue = 'not-ok'; }) } else { appWindow.webContents.send('new'); event.returnValue = 'ok'; } // event.returnValue = app.getVersion(); } else{ appWindow.show(); appWindow.setPosition(0,0); const {width, height} = electron.screen.getPrimaryDisplay().workAreaSize; appWindow.setSize(width, height); } }); /** * Выводим диалог перед новым скриншотом */ ipc.on('open-information-dialog', function() { dialog.showMessageBox(newShotDialog, function(index) { // если пользователь подтвердил выбор — далем новый скриншот if (index === 0) { appWindow.webContents.send( 'new' ); } }) }); /** * Выводим диалог перед деавторизацией */ ipc.on('open-signin-dialog', function() { dialog.showMessageBox(signInDialog, function(index) { // если пользователь подтвердил выбор — далем новый скриншот if (index === 0) { appWindow.webContents.send( 'signout' ); } }) }); ipc.on('open-save-dialog', function(event, data, path) { let saveDialogOption = { filters: [{name: 'Images', extensions: ['png']}] } if (path !== null) { saveDialogOption.defaultPath = path; } dialog.showSaveDialog(saveDialogOption, function(path) { if (path !== undefined) { fs.writeFile(path, data); appWindow.webContents.send( 'successSave', path ); } else { appWindow.webContents.send( 'canceledSave'); } }); }); /** * Метод создания окна приложения */ function createWindow() { appWindow = new BrowserWindow({ width: 0, height: 0, icon: __dirname + '/icon.png' }); if (process.platform === 'darwin') { appWindow.loadURL(`file://${__dirname}/index.mac.html`); } else { appWindow.loadURL(`file://${__dirname}/index.html`); } if (argv.debug) { appWindow.webContents.openDevTools(); } appWindow.on('closed', function() { appWindow = null; }); let contextMenu = createContextMenu(true, false, false); tray.setContextMenu(contextMenu); app.firstStartTray = false; appWindow.on('minimize', function() { contextMenu = createContextMenu(false, true, false); tray.setContextMenu(contextMenu); }); appWindow.on('hide', function() { if (app.firstStartTray === true) { contextMenu = createContextMenu(true, false, false); tray.setContextMenu(contextMenu); app.firstStartTray = false; } else { contextMenu = createContextMenu(true, true, false); tray.setContextMenu(contextMenu); } }); appWindow.on('show', function() { contextMenu = createContextMenu(true, false, true); tray.setContextMenu(contextMenu); if(app.createShot === true) { appWindow.webContents.send( 'new' ); app.createShot = false; } }); appWindow.setAutoHideMenuBar(false); let processStartFlags = Object.keys(argv)[1]; if ((processStartFlags) && (processStartFlags !== 'debug')) { parseAndDo(`-${processStartFlags}`); if (['h','help','a','about','v','version'].indexOf(processStartFlags) !== -1) { app.exit(0); } } } function createContextMenu(newShot, open, tray) { return ( Menu.buildFromTemplate([{ label: 'New', enabled: newShot, click() { if (appFirstStart) { app.createShot = true; appWindow.webContents.send('new'); appWindow.setPosition(0,0); appWindow.show(); appFirstStart = false; return; } app.createShot = true; appWindow.webContents.send('saveState'); } }, { label: 'Open', enabled: open, click() { appWindow.show(); appWindow.setPosition(0,0); } }, { label: 'Minimize to tray', enabled: tray, click() { appWindow.hide(); } }, { label: 'Disable shortcuts', type: 'checkbox', click(element) { if (element.checked === true) { globalShortcut.unregisterAll(); } else { rigesterGlobalHotkey(); } } }, { label: 'Quit', click() { globalShortcut.unregisterAll(); app.quit() } }]) ); } function parseAndDo(flagName) { switch (flagName) { case '--help': case '-help': case '-h': console.log( `Usage: shots [option] Options: -v, --version | print --shots version -h, --help | show all commands -a, --about | about --shots -n, --new | create screenshot -c, --capture | capture screenshot and call crop tool -f, --fast | capture screenshot and save -s, --save | save current screenshot Example: shots -v --> shots ${app.getVersion()} `); break; case '--version': case '-version': case '-v': console.log(`--shots ${app.getVersion()}`); break; case '--about': case '-about': case '-a': console.log('--shots is an application for creating screenshots.\n' + 'It was created on web-technologies.\nhttps://github.com/binjospookie/--shots'); break; case '--capture': case '-capture': case '-c': dialog.showMessageBox(newShotDialog, function(index) { // если пользователь подтвердил выбор — далем новый скриншот if (index === 0) { app.createShot = true; appWindow.webContents.send('new', 'capture'); appWindow.setPosition(0,0); appWindow.show(); appFirstStart = false; } }) break; case '--fast': case '-fast': case '-f': dialog.showMessageBox(newShotDialog, function(index) { // если пользователь подтвердил выбор — далем новый скриншот if (index === 0) { app.createShot = true; appWindow.webContents.send('new', 'fast'); appWindow.setPosition(0,0); appWindow.show(); appFirstStart = false; } }) break; case '--new': case '-new': case '-n': app.createShot = true; appWindow.webContents.send('saveState'); break; case '--save': case '-save': case '-s': if (appFirstStart === true) { console.log(`Screenshot wasn't create. Try 'shots --new'`); app.exit(0); break; } appWindow.webContents.send( 'save' ); break; default: console.log('Unknown option. Try "shots --help"'); break; } } function optimizeShots(data) { // console.log('ready') } function rigesterGlobalHotkey() { globalShot = globalShortcut.register('CommandOrControl+Alt+M', () => { if (appFirstStart) { app.createShot = true; appWindow.webContents.send('new'); appWindow.setPosition(0,0); appWindow.show(); appWindow.focus(); appFirstStart = false; return; } app.createShot = true; appWindow.webContents.send('saveState'); }) } // dropbox get token function getDropboxToken() { appWindow.webContents.send('isDropbox'); } function getImgurToken() { appWindow.webContents.send('isImgur'); } function validateImgurToken(data) { let imWindow = new BrowserWindow({ width: 680, height: 680, icon: __dirname + '/icon.png' }); imWindow.loadURL('https://api.imgur.com/oauth2/authorize?client_id=&response_type=token'); imWindow.on('focus', function(){ Menu.setApplicationMenu(null); }) imWindow.on('blur', function(){ Menu.setApplicationMenu(Menu.buildFromTemplate(appMenu(app, appWindow, getDropboxToken, getImgurToken))); }) imWindow.on('close', function(event) { imHistory = imWindow.webContents.history; console.log(imHistory) gettedIMToken = imHistory[imHistory.length - 1]; if (!gettedIMToken.includes('access_token=')) { return; } appWindow.webContents.send('freshImgurToken', gettedIMToken); }); imWindow.on('closed', ()=>{ Menu.setApplicationMenu(Menu.buildFromTemplate(appMenu(app, appWindow, getDropboxToken, getImgurToken))); dbWindow = null; }); } function validateDropboxToken(data) { // need auth let dbWindow = new BrowserWindow({ width: 680, height: 680, icon: __dirname + '/icon.png' }); dbWindow.loadURL('https://www.dropbox.com/oauth2/authorize?response_type=token&client_id=TOKEN&redirect_uri=https://theshots.ru/dropbox.html') dbWindow.on('focus', function(){ Menu.setApplicationMenu(null); }) dbWindow.on('blur', function(){ Menu.setApplicationMenu(Menu.buildFromTemplate(appMenu(app, appWindow, getDropboxToken, getImgurToken))); }) dbWindow.on('close', function(event) { dbHistory = dbWindow.webContents.history; gettedDbToken = dbHistory[dbHistory.length - 1]; if (!gettedDbToken.includes('access_token=')) { return; } appWindow.webContents.send('freshDropboxToken', gettedDbToken); }); dbWindow.on('closed', ()=>{ Menu.setApplicationMenu(Menu.buildFromTemplate(appMenu(app, appWindow, getDropboxToken, getImgurToken))); dbWindow = null; }); } ================================================ FILE: package.json ================================================ { "name": "shots", "version": "1.1.0", "description": "An application for creating screenshots", "main": "main.js", "license": "NPOSL-3.0", "author": "Victor Pasynok ", "email": "binjospookie@gmail.com", "scripts": { "start": "electron .", "dev": "electron . --debug", "compile": "rimraf build/out", "pack": "npm run compile && build --dir", "dist": "npm run compile && build", "release": "npm run compile && build" }, "build": { "appId": "org.binjo.shots", "category": "graphics", "build.mac.category": "shots.graphics", "maintainer": "Victor Pasynok", "copyright": "Copyright © 2017 Viktor Pasynok", "linux": { "target": [ "AppImage", "deb" ], "category": "Graphics", "packageCategory": "graphics", "synopsis": "Simple, minimal, and task-focused application for creating screenshots." } }, "bugs": { "url": "https://github.com/binjospookie/--shots/issues" }, "homepage": "http://shots.binjo.ru/", "devDependencies": { "electron": "^1.6.0", "electron-builder": "^13.0.0", "gulp-postcss": "^6.3.0", "is-online": "^6.0.1", "postcss": "^5.2.5", "postcss-scss": "^0.4.0", "rimraf": "^2.5.4" }, "dependencies": { "gulp": "^3.9.1", "is-online": "^6.0.1", "minimist": "^1.2.0", "precss": "^1.4.0", "stylelint": "^7.5.0" } } ================================================ FILE: posts.md ================================================ # Posts about --shots * https://mavielinux.com/2016/11/28/shots-pour-prendre-et-editer-vos-captures-decran/ * http://blog.desdelinux.net/shots-capturar-pantalla/# * http://www.fousoft.com/shots.html * http://www.softpedia.com/get/Multimedia/Graphic/Graphic-Capture/--shots.shtml (duplicate of ^) * https://habrahabr.ru/post/316880/ * http://www.omgubuntu.co.uk/2017/02/shots-annotate-screenshots-ubuntu-app * http://126kr.com/article/3y9sb54m6p1 (duplicate of ^) * http://www.lffl.org/2017/02/shots-prendere-annotare-screenshot.html * http://alternativeto.net/software/shots/ * http://www.stahuj.centrum.cz/grafika_a_design/zachycovani_obrazovky/-shots/?&g%5Boz%5D=0.1.1 * http://linux-actif.fr/shots * http://andro-buntu.blogspot.ru/2017/02/shots-aplikasi-screenshot-berbasis.html * http://linoxide.com/linux-how-to/screenshots-elementary-loki-ubuntu/ ================================================ FILE: rpm/shots-1.2.0-2.x86_64.rpm ================================================ [File too large to display: 51.8 MB] ================================================ FILE: savephoto.default ================================================ query( 'INSERT INTO `shots`(`name`, `token`) VALUES ("'.$filename.'","'.$token.'")' ); } echo json_encode($path); ================================================ FILE: savephoto.php ================================================ { button.addEventListener('click', closeModalButtonClickHandler.bind(this, body, modalWindow), false); } ); }; ================================================ FILE: scripts/functions/addScreenshot.js ================================================ const electron = require('electron'); const desktopCapturer = electron.desktopCapturer; const fs = require('fs'); const os = require('os'); const path = require('path'); const { ipcRenderer } = require('electron'); let screenshotPath = ''; /** * Создание скриншота, добавление на канвас и изменение размеров окна * * @param options * @param thumbSize * @param image * @param ctx * @param stage * @param bitmap */ module.exports = function addScreenshot(options, thumbSize, image, ctx, stage, bitmap, body, modalOnStart, modalWindow, argument, callSave) { const commonSettings = JSON.parse(localStorage.getItem('commonSettings')); const time = new Date().getTime() / 1000; const cursourPos = electron.screen.getCursorScreenPoint(); desktopCapturer.getSources(options, (error, sources) => { sources.forEach((source) => { if (source.name === 'Entire screen' || source.name === 'Screen 1') { screenshotPath = path.join(os.tmpdir(), `${time}.png`); fs.writeFile(screenshotPath, source.thumbnail.toPng(), () => { image.src = screenshotPath; image.onload = () => { ctx.canvas.width = image.width; ctx.canvas.height = image.height; stage.removeAllChildren(); stage.update(); bitmap = new createjs.Bitmap(image); if (commonSettings&&commonSettings.capture) { const cimage = new Image(); cimage.src = './images/cursor.png' cimage.onload = () => { addCursor(cimage, stage, cursourPos); } } stage.addChild(bitmap); stage.update(); ipcRenderer.send('synchronous-message', thumbSize); fs.unlinkSync(screenshotPath); image = null; screenshotPath = ''; stage.update(); body.classList.remove('centered'); modalOnStart(body, modalWindow); if(argument === 'fast') { callSave(); } }; }); } }); }); }; function addCursor(image, stage, cursourPos) { const cursor = new createjs.Bitmap(image); cursor.name = 'cursor'; cursor.x = cursourPos.x; cursor.y = cursourPos.y; stage.addChild(cursor); stage.update(); } ================================================ FILE: scripts/functions/arrowListeners.js ================================================ module.exports = function arrowListeners(stageMouseDownHandlerArrow, stageMouseUpShapes, stage) { stage.on('stagemousedown', stageMouseDownHandlerArrow); stage.on('stagemouseup', stageMouseUpShapes); }; ================================================ FILE: scripts/functions/calcAngle.js ================================================ /** * Градусов в радиане * @type {number} * @const */ var DEGREES_IN_RADIAN = 180 / Math.PI; /** * Посчитать угол линии между двумя точками * @param {number} x1 * @param {number} y1 * @param {number} x2 * @param {number} y2 * @returns {number} */ module.exports = function calcAngle( x1, y1, x2, y2) { return Math.atan2( ( y2 - y1 ), ( x2 - x1 ) ) * DEGREES_IN_RADIAN; } ================================================ FILE: scripts/functions/calcDistance.js ================================================ module.exports = function calcDistance(x1, y1, x2, y2) { return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)); }; ================================================ FILE: scripts/functions/closeModal.js ================================================ module.exports = function closeModalButtonClickHandler(body, modalWindow) { modalWindow.classList.remove('open'); body.classList.remove('modal'); }; ================================================ FILE: scripts/functions/commonSettingsInputChangeHandler.js ================================================ module.exports = function commonSettingsInputChangeHandler(event) { const target = event.target; const commonSettings = JSON.parse(localStorage.getItem('commonSettings')); if (target.type === 'checkbox') { commonSettings[target.name] = target.checked; } else { commonSettings[target.name] = target.value; } localStorage.setItem('commonSettings', JSON.stringify(commonSettings)); } ================================================ FILE: scripts/functions/createDeleteButton.js ================================================ module.exports = function createDeleteButton() { const container = new createjs.Container(); container.name = 'close'; const close = new createjs.Shape(); close.graphics.beginFill('#37aee2').drawCircle(10, 10, 10).endFill() .beginStroke('#ffffff') .setStrokeStyle(2, 'round') .moveTo(7, 7) .lineTo(13, 13) .moveTo(13, 7) .lineTo(7, 13); close.shadow = new createjs.Shadow('rgba(0,0,0,0.19)', 0, 10, 20); container.addChild(close); return container; }; ================================================ FILE: scripts/functions/createEditButton.js ================================================ module.exports = function createEditButton(bitmap) { const container = new createjs.Container(); container.name = 'edit'; const edit = new createjs.Shape(); const icon = new createjs.Bitmap(bitmap); edit.graphics.beginFill('#37aee2').drawCircle(10, 10, 10).endFill(); edit.shadow = new createjs.Shadow('rgba(0,0,0,0.19)', 0, 10, 20); icon.x = 3; icon.y = 3; container.addChild(edit); container.addChild(icon); return container; }; ================================================ FILE: scripts/functions/createTransformButton.js ================================================ module.exports = function createTransformButton() { const container = new createjs.Container(); container.name = 'transform'; const transform = new createjs.Shape(); transform.graphics.beginFill('#37aee2').drawCircle(-10, -10, 10).endFill() .beginStroke('#ffffff') .setStrokeStyle(2, 'round') .moveTo(-14, -10) .lineTo(-14, -14) .lineTo(-10, -14) .moveTo(-6, -10) .lineTo(-6, -6) .lineTo(-10, -6) .endFill(); transform.shadow = new createjs.Shadow('rgba(0,0,0,0.19)', 0, 10, 20); container.addChild(transform); return container; }; ================================================ FILE: scripts/functions/cropListeners.js ================================================ module.exports = function cropListeners(stageMouseDownHandlerCrop, stageMouseUpHandlerCrop, stageMouseMoveHandlerCrop, stage, body) { body.classList.add('crop'); stage.on('stagemousedown', stageMouseDownHandlerCrop); stage.on('stagemouseup', stageMouseUpHandlerCrop); stage.on('stagemousemove', stageMouseMoveHandlerCrop); }; ================================================ FILE: scripts/functions/decodeBase64Image.js ================================================ module.exports = function decodeBase64Image(dataString) { const matches = dataString.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/); const response = {}; if (matches.length !== 3) { return new Error('Invalid input string'); } response.type = matches[1]; response.data = new Buffer(matches[2], 'base64'); return response; }; ================================================ FILE: scripts/functions/determineScreenShotSize.js ================================================ const electron = require('electron'); const electronScreen = electron.screen; /** * Получение размеров окна для скриншота и размеров окна приложения * @returns {{width: number, height: number}} */ module.exports = function determineScreenShotSize() { let i; const displaysArray = electronScreen.getAllDisplays(); let width = 0; let height = 0; for (i = 0; i < displaysArray.length; i++) { if (displaysArray[i].workArea.height > height) { height = displaysArray[i].workArea.height; } width += displaysArray[i].workArea.width; } return { width: width, height: height, }; }; ================================================ FILE: scripts/functions/fieldsetsListener.js ================================================ module.exports = function fieldsetsListener(event) { const target = event.target; const optionObj = {}; const existSettings = []; if (target.checked === true) { localStorage.removeItem('settings'); optionObj[target.value] = true; existSettings.push(optionObj); } if (existSettings.length === 0) { localStorage.removeItem('settings'); } else { localStorage.setItem('settings', JSON.stringify(existSettings)); } }; ================================================ FILE: scripts/functions/getCookieByName.js ================================================ module.exports = function getCookie(name) { var matches = document.cookie.match(new RegExp( "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)" )); return matches ? decodeURIComponent(matches[1]) : undefined; } ================================================ FILE: scripts/functions/getDegree.js ================================================ const DEGREES_IN_RADIAN = 180 / Math.PI; module.exports = function getDegree(x1, y1, x2, y2) { return Math.atan2((y2 - y1), (x2 - x1)) * DEGREES_IN_RADIAN; }; ================================================ FILE: scripts/functions/getSettings.js ================================================ module.exports = function getSettings() { const obj = JSON.parse(localStorage.getItem('settings')); return (obj === null) ? 'empty' : (Object.keys(obj[0])[0]); }; ================================================ FILE: scripts/functions/hideControls.js ================================================ module.exports = function hideControls(container, stage) { let i; let n; if (container) { for (i = 0, n = container.children.length; i < n; i++) { if (container.children[i].name === 'close' || container.children[i].name === 'transform' || container.children[i].name === 'outline' || container.children[i].name === 'edit') { container.children[i].visible = false; } } } stage.update(); }; ================================================ FILE: scripts/functions/hideLoader.js ================================================ module.exports = function hideLoader(difference, text, loaderText) { let callAfter; if (difference >= 2000) { loaderText.textContent = text; setTimeout(() => { loader.classList.remove('show'); }, 1500) } else { loaderText.textContent = text; callAfter = 2000 - difference; setTimeout(() => { loader.classList.remove('show'); }, callAfter) } }; ================================================ FILE: scripts/functions/initCommonSettings.js ================================================ const commonSettingsInputChangeHandler = require('./commonSettingsInputChangeHandler'); module.exports = function initCommonSettings(settings) { let commonSettings = JSON.parse(localStorage.getItem('commonSettings')); const inputs = settings.querySelectorAll('input[data-type="common"]'); // migrate to 1.1.0 if (Array.isArray(commonSettings)) { commonSettings = {}; localStorage.setItem('commonSettings', JSON.stringify({})); } Array.prototype.forEach.call( inputs, (input) => { if (commonSettings) { if (input.type === 'checkbox') { input.checked = commonSettings[input.name]?commonSettings[input.name]:input.checked; } else { input.value = commonSettings[input.name]?commonSettings[input.name]:input.value; } } input.addEventListener('change', commonSettingsInputChangeHandler); } ); if (!commonSettings) { localStorage.setItem('commonSettings', '{}'); } }; ================================================ FILE: scripts/functions/initSettings.js ================================================ const setFieldsetStatus = require('./setFieldsetStatus'); const fieldsetsListener = require('./fieldsetsListener'); module.exports = function initSettings(settings) { const customCheckbox = settings.querySelector('#applyCustom'); const fieldsets = settings.querySelectorAll('fieldset'); const inputs = settings.querySelectorAll('fieldset > ul > li > input'); const storage = localStorage.getItem('settings'); let settingsValue; let settingName = ''; if (storage === null) { setFieldsetStatus(fieldsets, true); } else { settingsValue = JSON.parse(storage); settingName = Object.keys(settingsValue[0])[0]; settingName = settingName.replace(/\s/g, ''); settings.querySelector(`#${settingName}`).checked = true; customCheckbox.checked = true; } Array.prototype.forEach.call( inputs, (input) => { input.addEventListener('change', fieldsetsListener, false); } ); }; ================================================ FILE: scripts/functions/modalOnStart.js ================================================ module.exports = function modalOnStart(body, modalWindow) { if (localStorage.getItem('modal') === null) { setTimeout(() => { modalWindow.classList.toggle('open'); body.classList.toggle('modal'); localStorage.setItem('modal', 'was opened'); }, 200); } }; ================================================ FILE: scripts/functions/penListeners.js ================================================ module.exports = function penListeners(stageMouseDownHandlerPen, stageMouseUpShapes, stage) { stage.on('stagemousedown', stageMouseDownHandlerPen); stage.on('stagemouseup', stageMouseUpShapes); }; ================================================ FILE: scripts/functions/popUp.js ================================================ module.exports = function popUp(popupWindow, paragraph, text, removeClass) { paragraph.textContent = text; popupWindow.classList.add('show-hide'); if (removeClass !== true) { setTimeout( () => { popupWindow.classList.remove('show-hide'); }, 2300 ); } }; ================================================ FILE: scripts/functions/preventDND.js ================================================ module.exports = function preventDND(window) { window.addEventListener("dragover",function(e){ e = e || event; e.preventDefault(); },false); window.addEventListener("drop",function(e){ e = e || event; e.preventDefault(); },false); }; ================================================ FILE: scripts/functions/rectListeners.js ================================================ module.exports = function rectListeners(stageMouseDownHandlerRect, stageMouseUpShapes, stage) { stage.on('stagemousedown', stageMouseDownHandlerRect); stage.on('stagemouseup', stageMouseUpShapes); }; ================================================ FILE: scripts/functions/sendToServer.js ================================================ const { clipboard } = require('electron'); const popUp = require('./popUp'); const popupWindow = document.querySelector('aside#messageToUser'); const popupText = popupWindow.querySelector('p'); const xhr = new XMLHttpRequest(); module.exports = function sendToServer(code, old, loader, loaderText, path) { let arg = false; if (typeof arguments[4] == 'function') arg = arguments[4] const data = new FormData(); let now; let difference; let callAfter; const storage = localStorage.getItem('serverpath'); const token = (localStorage.getItem('token') !== null) ? JSON.parse(localStorage.getItem('token')).token : ''; const pathToServer = (storage === null || storage === '') ? 'https://theshots.ru/savephoto.php' : JSON.parse(storage); let newText = (path === undefined) ? 'Send and copied to buffer' : `Send, saved at '${path}' and copied to buffer`; if (typeof path == 'function') { newText = `Posted on ${arguments[5]}`; } data.append('shot', code); data.append('token', token); xhr.open('POST', pathToServer); xhr.send(data); xhr.onload = () => { let data; now = new Date(); difference = Math.abs(now - old); if (difference >= 2000) { loaderText.textContent = newText; setTimeout(() => { loader.classList.remove('show'); }, 1500) } else { loaderText.textContent = newText; callAfter = 2000 - difference; setTimeout(() => { loader.classList.remove('show'); }, callAfter) } switch (xhr.status) { case 500: popUp(popupWindow, popupText, 'Server error 😱'); break; case 400: popUp(popupWindow, popupText, 'An impossible request 😱'); break; case 401: popUp(popupWindow, popupText, 'Auth error 😱'); break; case 200: if (xhr) { data = JSON.parse(xhr.responseText); clipboard.writeText(data); //sharing if(arg) { arg(); } } break; default: popUp(popupWindow, popupText, 'Unknown error 😱'); break; } }; window.addEventListener('keydown', event => { if (event.which === 27) { if (loader.classList.contains('show')) { xhr.abort(); hideLoader(3000, 'Abort', loaderText); } } }); }; ================================================ FILE: scripts/functions/sendToSocialNetwork.js ================================================ const { shell, clipboard } = require('electron') module.exports = function sendToSocialNetwork(type) { switch (type) { case 'facebook': shell.openExternal('http://www.facebook.com/sharer.php?u=' + clipboard.readText()) break; case 'twitter': shell.openExternal('https://twitter.com/share?url=' + clipboard.readText() + ';text=Create screenshot with --shots;hashtags=shots,opensource,awesome') break; case 'vkontakte': shell.openExternal('http://vkontakte.ru/share.php?url=' + clipboard.readText()) break; default: break; } } ================================================ FILE: scripts/functions/serverButtonClickHandler.js ================================================ module.exports = function serverButtonClickHandler(event) { const button = event.target; const buttonTextContent = button.textContent; const storage = localStorage.getItem('serverpath'); const storageValue = (storage === null || storage === ' ') ? '' : JSON.parse(storage); const input = document.getElementById('serverinput'); input.classList.toggle('visible'); if (buttonTextContent === 'Save') { button.textContent = 'Change server path'; localStorage.removeItem('serverpath'); // а если нет, то сам виноват if (/^\s+$/.test(input.value) !== true && input.value !== '') { localStorage.setItem('serverpath', JSON.stringify(input.value)); } } else { button.textContent = 'Save'; if (storageValue !== '') { input.value = storageValue; } } }; ================================================ FILE: scripts/functions/serverMessage.js ================================================ const popUp = require('./popUp'); const popupWindow = document.querySelector('aside#messageToUser'); const popupText = popupWindow.querySelector('p'); module.exports = function serverMessage(version) { const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://theshots.ru/serverMessage.php'); xhr.send(); xhr.onload = () => { switch (xhr.status) { case 500: popUp(popupWindow, popupText, 'Server error 😱'); break; case 400: popUp(popupWindow, popupText, 'An impossible request 😱'); break; case 401: popUp(popupWindow, popupText, 'Auth error 😱'); break; case 200: if (xhr) { if (xhr.responseText !== '' && xhr.responseText !== 'This is deprecated version. Please update the app to version 1.0.4.') { popUp(popupWindow, popupText, xhr.responseText, true); } } break; default: popUp(popupWindow, popupText, 'Unknown error 😱'); break; } }; }; ================================================ FILE: scripts/functions/setDefaultFrame.js ================================================ module.exports = function setDefaultFrame(frame) { frame.classList.remove('show'); frame.style.width = 0; frame.style.height = 0; frame.style.top = 0; frame.style.left = 0; }; ================================================ FILE: scripts/functions/setDefaultScene.js ================================================ module.exports = function setDefaultScene(stage, stageMouseDownHandler, body) { stage.removeAllEventListeners(); stage.addEventListener('mousedown', stageMouseDownHandler); body.classList.remove('crop'); body.classList.remove('move'); }; ================================================ FILE: scripts/functions/setFieldsetStatus.js ================================================ module.exports = function setFieldsetStatus(fieldsets, status) { const state = status; let existSettings = []; let optionObj = {}; let inputs; if (status === true) { localStorage.removeItem('settings'); } else { Array.prototype.forEach.call( fieldsets, (fieldset) => { inputs = fieldset.querySelectorAll('input'); Array.prototype.forEach.call( inputs, (input) => { if (input.checked === true) { optionObj[input.value] = true; existSettings.push(optionObj); localStorage.setItem('settings', JSON.stringify(existSettings)); } } ); } ); } Array.prototype.forEach.call( fieldsets, (fieldset) => { if(!fieldset.classList.contains('not-blocked')) { fieldset.disabled = state; } } ); }; ================================================ FILE: scripts/functions/setTransformRectDistance.js ================================================ /** * Обработчик трансформации рамки */ const calcDistance = require('./calcDistance'); module.exports = function setTransformRectDistance(x, y, croppingHistory, historyIndex, activeShape, mouseDownX, mouseDownY) { let distance1; let distance2; if (croppingHistory[historyIndex] !== undefined && historyIndex !== 0) { distance1 = calcDistance( activeShape.x + croppingHistory[historyIndex].stageX, activeShape.y + croppingHistory[historyIndex].stageY, mouseDownX, mouseDownY ); distance2 = calcDistance( activeShape.x + croppingHistory[historyIndex].stageX, activeShape.y + croppingHistory[historyIndex].stageY, x, y ); } else { distance1 = calcDistance( activeShape.x, activeShape.y, mouseDownX, mouseDownY ); distance2 = calcDistance( activeShape.x, activeShape.y, x, y ); } return { distance1: distance1, distance2: distance2, }; }; ================================================ FILE: scripts/functions/showControls.js ================================================ module.exports = function showControls(container, stage) { let i; let n; for (i = 0, n = container.children.length; i < n; i++) { if (container.children[i].name === 'close' || container.children[i].name === 'transform' || container.children[i].name === 'outline' || container.children[i].name === 'edit') { container.children[i].visible = true; } } stage.update(); }; ================================================ FILE: scripts/functions/signinFormSubmitHandler.js ================================================ module.exports = function signinFormSubmitHandler(event) { event.preventDefault(); const form = event.target; let login = form.elements['login'].value; let password = form.elements['password'].value; sendRequest({ login: login, password: password, }, event.target); } function sendRequest(data) { const xhr = new XMLHttpRequest(); const formData = new FormData(); xhr.onload = (event) => { switch (xhr.status) { case 500: alert('Server error 😱'); break; case 400: alert('An impossible request 😱'); break; case 401: alert('Incorrect pair 😱') break; case 200: if (xhr) { data = JSON.parse(xhr.responseText); if (xhr.responseText === false) { alert('Incorrect pair 😱'); } else { alert('You have been authorized 🐮'); localStorage.setItem('token', xhr.responseText); document.body.classList.remove('modal'); document.querySelector('aside.sign-in').classList.remove('open'); } } break; default: alert('Unknown error 😱'); break; } }; xhr.open('post', 'https://theshots.ru/admin/auth.php', true); formData.append('data', JSON.stringify(data)); xhr.send(formData); } ================================================ FILE: scripts/functions/textEventListeners.js ================================================ module.exports = function textEventListeners(textareaContent, textateaFontSize, textateaFontColor, textareaValueChangeHadler, textareaFontSizeChangeHadler, textareaFontColorChangeHadler, deleteTextButton, deleteTextButtonClickHandler, applyTextButton, applyTextButtonClickHandler, closeTextFormButton, textSidebar) { textareaContent.addEventListener('keyup', textareaValueChangeHadler); textateaFontSize.addEventListener('keyup', textareaFontSizeChangeHadler); textateaFontSize.addEventListener('click', textareaFontSizeChangeHadler); textateaFontColor.addEventListener('change', textareaFontColorChangeHadler); deleteTextButton.addEventListener('click', deleteTextButtonClickHandler); applyTextButton.addEventListener('click', applyTextButtonClickHandler); closeTextFormButton.addEventListener('click', applyTextButtonClickHandler); textSidebar.addEventListener('submit', event => { event.preventDefault(); applyTextButtonClickHandler(); } ); }; ================================================ FILE: scripts/ipc/ipcAdd.js ================================================ const renderIpc = require('./ipcRendered'); module.exports = function ipcAdd( undoCrop, redoCrop, setDefaultSceneState, createScreenshot, callCrop, callRect, callPen, body, modalWindow, getDrawStatus, callZoomIn, callZoomOut, setDefaultZoom, callArrow, callSave, shortcutWindow, settingsWindow, signinWindow, createEmoji, APP_VERSION, textSidebar) { renderIpc.undo(undoCrop, body, textSidebar); renderIpc.redo(redoCrop, body, textSidebar); renderIpc.stop(body, modalWindow, setDefaultSceneState, shortcutWindow, settingsWindow, signinWindow); renderIpc.newShot(createScreenshot, body); renderIpc.crop(callCrop, body, textSidebar); renderIpc.rect(callRect, body, textSidebar); renderIpc.pen(callPen, body, textSidebar); renderIpc.signin(body, modalWindow, getDrawStatus, shortcutWindow, settingsWindow, signinWindow, textSidebar); renderIpc.help(body, modalWindow, getDrawStatus, shortcutWindow, settingsWindow, signinWindow); renderIpc.settings(body, modalWindow, getDrawStatus, shortcutWindow, settingsWindow, signinWindow, textSidebar); renderIpc.shortcut(body, shortcutWindow, getDrawStatus, modalWindow, settingsWindow, signinWindow); renderIpc.zoomIn(callZoomIn, body, textSidebar); renderIpc.zoomOut(callZoomOut, body, textSidebar); renderIpc.defaultZoom(setDefaultZoom, body, textSidebar); renderIpc.callArrow(callArrow, body, textSidebar); renderIpc.callSave(callSave, body, textSidebar); renderIpc.updates(body, APP_VERSION); renderIpc.signOut(body, signinWindow, textSidebar); renderIpc.emoji(createEmoji, textSidebar); renderIpc.text(body, textSidebar); }; ================================================ FILE: scripts/ipc/ipcRendered.js ================================================ /* eslint-disable */ const { ipcRenderer } = require('electron'); const ipc = require('electron').ipcRenderer; const popUp = require('../functions/popUp'); const popupWindow = document.querySelector('aside#messageToUser'); const popupText = popupWindow.querySelector('p'); const os = require('os'); function undo(undoCrop, body, textSidebar) { ipcRenderer.on('undo', () => { if (body.classList.contains('modal') || textSidebar.classList.contains('show')) { return; } undoCrop(); }); } function redo(redoCrop, body, textSidebar) { ipcRenderer.on('redo', () => { if (body.classList.contains('modal') || textSidebar.classList.contains('show')) { return; } redoCrop(); }); } function stop(body, modalWindow, setDefaultSceneState, shortcutWindow, settingsWindow, signinWindow) { ipcRenderer.on('stop', () => { setDefaultSceneState(); shortcutWindow.classList.remove('open'); modalWindow.classList.remove('open'); settingsWindow.classList.remove('open'); signinWindow.classList.remove('open'); body.classList.remove('modal'); body.classList.remove('text'); }); } function newShot(createScreenshot, body) { ipcRenderer.on('new', (event, flag) => { if (body.classList.contains('modal')) { return; } createScreenshot(flag); }); } function crop(callCrop, body, textSidebar) { ipcRenderer.on('crop', () => { if (body.classList.contains('modal') || textSidebar.classList.contains('show')) { return; } callCrop(); }); } function rect(callRect, body, textSidebar) { ipcRenderer.on('rect', (sender, param) => { if (body.classList.contains('modal') || textSidebar.classList.contains('show')) { return; } callRect(param); }); } function pen(callPen, body, textSidebar) { ipcRenderer.on('pen', () => { if (body.classList.contains('modal') || textSidebar.classList.contains('show')) { return; } callPen(); }); } function signin(body, shortcutWindow, getDrawStatus, modalWindow, settingsWindow, signinWindow, textSidebar) { ipcRenderer.on('signin', () => { if (document.activeElement.tagName === "INPUT" || textSidebar.classList.contains('show')) { return; } let areaZoom = body.style.transform; if (getDrawStatus() === false) { if (modalWindow.classList.contains('open') || settingsWindow.classList.contains('open') || shortcutWindow.classList.contains('open')) { modalWindow.classList.remove('open'); settingsWindow.classList.remove('open'); shortcutWindow.classList.remove('open'); } else { body.classList.toggle('modal'); } areaZoom = scaleToNumber(areaZoom); if (areaZoom !== 0) { signinWindow.style.transform = `scale(${1 / areaZoom})`; } signinWindow.classList.toggle('open'); } if (localStorage.getItem('token') !== null) { ipc.send('open-signin-dialog'); body.classList.remove('modal'); signinWindow.classList.remove('open'); return; } }); } function help(body, modalWindow, getDrawStatus, shortcutWindow, settingsWindow, signinWindow) { ipcRenderer.on('help', () => { let areaZoom = body.style.transform; if (getDrawStatus() === false) { if (shortcutWindow.classList.contains('open') || settingsWindow.classList.contains('open') || signinWindow.classList.contains('open')) { shortcutWindow.classList.remove('open'); settingsWindow.classList.remove('open'); signinWindow.classList.remove('open'); } else { body.classList.toggle('modal'); } areaZoom = scaleToNumber(areaZoom); if (areaZoom !== 0) { modalWindow.style.transform = `scale(${1 / areaZoom})`; } modalWindow.classList.toggle('open'); } }); } function shortcut(body, shortcutWindow, getDrawStatus, modalWindow, settingsWindow, signinWindow) { ipcRenderer.on('shortcut', () => { let areaZoom = body.style.transform; if (getDrawStatus() === false) { if (modalWindow.classList.contains('open') || settingsWindow.classList.contains('open') || signinWindow.classList.contains('open')) { modalWindow.classList.remove('open'); settingsWindow.classList.remove('open'); signinWindow.classList.remove('open'); } else { body.classList.toggle('modal'); } areaZoom = scaleToNumber(areaZoom); if (areaZoom !== 0) { shortcutWindow.style.transform = `scale(${1 / areaZoom})`; } shortcutWindow.classList.toggle('open'); } }); } function settings(body, shortcutWindow, getDrawStatus, modalWindow, settingsWindow, signinWindow, textSidebar) { ipcRenderer.on('settings', () => { if (document.activeElement.tagName === 'INPUT' || textSidebar.classList.contains('show')) { return; } let areaZoom = body.style.transform; if (getDrawStatus() === false) { if (modalWindow.classList.contains('open') || shortcutWindow.classList.contains('open') || signinWindow.classList.contains('open')) { modalWindow.classList.remove('open'); shortcutWindow.classList.remove('open'); signinWindow.classList.remove('open'); } else { body.classList.toggle('modal'); } areaZoom = scaleToNumber(areaZoom); if (areaZoom !== 0) { settingsWindow.style.transform = `scale(${1 / areaZoom})`; } settingsWindow.classList.toggle('open'); } }); } function scaleToNumber(areaZoom) { areaZoom = areaZoom.replace('scale(', ''); areaZoom = areaZoom.replace(')', ''); areaZoom = Number(areaZoom); return areaZoom; } function zoomIn(callZoomIn, body, textSidebar) { ipcRenderer.on('zoomIn', () => { if (body.classList.contains('modal') || textSidebar.classList.contains('show')) { return; } callZoomIn(); }); } function zoomOut(callZoomOut, body, textSidebar) { ipcRenderer.on('zoomOut', () => { if (body.classList.contains('modal') || textSidebar.classList.contains('show')) { return; } callZoomOut(); }); } function signOut(body, signinWindow, textSidebar) { ipcRenderer.on('signout', () => { if (textSidebar.classList.contains('show')) { return; } localStorage.removeItem('token'); body.classList.add('modal'); signinWindow.classList.add('open'); }); } function defaultZoom(setDefaultZoom, body, textSidebar) { ipcRenderer.on('defaultZoom', () => { if (body.classList.contains('modal') || textSidebar.classList.contains('show')) { return; } setDefaultZoom(); }); } function callArrow(callArrow, body, textSidebar) { ipcRenderer.on('arrow', () => { if (body.classList.contains('modal') || textSidebar.classList.contains('show')) { return; } callArrow(); }); } function callSave(callSave, body, textSidebar) { ipcRenderer.on('save', (event, flag) => { if (body.classList.contains('modal') || textSidebar.classList.contains('show')) { return; } callSave(flag); }); } function text(body, textSidebar) { ipcRenderer.on('text', (event) => { if (body.classList.contains('modal') || textSidebar.classList.contains('show')) { return; } body.classList.add('text'); }); } function emoji(createEmoji, textSidebar) { ipcRenderer.on('emoji', (event, type) => { if (textSidebar.classList.contains('show')) { return; } createEmoji(type); }); } function updates(body, version) { ipcRenderer.on('updates', () => { if (body.classList.contains('modal')) { return; } let xhr = new XMLHttpRequest(); xhr.open('GET', 'https://theshots.ru/checkUpdates.php'); xhr.send(); xhr.onload = () => { switch (xhr.status) { case 500: popUp(popupWindow, popupText, 'Server error 😱'); break; case 400: popUp(popupWindow, popupText, 'An impossible request 😱'); break; case 401: popUp(popupWindow, popupText, 'Auth error 😱'); break; case 200: if (xhr) { /** * Linux * Mac * Windows */ let arrayOfVersions = xhr.responseText.split('$'); let versionForShow; switch (os.type()) { case 'Linux': versionForShow = arrayOfVersions[0]; break; case 'Darwin': versionForShow = arrayOfVersions[1]; break; default: versionForShow = arrayOfVersions[2]; break; } popUp(popupWindow, popupText, `Actual version is "${versionForShow}". Your version is ${version}.`); } break; default: popUp(popupWindow, popupText, 'Unknown error 😱'); break; } }; }); } module.exports = { undo: undo, redo: redo, stop: stop, newShot: newShot, crop: crop, rect: rect, pen: pen, help: help, zoomIn: zoomIn, zoomOut: zoomOut, defaultZoom: defaultZoom, callArrow: callArrow, callSave: callSave, shortcut: shortcut, settings: settings, updates: updates, signin: signin, signOut: signOut, emoji: emoji, text: text }; ================================================ FILE: scripts/menu.js ================================================ /** * Функция создания меню */ const electron = require('electron'); const { remote } = require('electron'); const { Menu, MenuItem, } = remote; const menu = new Menu(); module.exports = function Menu(stage, stageMouseDownHandler, stageMouseUpHandler, stageMouseMoveHandler, openNewScreenshotDialog, callCrop, callRect, callPen, callArrow, callSave, sendToSocialNetwork, setDefaultSceneState, body) { menu.append(new MenuItem({ label: 'New shot', click() { openNewScreenshotDialog(); }, })); menu.append(new MenuItem({ type: 'separator', })); menu.append(new MenuItem({ label: 'Save', click() { callSave(); }, })); menu.append(new MenuItem({ type: 'separator', })); menu.append(new MenuItem({ label: 'Default', click() { setDefaultSceneState(); }, })); menu.append(new MenuItem({ type: 'separator', })); menu.append(new MenuItem({ label: 'Crop', click() { callCrop(); }, })); menu.append(new MenuItem({ type: 'separator', })); menu.append(new MenuItem({ label: 'Arrow', click() { callArrow(); }, })); menu.append(new MenuItem({ type: 'separator', })); menu.append(new MenuItem({ label: 'Rect', click() { callRect(); }, })); menu.append(new MenuItem({ type: 'separator', })); menu.append(new MenuItem({ label: 'Text', click() { setDefaultSceneState(); body.classList.add('text'); }, })); menu.append(new MenuItem({ type: 'separator', })); menu.append(new MenuItem({ label: 'Pen', click() { callPen(); }, })); menu.append(new MenuItem({ type: 'separator', })); menu.append(new MenuItem({ label: 'Blur', click() { callRect('filled'); }, })); // обработчик контекстного меню window.addEventListener('contextmenu', (event) => { event.preventDefault(); menu.popup(remote.getCurrentWindow()); }, false); }; ================================================ FILE: scripts/renderer.js ================================================ /* eslint-disable */ const CLOSE = 'close'; const MAX_ZOOM = 2; const MIN_ZOOM = 0.5; // работа с меню const Menu = require('./menu'); // создание скриншота const addScreenshot = require('./functions/addScreenshot'); const electron = require('electron'); const fs = require('fs'); const path = require('path'); const isOnline = require('is-online'); const { ipcRenderer } = require('electron'); const nativeImage = electron.nativeImage; const ipc = require('electron').ipcRenderer; window.onerror = function(error, url, line) { ipc.send('errorInWindow', error); }; const ipcAdd = require('./ipc/ipcAdd'); const determineScreenShotSize = require('./functions/determineScreenShotSize'); const { clipboard, } = require('electron'); // Позиция по X, куда пришлось нажатие кнопки мыши let mouseDownX; // Позиция по Y, куда пришлось нажатие кнопки мыши let mouseDownY; // Рамка, которая указывает на область кропа const frame = document.getElementById('frame'); const loader = document.getElementById('loader'); const loaderText = loader.querySelector('span'); const shortcutWindow = document.querySelector('.shortcut'); const settings = document.querySelector('aside.settings'); const applyCustomSettingsButton = settings.querySelector('#applyCustom'); const settingFieldsets = settings.querySelectorAll('fieldset'); const signinWindow = document.querySelector('aside.sign-in'); const setDefaultFrame = require('./functions/setDefaultFrame'); // сам canvas const workArea = document.querySelector('canvas'); // определяем сцену для работы с easel const stage = new createjs.Stage('stage'); // определяем контекст канваса const ctx = workArea.getContext('2d'); // создаём img для добавления на канвас let image = new Image(); // битмап для изображения let bitmap; // размеры окна let thumbSize; let fillObj; // Body-element const body = document.body; // обработчик нажатия на кнопки закрытия в модальном окне const closeModalButtonClickHandler = require('./functions/closeModal'); const shapeColorPicker = document.querySelector('input[name="shapecolor"]'); // толщина карандаша const penSize = 4; const popupWindow = document.querySelector('aside#messageToUser'); const popupText = popupWindow.querySelector('p'); const popUp = require('./functions/popUp'); const addModalButtonListeners = require('./functions/addModalButtonListeners'); const createDeleteButton = require('./functions/createDeleteButton'); const createTransformButton = require('./functions/createTransformButton'); const createEditButton = require('./functions/createEditButton'); const hideControls = require('./functions/hideControls'); const showControls = require('./functions/showControls'); const cropListeners = require('./functions/cropListeners'); const penListeners = require('./functions/penListeners'); const rectListeners = require('./functions/rectListeners'); const arrowListeners = require('./functions/arrowListeners'); const textEventListeners = require('./functions/textEventListeners'); const setDefaultScene = require('./functions/setDefaultScene'); const modalOnStart = require('./functions/modalOnStart'); const setTransformRectDistance = require('./functions/setTransformRectDistance'); const initSettings = require('./functions/initSettings'); const initCommonSettings = require('./functions/initCommonSettings'); const setFieldsetStatus = require('./functions/setFieldsetStatus'); const sendToServer = require('./functions/sendToServer'); const getSettings = require('./functions/getSettings'); const decodeBase64Image = require('./functions/decodeBase64Image'); const hideLoader = require('./functions/hideLoader'); const serverMessage = require('./functions/serverMessage'); const serverButtonClickHandler = require('./functions/serverButtonClickHandler'); const signinFormSubmitHandler = require('./functions/signinFormSubmitHandler'); const calcAngle = require('./functions/calcAngle'); const preventDND = require('./functions/preventDND'); const sendToSocialNetwork = require('./functions/sendToSocialNetwork'); // Массив объектов, содержащих данные о каждом кропе. let croppingHistory = []; // Индекс текущего кусочка истории в массива let historyIndex = 0; // Текущая активная фигура let activeShape; // параметры блюра const blurFilter = new createjs.BlurFilter(12, 12, 1); // модальное окно с подсказкой const modalWindow = document.querySelector('body>aside.hint'); // кнопки закрытия модального окна const closeModalButtons = modalWindow.querySelectorAll('button'); const closeShortcutButtons = shortcutWindow.querySelectorAll('button'); const signinButtons = signinWindow.querySelectorAll('button[type="button"]'); const signinForm = signinWindow.querySelector('form'); const closeSettingsButtons = settings.querySelectorAll('button.close'); const serverButton = settings.querySelector('button#serverPath'); const textSidebar = document.getElementById('textSidebar'); const textareaContent = document.getElementById('textContent'); const textateaFontSize = document.getElementById('fontSize'); const textateaFontColor = document.getElementById('fontColor'); const deleteTextButton = document.getElementById('deleteText'); const applyTextButton = document.getElementById('applyText'); const closeTextFormButton = document.getElementById('closeTextForm'); let commonSettings = JSON.parse(localStorage.getItem('commonSettings')); let DELAY_DURATION = 100; let SHIFT_PRESSED; let IN_PROCESS = false; const APP_VERSION = ipcRenderer.sendSync('synchronous-message', 'version'); let oldBase; window.addEventListener('keydown', event => { if (event.which === 16) { SHIFT_PRESSED = true; } if (event.which === 27) { setDefaultSceneState(); shortcutWindow.classList.remove('open'); modalWindow.classList.remove('open'); settings.classList.remove('open'); signinWindow.classList.remove('open'); body.classList.remove('modal'); body.classList.remove('text'); } }); window.addEventListener('keyup', event => { if (event.which === 16) { SHIFT_PRESSED = false; } }); // старое значение по X при работе с карандашом let penOldX; // старое значение по Y при работе с карандашом let penOldY; // флаг, указывающий на процесс работы с инструментом let onCreate = false; let areaZoom = 1; let scale; preventDND(window); stage.enableDOMEvents(true); addModalButtonListeners(closeModalButtons, closeModalButtonClickHandler, body, modalWindow); addModalButtonListeners(closeShortcutButtons, closeModalButtonClickHandler, body, shortcutWindow); addModalButtonListeners(signinButtons, closeModalButtonClickHandler, body, signinWindow); addModalButtonListeners(closeSettingsButtons, closeModalButtonClickHandler, body, settings); signinForm.addEventListener('submit', signinFormSubmitHandler, false); applyCustomSettingsButton.addEventListener('change', applyCustomSettingsButtonChangeHandler, false); serverButton.addEventListener('click', serverButtonClickHandler, false); // обработчик клика по сцене stage.addEventListener('mousedown', stageMouseDownHandler, false); // Создаём меню приложения Menu( stage, stageMouseDownHandlerCrop, stageMouseUpHandlerCrop, stageMouseMoveHandlerCrop, openNewScreenshotDialog, callCrop, callRect, callPen, callArrow, callSave, setDefaultSceneState, body); ipcAdd(undoCrop, redoCrop, setDefaultSceneState, createScreenshot, callCrop, callRect, callPen, body, modalWindow, getDrawStatus, callZoomIn, callZoomOut, setDefaultZoom, callArrow, callSave, shortcutWindow, settings, signinWindow, createEmoji, APP_VERSION, textSidebar); /** * Вешаем обработчики в форме изменения текста */ textEventListeners(textareaContent, textateaFontSize, textateaFontColor, textareaValueChangeHadler, textareaFontSizeChangeHadler, textareaFontColorChangeHadler, deleteTextButton, deleteTextButtonClickHandler, applyTextButton, applyTextButtonClickHandler, closeTextFormButton, textSidebar); /** * Обработчик закртыия формы с текстом * @return {[type]} */ function applyTextButtonClickHandler() { hideControls(activeShape, stage); activeShape = undefined; stage.update(); textSidebar.classList.remove('show'); } /** * Обработчик удаления текста из формы * @return {[type]} */ function deleteTextButtonClickHandler() { stage.removeChild(activeShape); activeShape = undefined; stage.update(); textSidebar.classList.remove('show'); } /** * Обработчик изменения контента текста * @param {[type]} event * @return {[type]} */ function textareaValueChangeHadler(event) { let textareaValue = event.target.value; activeShape.children[0].text = textareaValue; stage.update(); } /** * Обработчик изменения кегля * @param {[type]} event * @return {[type]} */ function textareaFontSizeChangeHadler(event) { let textareaFontSize = event.target.value; activeShape.children[0].font = `${textareaFontSize}px Roboto`; activeShape.children[1].y = activeShape.getBounds().y - 5; stage.update(); } /** * Обработчик изменения текста * @param {[type]} event * @return {[type]} */ function textareaFontColorChangeHadler(event) { let textareaColor = event.target.value; activeShape.children[0].color = textareaColor; stage.update(); } // Метод вызова диалога о создании нового скриншота function openNewScreenshotDialog() { if (workArea.toDataURL('', 'image/png') === oldBase) { ipcRenderer.sendSync('synchronous-message', 'createNew', 'dontask'); } else { ipcRenderer.sendSync('synchronous-message', 'createNew', 'ask'); } } initSettings(settings); initCommonSettings(settings); /** * Обработчик нажатия на сцене для выбора элементов */ function stageMouseDownHandler(event) { event.preventDefault(); if (body.classList.contains('text')) { setDefaultSceneState(); createText(event); return; } const target = event.target; const name = target.parent.name; // HACK: for MacOS if (name === 'close') { hideControls(activeShape, stage); stage.removeChild(activeShape); activeShape = undefined; stage.update(); textSidebar.classList.remove('show'); return; } if (name === 'edit') { openTextSidebar(); return; } // закрытие модалки по чёрному пространству вокруг if (name === null && body.classList.contains('modal')) { modalWindow.classList.remove('open'); shortcutWindow.classList.remove('open'); settings.classList.remove('open'); signinWindow.classList.remove('open'); body.classList.remove('modal'); return; } if (onCreate === false) { if (name) { if (name.indexOf('shapeContainer') !== -1) { if (activeShape !== target.parent) { hideControls(activeShape, stage); activeShape = target.parent; showControls(activeShape, stage); } else { const demensionX = activeShape.x - event.stageX; const demensionY = activeShape.y - event.stageY; if ((name.indexOf('Pen') === -1) && (onCreate === false) && (activeShape.children[0].filled !== true)) { activeShape.on('pressmove', (event) => { body.classList.add('move'); activeShape.x = event.stageX + demensionX; activeShape.y = event.stageY + demensionY; stage.update(); }); activeShape.on('pressup', (event) => { body.classList.remove('move'); }); } } } } else if (name === null && activeShape !== undefined) { hideControls(activeShape, stage); activeShape = undefined; textSidebar.classList.remove('show'); return; } } stage.update(); } /** * Метод удаления фигуры */ function deleteShape(event) { activeShape = event.target.parent; if (activeShape.name === CLOSE) { activeShape = event.target.parent.parent; } if (activeShape.name === 'shapeContainerText') { textSidebar.classList.remove('show'); } hideControls(activeShape, stage); stage.removeChild(activeShape); activeShape = undefined; stage.update(); } /** * Обработчик отпускания клавиши мыши при работе с фигурами */ function stageMouseUpShapes() { const deleteButton = createDeleteButton(); const transformButton = createTransformButton(); if (activeShape.children.length === 0) { return; } deleteButton.addEventListener('click', deleteShape); if (penOldX !== undefined && penOldY !== undefined) { deleteButton.x = penOldX - 10; deleteButton.y = penOldY - 10; } else { let shape = activeShape.getChildByName('rect'); let shapeBounds; if (shape === null) { shape = activeShape.getChildByName('arrow'); shapeBounds = activeShape.getChildByName('arrow').getBounds(); } else { shapeBounds = activeShape.getChildByName('rect').getBounds(); } deleteButton.x = -10; deleteButton.y = -10; transformButton.x = shapeBounds.width + 10; transformButton.y = shapeBounds.height + 10; transformButton.addEventListener('mousedown', transformPressHandler); transformButton.addEventListener('pressmove', transformMoveHandler); transformButton.addEventListener('pressup', transformUpHandler); } const arrow = activeShape.getChildByName('arrow'); if (arrow !== null) { transformButton.x = arrow.length + 25; transformButton.y = 10; } if (activeShape.children[0].filled !== true) { activeShape.addChild(transformButton); } if (activeShape.children[0].filled === true) { activeShape.removeChildAt(1); activeShape.removeChildAt(1); addOutline(activeShape); } activeShape.addChild(deleteButton); hideControls(activeShape, stage); penOldX = undefined; penOldY = undefined; activeShape = undefined; } /** * Обработчик нажатия при использовании трансформации */ function transformPressHandler(event) { mouseDownX = event.stageX; mouseDownY = event.stageY; scale = activeShape.scaleX; activeShape.removeAllEventListeners(); } /** * Обработчик перемещения при использовании трансформации */ function transformMoveHandler(event) { let i; let n; const child = activeShape.children; const arrow = activeShape.getChildByName('arrow'); const result = setTransformRectDistance(event.stageX, event.stageY, croppingHistory, historyIndex, activeShape, mouseDownX, mouseDownY); const distance1 = result.distance1; const distance2 = result.distance2; let shapeName; let degree; activeShape.scaleX = activeShape.scaleY = (distance2 / distance1) * scale; for (i = 0, n = activeShape.children.length; i < n; i++) { if ((child[i].name === 'transform')) { child[i].scaleX = child[i].scaleY = 1 / activeShape.scaleX; if (arrow !== null) { child[i].x = arrow.length + (25 / activeShape.scaleX); child[i].y = 10 / activeShape.scaleX; } else { child[i].x = activeShape.getBounds().width + (10 / activeShape.scaleX); child[i].y = activeShape.getBounds().height + (10 / activeShape.scaleX); } } if ((child[i].name === 'close')) { let rect = activeShape.getChildByName('rect'); if (rect === null) { rect = activeShape.getChildByName('arrow'); if (rect === null) { rect = activeShape.getChildByName('emoji'); } } child[i].scaleX = child[i].scaleY = 1 / activeShape.scaleX; child[i].x = rect.x - (10 / activeShape.scaleX); child[i].y = rect.y - (10 / activeShape.scaleX); } if ((child[i].name === 'rect') || (child[i].name === 'outline')) { const width = child[i].getBounds().width; const height = child[i].getBounds().height; const top = child[i].y; const left = child[i].x; const name = child[i].name; const filled = child[i].filled; if (name === 'rect') { let penColor = shapeColorPicker.value; child[i].graphics.clear().setStrokeStyle(4 / activeShape.scaleX).beginStroke(penColor).drawRoundRect(left, top, width, height, 2 / activeShape.scaleX); shapeName = 'rect'; } else { child[i].graphics.clear().setStrokeStyle(1 / activeShape.scaleX).beginStroke('#37aee2').drawRoundRect(left, top, width, height, 2 / activeShape.scaleX); } } if ((child[i].name === 'arrow')) { drawArrow(child[i], child[i].length); shapeName = 'arrow'; } } degree = calcAngle(activeShape.x, activeShape.y, event.stageX - stage.x, event.stageY - stage.y); if (shapeName === 'arrow') { activeShape.rotation = degree; } else if(shapeName !== 'rect') { activeShape.rotation = -(45 - degree); } stage.update(); } /** * Обработчик отпускания при использовании трансформации */ function transformUpHandler() { mouseDownX = 0; mouseDownY = 0; } /** * Метод создания скриншота */ function createScreenshot(argument) { if (IN_PROCESS === true) { return; } IN_PROCESS = true; beforeNewScreenshot(); thumbSize = determineScreenShotSize(); const options = { types: ['screen'], thumbnailSize: thumbSize, }; commonSettings = JSON.parse(localStorage.getItem('commonSettings')); if (commonSettings) { DELAY_DURATION = commonSettings.delayNumber?commonSettings.delayNumber:1; if (DELAY_DURATION > 10) { DELAY_DURATION = 10; } if (DELAY_DURATION < 1) { DELAY_DURATION = 1; } DELAY_DURATION *= 1000; } const answer = ipcRenderer.sendSync('synchronous-message', 'hide'); if (answer === 'ok') { setTimeout(() => { addScreenshot(options, thumbSize, image, ctx, stage, bitmap, body, modalOnStart, modalWindow, argument, callSave); IN_PROCESS = false; }, DELAY_DURATION); } initSettings(settings); initCommonSettings(settings); if (commonSettings) { if ((commonSettings.immediatelycrop || argument === 'capture') && argument !== 'fast') { callCrop(); } } } /** * Обработчик нажатия кнопки мыши при работе с прямоугольником */ function stageMouseDownHandlerRect(filled, event) { const customEvent = (filled === 'filled') ? event : filled; if (filled === 'filled') { stage.on('stagemousemove', stageMouseMoveHandlerRect.bind(null, filled)); } else { stage.on('stagemousemove', stageMouseMoveHandlerRect); } stageMouseDownHandlerDefault(filled, customEvent); } /** * Обработчик нажатия кнопки мыши при работе со стрелкой */ function stageMouseDownHandlerArrow(event) { stageMouseDownHandlerDefault(event); stage.on('stagemousemove', stageMouseMoveHandlerArrow); } /** * Обработчик нажатия кнопки мыши при стандартной работе с фигурой */ function stageMouseDownHandlerDefault(filled, event) { const customEvent = (filled === 'filled') ? event : filled; const container = new createjs.Container(); container.name = 'shapeContainer'; container.x = customEvent.stageX - stage.x; container.y = customEvent.stageY - stage.y; hideControls(activeShape, stage); if (filled === 'filled') { stage.addChildAt(container, 1); } else { stage.addChild(container); } stage.update(); activeShape = container; } /** * Метод создания стрелки */ function drawArrow(arrow, length) { let penColor = shapeColorPicker.value; const arrowSize = Math.sqrt(length) / 1.5; arrow.graphics.clear().ss(4 / activeShape.scaleX).s(penColor).mt(0, 0) .lineTo(length, 0) .f(penColor) .dp(length - arrowSize, 0, arrowSize, 3); arrow.set({ length: length, }); } /** * Обработчик перемещения курсора мыши при работе со стрелкой */ function stageMouseMoveHandlerArrow(event) { if(activeShape === undefined) { return; } const arrow = new createjs.Shape(); const shapeX = event.stageX - stage.x - activeShape.x; const shapeY = event.stageY - stage.y - activeShape.y; const length = Math.sqrt((shapeX * shapeX) + (shapeY * shapeY)); activeShape.removeChildAt(0); arrow.name = 'arrow'; drawArrow(arrow, length); arrow.setBounds(0, 0, shapeX, shapeY); activeShape.addChild(arrow); activeShape.rotation = (Math.atan2(shapeY, shapeX) * 180) / Math.PI; stage.update(); } /** * Обработчик перемещения курсора мыши при работе с прямоугольником */ function stageMouseMoveHandlerRect(filled, event) { if(activeShape === undefined) { return; } const customEvent = (filled === 'filled') ? event : filled; const shape = new createjs.Shape(); const width = Math.abs(customEvent.stageX - stage.x - activeShape.x); const height = Math.abs(customEvent.stageY - stage.y - activeShape.y); let shapeX = 0; let shapeY = 0; activeShape.removeChildAt(0); activeShape.removeChildAt(1); shape.name = 'rect'; if (customEvent.stageX - stage.x < activeShape.x) { shapeX =(filled === 'filled') ? 0 : customEvent.stageX - stage.x - activeShape.x; } if (customEvent.stageY - stage.y < activeShape.y ) { shapeY = (filled === 'filled') ? 0 : customEvent.stageY - stage.y - activeShape.y; } if (filled === 'filled') { const pixeledImage = new Image(); const canva = document.createElement('canvas'); const canvaCtx = canva.getContext('2d'); var borderShape = new createjs.Shape(); borderShape.name = 'borderShape'; canva.width = width; canva.height = height; pixeledImage.src = stage.children[0].image.src; canvaCtx.drawImage(pixeledImage, -activeShape.x, -activeShape.y); shape.graphics.beginBitmapFill(canva).drawRoundRect(shapeX, shapeY, width, height, 2 / areaZoom); borderShape.graphics.setStrokeStyle(1 / areaZoom).beginStroke('#37AEE2') .drawRoundRect(shapeX, shapeY, width, height, 2 / areaZoom); shape.filters = [blurFilter]; shape.cache(shapeX, shapeY, width, height) shape.filled = true; } else { let penColor = shapeColorPicker.value; shape.graphics.setStrokeStyle(4 / areaZoom).beginStroke(penColor) .drawRoundRect(shapeX, shapeY, width, height, 2 / areaZoom); } shape.setBounds(shapeX, shapeY, width, height); activeShape.addChild(shape); if (borderShape) { activeShape.addChild(borderShape); } stage.update(); } /** * Метод установки стандартных значений сцены */ function setDefaultSceneState() { setDefaultScene(stage, stageMouseDownHandler, body); setDefaultFrame(frame); // если жмём esc во время работы с фигурой if (onCreate === true) { mouseDownX = 0; mouseDownY = 0; penOldX = undefined; penOldY = undefined; stage.removeChild(activeShape); stage.update(); activeShape = undefined; body.classList.remove('draw'); } onCreate = false; stage.update(); } /** * Вешаем обработчики для прямоугольника */ function callRect(filled) { const answer = ipcRenderer.sendSync('synchronous-message', 'rect'); if (answer === 'ok') { setDefaultSceneState(); hideControls(activeShape, stage); if (activeShape) { activeShape.removeAllEventListeners(); } onCreate = true; body.classList.add('draw'); if (filled === 'filled') { rectListeners(stageMouseDownHandlerRect.bind(null,filled), stageMouseUpShapes, stage); } else { rectListeners(stageMouseDownHandlerRect, stageMouseUpShapes, stage); } } } /** * Вешаем обработчики для стрелки */ function callArrow() { const answer = ipcRenderer.sendSync('synchronous-message', 'pen'); if (answer === 'ok') { setDefaultSceneState(); hideControls(activeShape, stage); if (activeShape) { activeShape.removeAllEventListeners(); } onCreate = true; body.classList.add('draw'); arrowListeners(stageMouseDownHandlerArrow, stageMouseUpShapes, stage); } } /** Draw block. Hate not pure functions( **/ /** * Вешаем обработчики для карандаша */ function callPen() { const answer = ipcRenderer.sendSync('synchronous-message', 'pen'); if (answer === 'ok') { setDefaultSceneState(); hideControls(activeShape, stage); if (activeShape) { activeShape.removeAllEventListeners(); } onCreate = true; body.classList.add('draw'); penListeners(stageMouseDownHandlerPen, stageMouseUpShapes, stage); } } /** * Обработчик нажатия кнопки мыши при работе с карандашом */ function stageMouseDownHandlerPen() { const shape = new createjs.Shape(); activeShape = new createjs.Container(); activeShape.name = 'shapeContainerPen'; activeShape.addChild(shape); stage.addChild(activeShape); stage.on('stagemousemove', stageMouseMoveHandlerPen); } /** * Обработчик перемещения мыши при работе с карандашом */ function stageMouseMoveHandlerPen(event) { if(activeShape === undefined) { return; } let penColor = shapeColorPicker.value; fillObj = activeShape.getChildAt(0).graphics.beginStroke(penColor).command; let newX = event.stageX - stage.x; let newY = event.stageY - stage.y; let deltaX = Math.abs(penOldX - event.stageX - stage.x); let deltaY = Math.abs(penOldY - event.stageY - stage.y); newX = event.stageX - stage.x; newY = event.stageY - stage.y; if (penOldX) { if (SHIFT_PRESSED) { if (deltaX < deltaY) { newX = penOldX; newY = event.stageY - stage.y; activeShape.getChildAt(0).graphics.setStrokeStyle(penSize / areaZoom, 'round') .moveTo(penOldX, penOldY) .lineTo(penOldX, newY); } else { newX = event.stageX - stage.x; newY = penOldY; activeShape.getChildAt(0).graphics.setStrokeStyle(penSize / areaZoom, 'round') .moveTo(penOldX, penOldY) .lineTo(newX, penOldY); } } else { activeShape.getChildAt(0).graphics.setStrokeStyle(penSize / areaZoom, 'round') .moveTo(penOldX, penOldY) .lineTo(newX, newY); penOldX = newX; penOldY = newY; } stage.update(); } if (!penOldX || SHIFT_PRESSED === false) { penOldX = newX; penOldY = newY; } } /** Crop block. Hate not pure functions( **/ /** * Вешаем обработчики для кропа */ function callCrop() { const answer = ipcRenderer.sendSync('synchronous-message', 'crop'); if (answer === 'ok') { setDefaultSceneState(); hideControls(activeShape, stage); if (activeShape) { activeShape.removeAllEventListeners(); } onCreate = true; activeShape = undefined; cropListeners(stageMouseDownHandlerCrop, stageMouseUpHandlerCrop, stageMouseMoveHandlerCrop, stage, body); } } /** * Обработчик нажатия кнопки мыши при кропе * * @param event */ function stageMouseDownHandlerCrop(event) { mouseDownX = event.stageX; mouseDownY = event.stageY; setDefaultFrame(frame); frame.classList.add('show'); frame.style.top = `${workArea.offsetTop + mouseDownY}px`; frame.style.left = `${workArea.offsetLeft + mouseDownX}px`; } /** * Обработчик перемещения мыши при кропе * @param event */ function stageMouseMoveHandlerCrop(event) { const stageX = event.stageX; const stageY = event.stageY; if (event.stageX < mouseDownX) { frame.style.left = `${workArea.offsetLeft + stageX}px`; } if (event.stageY < mouseDownY) { frame.style.top = `${workArea.offsetTop + stageY}px`; } frame.style.width = `${Math.abs(stageX - mouseDownX)}px`; frame.style.height = `${Math.abs(stageY - mouseDownY)}px`; } /** * Обработчик отпускания кнопки мыши при кропе * * @param event */ function stageMouseUpHandlerCrop(event) { const stageX = event.stageX; const stageY = event.stageY; let historyObj = {}; if (mouseDownX === stageX && mouseDownY === stageY) { onCreate = false; setDefaultSceneState(); return; } const xDemension = frame.offsetLeft - workArea.offsetLeft; const yDemension = frame.offsetTop - workArea.offsetTop; historyObj.stageX = stage.x; historyObj.stageY = stage.y; historyObj.width = workArea.width; historyObj.height = workArea.height; // удаляем тех, к кому не вернёмся если до этого было Undo if (historyIndex !== croppingHistory.length - 1) { croppingHistory.splice(historyIndex + 1, croppingHistory.length - historyIndex); } croppingHistory.pop(); croppingHistory.push(historyObj); historyObj = {}; stage.x -= xDemension; stage.y -= yDemension; workArea.width = Math.abs(stageX - mouseDownX); workArea.height = Math.abs(stageY - mouseDownY); // сохраняем обновившуюся сцену historyObj.stageX = stage.x; historyObj.stageY = stage.y; historyObj.width = workArea.width; historyObj.height = workArea.height; croppingHistory.push(historyObj); historyIndex = croppingHistory.length - 1; stage.update(); onCreate = false; setDefaultSceneState(); body.classList.add('centered'); } /** * Работа с текстом */ function createText(oldEvent) { const textPosition = { x: oldEvent.stageX - stage.x, y: oldEvent.stageY - stage.y } let container = new createjs.Container(); const deleteButton = createDeleteButton(); const cimage = new Image(); cimage.src = './images/edit.png' cimage.onload = () => { const editButton = createEditButton(cimage); container.name = 'shapeContainerText'; let text = new createjs.Text('Example', '30px Roboto', '#D50000'); text.name = 'paragraph'; text.x = textPosition.x; text.y = textPosition.y; text.textBaseline = "alphabetic"; container.addChild(text) deleteButton.addEventListener('click', deleteShape); deleteButton.x = text.x - 25; deleteButton.y = text.y - 30; container.addChild(deleteButton); editButton.addEventListener('click', openTextSidebar); editButton.x = text.x - 25; editButton.y = text.y; container.addChild(editButton); stage.addChild(container); activeShape = container; stage.update(); body.classList.remove('text'); openTextSidebar(); } } /** * Инициализация модалки при открытии * @return {[type]} */ function openTextSidebar() { const paragraph = activeShape.children[0]; textateaFontSize.value = paragraph.font.split('px')[0]; textareaContent.value = paragraph.text; textateaFontColor.value = activeShape.children[0].color; textSidebar.classList.add('show'); if (!textSidebar.classList.contains('show')) { hideControls(activeShape, stage); activeShape = undefined; } } /** * Перемещаемся назад в истории кропа */ function undoCrop() { const index = historyIndex - 1; const undoObj = croppingHistory[index]; if (undoObj === undefined) { return; } stage.x = undoObj.stageX; stage.y = undoObj.stageY; workArea.width = undoObj.width; workArea.height = undoObj.height; stage.update(); historyIndex = index; if (historyIndex === 0) { body.classList.remove('centered'); } } function beforeNewScreenshot() { setDefaultSceneState(); stage.x = 0; stage.y = 0; croppingHistory = []; } /** * Перемещаемся вперёд в истории кропа */ function redoCrop() { const index = historyIndex + 1; const redoObj = croppingHistory[index]; if (redoObj === undefined) { return; } stage.x = redoObj.stageX; stage.y = redoObj.stageY; workArea.width = redoObj.width; workArea.height = redoObj.height; stage.update(); historyIndex = index; body.classList.add('centered'); } /** * Getter для получения значения фалага */ function getDrawStatus() { return onCreate; } /** * Zoom in handler */ function callZoomIn() { if (areaZoom < MAX_ZOOM) { areaZoom += 0.1; body.style.transform = `scale(${areaZoom})`; } } /** * Zoom out handler */ function callZoomOut() { if (areaZoom > MIN_ZOOM) { areaZoom -= 0.1; body.style.transform = `scale(${areaZoom})`; } } /** * Set default zoom handler */ function setDefaultZoom() { areaZoom = 1; body.style.transform = `scale(${areaZoom})`; } function createEmoji(type) { const emojiImage = new Image(); const container = new createjs.Container(); container.name = 'shapeContainer'; emojiImage.src = `./images/emoji/${type}.png` emojiImage.onload = () => { const deleteButton = createDeleteButton(); const transformButton = createTransformButton(); const emoji = new createjs.Bitmap(emojiImage); emoji.name = 'emoji'; emoji.scaleX = emoji.scaleY = 0.35; container.addChild(emoji); addOutline(container); deleteButton.addEventListener('click', deleteShape); deleteButton.x = -10; deleteButton.y = -10; container.addChild(deleteButton); transformButton.x = container.getBounds().width + (10 / container.scaleX); transformButton.y = container.getBounds().height + (10 / container.scaleX); transformButton.addEventListener('mousedown', transformPressHandler); transformButton.addEventListener('pressmove', transformMoveHandler); transformButton.addEventListener('pressup', transformUpHandler); container.addChild(transformButton); if (croppingHistory.length === 0) { container.x = (workArea.width / 2) - 128; container.y = (workArea.height / 2) - 128; } else { container.x = (workArea.width / 2) - 128 - croppingHistory[historyIndex].stageX; container.y = (workArea.height / 2) - 128 - croppingHistory[historyIndex].stageY; } stage.addChild(container); hideControls(container, stage); stage.update(); }; } /** * Обработчик сохранения результата */ function callSave(flag) { if (loader.classList.contains('show')) { return; } let data; const time = new Date(); let settings = getSettings(); const homePath = process.env.HOME || process.env.USERPROFILE; const screenshotPath = path.join(`${homePath}/.--shots`, `${Date.now()}.png`); let screenshotPathTemp = path.join(`${homePath}/.--shots`, `clip.board.png`); let imageBuffer; let difference; let answerOffline; if (!fs.existsSync(`${homePath}/.--shots`)) { fs.mkdirSync(`${homePath}/.--shots`); } hideControls(activeShape, stage); activeShape = undefined; loader.style.transform = `scale(${1 / areaZoom})`; loader.classList.add('show'); loaderText.textContent = 'Saving'; workArea.style.transform = `scale(${1 / areaZoom})`; data = workArea.toDataURL('', 'image/png'); workArea.style.transform = ''; ipcRenderer.sendSync('synchronous-message', 'optimize', data); if (oldBase !== data) { oldBase = data; } setDefaultSceneState(); if (flag !== undefined) { settings = flag; } isOnline((err, status) => { if (status !== true) { if (['local base64', 'local', 'base64'].indexOf(settings) === -1) { settings = 'offline'; } } }); switch (settings) { case 'offline': answerOffline = confirm("You're offline now. Are you agree to save a screenshot locally?"); if (answerOffline) { data = data.replace(/\s+/g, ''); imageBuffer = decodeBase64Image(data); ipc.send('open-save-dialog', imageBuffer.data, localStorage.getItem('savePath')); } else { hideLoader(difference, 'Stopping', loaderText); } break; case 'local': data = data.replace(/\s+/g, ''); imageBuffer = decodeBase64Image(data); ipc.send('open-save-dialog', imageBuffer.data, localStorage.getItem('savePath')); break; case 'base64': data = data.replace(/\s+/g, ''); imageBuffer = decodeBase64Image(data); fs.writeFile(screenshotPathTemp, imageBuffer.data, function(){ let imagePath = path.join(`${homePath}`, '/.--shots/clip.board.png'); let image = nativeImage.createFromPath(imagePath); clipboard.writeImage(imagePath); fs.unlinkSync(imagePath); }); difference = Math.abs(new Date() - time); hideLoader(difference, 'Copied to buffer', loaderText); break; case 'server link': sendToServer(data, time, loader, loaderText); break; case 'facebook': sendToServer(data, time, loader, loaderText, ()=> { sendToSocialNetwork('facebook'); }, 'Facebook'); break; case 'twitter': sendToServer(data, time, loader, loaderText, ()=> { sendToSocialNetwork('twitter'); }, 'Twitter'); break; case 'vkontakte': sendToServer(data, time, loader, loaderText, ()=> { sendToSocialNetwork('vkontakte'); }, 'VKontakte'); break; case 'local base64': data = data.replace(/\s+/g, ''); imageBuffer = decodeBase64Image(data); fs.writeFile(screenshotPathTemp, imageBuffer.data, function(){ let imagePath = path.join(`${homePath}`, '/.--shots/clip.board.png'); let image = nativeImage.createFromPath(imagePath); clipboard.writeImage(imagePath); fs.unlinkSync(imagePath); ipc.send('open-save-dialog', imageBuffer.data, localStorage.getItem('savePath')); }); break; default: sendToServer(data, time, loader, loaderText); break; } } /** * Вызываем метод сохранения и формируем ссылку для нужной соц сети */ function callSendToSocialNetwork(type) { callSave(type) } ipc.on('successSave', (event, path)=>{ hideLoader(3000, `Saved at "${path}"`, loaderText); localStorage.setItem('savePath', path.substr(0, path.lastIndexOf('/'))); }); ipc.on('canceledSave', (event)=>{ hideLoader(3000, 'Stopping', loaderText); }); ipc.on('saveState', (event)=>{ if (workArea.toDataURL('', 'image/png') === oldBase) { ipcRenderer.sendSync('synchronous-message', 'createNew', 'dontask'); } else { ipcRenderer.sendSync('synchronous-message', 'createNew', 'ask'); } }); ipc.on('facebook', (event) => { callSendToSocialNetwork('facebook') }) ipc.on('twitter', (event) => { callSendToSocialNetwork('twitter') }) ipc.on('vkontakte', (event) => { callSendToSocialNetwork('vkontakte') }) ipc.on('isDropbox', (event) => { let dbToken = localStorage.getItem('dropboxToken'); ipcRenderer.sendSync('synchronous-message', 'dropbox-token', dbToken); }); ipc.on('isImgur', (event) => { let dbToken = localStorage.getItem('imgurToken'); ipcRenderer.sendSync('synchronous-message', 'imgur-token', dbToken); }); ipc.on('freshDropboxToken', (event, data) => { let token = data.split('access_token=')[1]; token = token.split('&token_type=')[0]; localStorage.setItem('dropboxToken', token); }); ipc.on('freshImgurToken', (event, data) => { let token = data.split('access_token=')[1]; token = token.split('&expires_in')[0]; localStorage.setItem('imgurToken', token); }); ipc.on('saveImgur', (event) => { isOnline((err, status) => { if (status !== true) { popUp(popupWindow, popupText, `You're offline now. Try again later.`); } }); const time = new Date(); let imToken = localStorage.getItem('imgurToken'); hideControls(activeShape, stage); activeShape = undefined; setDefaultSceneState(); if (imToken === null || imToken === undefined) { popUp(popupWindow, popupText, 'Sign in to Imgur (Sign in to > Imgur)'); return; } loader.style.transform = `scale(${1 / areaZoom})`; loader.classList.add('show'); loaderText.textContent = 'In process'; let imageSringData = workArea.toDataURL('', 'image/png'); //Convert it to an arraybuffer let timestamp = new Date().getTime(); let difference; const imgUrl = "http://i.imgur.com/l5OqYoZ.jpg"; let xhr = new XMLHttpRequest(); let pathToServer = 'https://api.imgur.com/3/upload'; let imageData = imageSringData.replace('data:image/png;base64,', ''); xhr.open('POST', pathToServer, true); xhr.setRequestHeader("Authorization", "Bearer " + imToken); xhr.setRequestHeader('Content-Type', 'json'); let sendingData = { image: imageData, type: 'base64' }; xhr.send(JSON.stringify(sendingData)); xhr.onload = () => { let resp = JSON.parse(xhr.responseText); switch (resp.status) { case 500: difference = Math.abs(new Date() - time); hideLoader(difference, 'Server error😱', loaderText); break; case 400: difference = Math.abs(new Date() - time); hideLoader(difference, 'An impossible request 😱', loaderText); break; case 401: difference = Math.abs(new Date() - time); hideLoader(difference, 'Auth error 😱', loaderText); break; case 200: if (xhr) { let link = resp.data.link; clipboard.writeText(link); difference = Math.abs(new Date() - time); hideLoader(difference, 'Saved to Imgur and copied to clipboard', loaderText); } break; default: difference = Math.abs(new Date() - time); hideLoader(difference, 'Unknown error 😱', loaderText); break; } } }); ipc.on('saveDropbox', (event) => { isOnline((err, status) => { if (status !== true) { popUp(popupWindow, popupText, `You're offline now. Try again later.`); } }); const time = new Date(); let dbToken = localStorage.getItem('dropboxToken'); hideControls(activeShape, stage); activeShape = undefined; setDefaultSceneState(); if (dbToken === null || dbToken === undefined) { popUp(popupWindow, popupText, 'Sign in to Dropbox (Sign in to > Dropbox)'); return; } loader.style.transform = `scale(${1 / areaZoom})`; loader.classList.add('show'); loaderText.textContent = 'In process'; let dbx = new Dropbox({ accessToken: dbToken }); let imageSringData = workArea.toDataURL('', 'image/png'); //Convert it to an arraybuffer let imageData = _base64ToArrayBuffer(imageSringData); let timestamp = new Date().getTime(); let difference; dbx.filesUpload({path: '/' + `${timestamp}.png`, contents: imageData}) .then(function(response) { difference = Math.abs(new Date() - time); hideLoader(difference, 'Saved to Dropbox', loaderText); //popUp(popupWindow, popupText, 'Saved to Dropbox'); }) .catch(function(error) { difference = Math.abs(new Date() - time); hideLoader(difference, 'Something wrong. If you previously unlink app, please auth again.', loaderText); }); }); function _base64ToArrayBuffer(base64) { base64 = base64.split('data:image/png;base64,').join(''); var binary_string = window.atob(base64), len = binary_string.length, bytes = new Uint8Array( len ), i; for (i = 0; i < len; i++) { bytes[i] = binary_string.charCodeAt(i); } return bytes.buffer; } /** * Обработчик нажатия на чекбокс применения кастомных настроек. */ function applyCustomSettingsButtonChangeHandler(event) { setFieldsetStatus(settingFieldsets, !event.target.checked); } function addOutline(emoji) { const frame = new createjs.Shape(); const hitArea = new createjs.Shape(); const bounds = emoji.getBounds(); const width = bounds.width; const height = bounds.height; hitArea.graphics .setStrokeStyle(1) .beginStroke('#F00') .beginFill('black') .drawRect(-width / 2, -height / 2, width, height); frame.hitArea = hitArea; frame.graphics.setStrokeStyle(1).beginStroke('#37aee2') .drawRect(0, 0, width, height); frame.setBounds(0, 0, width, height); frame.name = 'outline'; emoji.addChild(frame); } ================================================ FILE: shots.cli ================================================ console.log( `Usage: shots [option] Options: -v, --version | print --shots version -h, --help | show all commands -a, --about | about --shots -n, --new | create screenshot -c, --capture | capture screenshot and call crop tool -f, --fast | capture screenshot and save -s, --save | save current screenshot Example: shots -v --> shots v1.0.3 ` ) ================================================ FILE: shots.package/mac/package.json ================================================ { "name": "shots", "version": "1.0.2", "description": "An application for creating screenshots", "main": "main.js", "license": "NPOSL", "author": "Victor Pasynok ", "email": "binjospookie@gmail.com", "scripts": { "start": "electron .", "compile": "rimraf build/out", "pack": "npm run compile && build --dir", "dist": "npm run compile && build", "release": "npm run compile && build" }, "build": { "maintainer": "Victor Pasynok", "copyright": "Copyright © 2016 Victor Pasynok", "dmg": { "icon": "./build/icon.icns", "category": "public.app-category.graphics-design" } }, "bugs": { "url": "https://github.com/binjospookie/--shots/issues" }, "homepage": "http://shots.binjo.ru/", "devDependencies": { "electron": "^1.4.11", "electron-builder": "^8.6.0", "eslint": "^3.10.2", "eslint-config-airbnb": "^13.0.0", "eslint-loader": "^1.6.1", "eslint-plugin-import": "^2.2.0", "eslint-plugin-jsx-a11y": "^2.2.3", "gulp-postcss": "^6.2.0", "is-online": "^5.1.2", "postcss": "^5.2.5", "postcss-scss": "^0.4.0", "rimraf": "^2.5.4" }, "dependencies": { "gulp": "^3.9.1", "is-online": "^5.1.2", "precss": "^1.4.0", "stylelint": "^7.5.0" } } ================================================ FILE: shots.package/win.linux/package.json ================================================ { "name": "shots", "version": "1.0.2", "description": "An application for creating screenshots", "main": "main.js", "license": "NPOSL", "author": "Victor Pasynok ", "email": "binjospookie@gmail.com", "scripts": { "start": "electron .", "compile": "rimraf build/out", "pack": "npm run compile && build --dir", "dist": "npm run compile && build", "release": "npm run compile && build", "win": "build --win" }, "build": { "appId": "org.binjo.shots", "category": "graphics", "maintainer": "Victor Pasynok", "copyright": "Copyright © 2016 Victor Pasynok", "win": { "target": "squirrel", "iconUrl": "https://github.com/binjospookie/--shots/blob/master/build/icon.ico?raw=true", "loadingGif": "build/install-spinner.gif", "msi": true } }, "bugs": { "url": "https://github.com/binjospookie/--shots/issues" }, "homepage": "http://shots.binjo.ru/", "devDependencies": { "electron": "^1.4.11", "electron-builder": "^8.6.0", "eslint": "^3.10.2", "eslint-config-airbnb": "^13.0.0", "eslint-loader": "^1.6.1", "eslint-plugin-import": "^2.2.0", "eslint-plugin-jsx-a11y": "^2.2.3", "gulp-postcss": "^6.2.0", "is-online": "^5.1.2", "postcss": "^5.2.5", "postcss-scss": "^0.4.0", "rimraf": "^2.5.4" }, "dependencies": { "gulp": "^3.9.1", "is-online": "^5.1.2", "precss": "^1.4.0", "stylelint": "^7.5.0" } } ================================================ FILE: stylelint.config.js ================================================ module.exports = { rules: { 'selector-list-comma-newline-after': ['always', { severity: 'warn' }], 'block-no-empty': true, 'function-comma-space-after': 'always', 'function-name-case': 'lower', 'number-leading-zero': 'never', 'string-quotes': 'double', 'length-zero-no-unit': true, 'time-no-imperceptible': true, 'unit-case': 'lower', 'value-keyword-case': 'lower', 'shorthand-property-no-redundant-values': true, 'property-case': 'lower', 'property-no-unknown': true, 'declaration-colon-space-before': 'never', 'declaration-block-no-duplicate-properties': true, 'declaration-block-no-ignored-properties': true, 'block-closing-brace-empty-line-before': 'never', 'block-opening-brace-space-before': 'always', 'selector-attribute-brackets-space-inside': 'never', 'selector-type-case': 'lower', 'selector-root-no-composition': true, 'rule-nested-empty-line-before': 'always-multi-line', 'comment-no-empty': true, 'no-duplicate-selectors': true, 'no-extra-semicolons': true, 'no-invalid-double-slash-comments': true, }, }; ================================================ FILE: styles/common.css ================================================ @import "https://fonts.googleapis.com/css?family=Roboto:300,400,700&subset=cyrillic"; @import './src/reset.css'; @import './src/body.css'; @import './src/div#frame.css'; @import './src/hint.css'; @import './src/aside#loader.css'; @import './src/aside.shortcut.css'; @import './src/aside.settings.css'; @import './src/aside.sign-in.css'; @import './src/aside#messageToUser.css'; @import './src/switcher.css'; @import './src/textSidebar.css'; ================================================ FILE: styles/src/aside#loader.css ================================================ aside#loader { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; display: none; margin: auto; background: rgba(0, 0, 0, .8); &.show { display: block; } > span { position: absolute; top: 50%; right: 0; bottom: 0; left: 0; margin: 55px auto; font-family: "Roboto", sans-serif; text-align: center; color: white; } > .spinner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 70px; height: 70px; margin: auto; animation: rotation 1.4s linear infinite; stroke:#4285f4; > .circle { transform-origin: center; animation: turn 1.4s ease-in-out infinite; stroke-dasharray: 187; stroke-dashoffset: 0; } } } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(270deg); } } @keyframes turn { 0% { stroke-dashoffset: 187; } 50% { transform: rotate(135deg); stroke-dashoffset: 46.75; } 100% { transform: rotate(450deg); stroke-dashoffset: 187; } } ================================================ FILE: styles/src/aside#messageToUser.css ================================================ aside#messageToUser { position: fixed; top: 0; right: 0; left: 0; z-index: 5; display: flex; justify-content: center; align-items: center; visibility: hidden; padding: 50px 20px; margin: auto; opacity: 0; background: white; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .08),0 3px 12px 0 rgba(0, 0, 0, .12); transition: all .3s; &.show-hide { visibility: visible; opacity: 1; transition: all .3s; } > p { position: relative; z-index: 1; font-family: "Roboto", sans-serif; font-size: 20px; &:before { position: fixed; top: 120px; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; content: ""; background: rgba(0, 0, 0, .8); } } } ================================================ FILE: styles/src/aside.settings.css ================================================ aside.settings { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; display: none; width: 570px; height: 280px; padding: 20px; margin: auto; font-family: "Roboto", sans-serif; background: #F4F3F2; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .08), 0 3px 12px 0 rgba(0, 0, 0, .12); > h2 { padding: 0; margin: 20px 0 0 10px; font-weight: 600; } &.open { display: block; } > form { margin: 40px 0 0 10px; > fieldset { display: inline-block; width: 270px; vertical-align: top; > legend { padding: 0; margin-bottom: 10px; font-size: 16px; font-weight: 600; } &.not-blocked { > ul { margin-top: 36px; } } > ul { margin-top: 10px; margin-bottom: 35px; > li { display: block; margin-bottom: 10px; > label { display: inline-block; > input { &[type="number"] { display: inline-block; width: 60px; } } } > input { margin-right: 10px; } } } &:disabled { opacity: .5; input, label { cursor: not-allowed; } } } label { -webkit-user-select: none; } > input#serverinput, > button#serverPath { position: absolute; left: 305px; } > input#serverinput { top: 135px; display: none; &.visible { display: block; } } > button#serverPath { top: 95px; padding: 0; font-size: 16px; font-weight: 600; cursor: pointer; color: black; background: none; border: none; outline: none; &:hover { color: #4285f4; } } } > button { display: inline-block; font-size: .9em; text-transform: uppercase; cursor: pointer; color: #4285f4; background: none; border: none; &.js-close-agree { width: 100%; padding-right: 20px; margin-top: 20px; text-align: right; } &.js-close-hint { position: absolute; top: 10px; right: 5px; display: block; overflow: hidden; width: 40px; height: 32px; text-indent: 40px; cursor: pointer; opacity: .3; &:before, &:after { position: absolute; top: 0; left: 18px; width: 2px; height: 33px; content: ""; background-color: #8C8888; } &:before { transform: rotate(45deg); } &:after { transform: rotate(-45deg); } &:hover { opacity: 1; } } &:focus { outline: none; } } } ================================================ FILE: styles/src/aside.shortcut.css ================================================ aside.hint.shortcut { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; width: 570px; height: 390px; padding: 20px; margin: auto; font-family: "Roboto", sans-serif; background: #F4F3F2; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .08), 0 3px 12px 0 rgba(0, 0, 0, .12); } aside.hint.shortcut > ul { width: 550px; margin: 30px 0 0; list-style-type: none; -webkit-column-count: 2; } aside.hint.shortcut > ul > li { width: 250px; margin-bottom: 10px; } aside.hint.shortcut > ul > li > span { font-weight: bold; } ================================================ FILE: styles/src/aside.sign-in.css ================================================ aside.sign-in { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; display: none; width: 300px; height: 210px; padding: 20px; margin: auto; font-family: "Roboto", sans-serif; background: #F4F3F2; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .08), 0 3px 12px 0 rgba(0, 0, 0, .12); >h2 { padding: 0; margin: 20px 0 0 10px; font-weight: 600; } &.open { display: block; } >form { margin: 40px 0 0 10px; > label { display: block; width: 220px; margin: 0 auto 20px; > input { width: 100%; height: 20px; font-size: 14px; color: black; background: transparent; border: none; border-bottom: 1px solid #37aee2; } } >button { display: inline-block; font-size: .9em; text-transform: uppercase; cursor: pointer; color: #4285f4; background: none; border: none; &[type="submit"] { display: block; margin: 40px auto; } &.js-close-agree { width: 100%; padding-right: 20px; margin-top: 20px; text-align: right; } &.js-close-hint { position: absolute; top: 10px; right: 5px; display: block; overflow: hidden; width: 40px; height: 32px; text-indent: 40px; cursor: pointer; opacity: .3; &:before, &:after { position: absolute; top: 0; left: 18px; width: 2px; height: 33px; content: ""; background-color: #8C8888; } &:before { transform: rotate(45deg); } &:after { transform: rotate(-45deg); } &:hover { opacity: 1; } } &:focus { outline: none; } } } } ================================================ FILE: styles/src/body.css ================================================ body { position: relative; width: 100vw; height: 100vh; background: #ededed; &.modal:before { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none; content: ""; background: rgba(0, 0, 0, .8); } &.crop { cursor: crosshair; } &.move { cursor: move; } &.draw { cursor: pointer; } &.text { cursor: text; } &.centered { > canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } } } ================================================ FILE: styles/src/canvas.css ================================================ canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } ================================================ FILE: styles/src/div#frame.css ================================================ div#frame { position: absolute; top: 0; left: 0; display: none; width: 5px; height: 5px; outline: 1000vw solid rgba(0, 0, 0, .8); &.show { display: block; } } ================================================ FILE: styles/src/hint.css ================================================ aside.hint { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; display: none; width: 500px; max-height: 495px; padding: 20px; margin: auto; font-family: "Roboto", sans-serif; background: #F4F3F2; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .08), 0 3px 12px 0 rgba(0, 0, 0, .12); > h1 { padding: 0; margin: 30px 0 0 10px; font-size: 24px; font-weight: 600; } > h2 { padding: 0; margin: 30px 0 0 10px; font-weight: 600; } > ul { padding: 10px 0 0 20px; margin: 0; > li { padding: 0; margin-bottom: 10px; font-size: 14px; line-height: 1.4rem; > span { font-weight: 600; } } } > button { display: inline-block; font-size: .9em; text-transform: uppercase; cursor: pointer; color: #4285f4; background: none; border: none; &.js-close-agree { width: 100%; padding-right: 20px; margin-top: 20px; text-align: right; } &.js-close-hint { position: absolute; top: 10px; right: 5px; display: block; overflow: hidden; width: 40px; height: 32px; text-indent: 40px; cursor: pointer; opacity: .3; &:before, &:after { position: absolute; top: 0; left: 18px; width: 2px; height: 33px; content: ""; background-color: #8C8888; } &:before { transform: rotate(45deg); } &:after { transform: rotate(-45deg); } &:hover { opacity: 1; } } &:focus { outline: none; } } &.open { display: block; } } ================================================ FILE: styles/src/reset.css ================================================ /* stylelint-disable */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { padding: 0; margin: 0; font: inherit; font-size: 100%; vertical-align: baseline; border: 0; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } ================================================ FILE: styles/src/switcher.css ================================================ .switch { position: absolute; right: 46px; bottom: 20px; display: inline-block; width: 50px; height: 25px; > span { position: absolute; top: 9px; left: -106px; width: 107px; } } .switch input {display:none;} .slider { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; bottom: 3px; left: 4px; width: 19px; height: 19px; content: ""; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(24px); -ms-transform: translateX(24px); transform: translateX(24px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } ================================================ FILE: styles/src/textSidebar.css ================================================ form#textSidebar { position: fixed; top: 50%; left: 20px; display: none; width: 310px; min-height: 335px; padding-top: 50px; padding-bottom: 20px; padding-left: 10px; font-family: "Roboto", sans-serif; background: #F4F3F2; box-shadow: 0 14px 28px rgba(0, 0, 0 , .25), 0 10px 10px rgba(0, 0, 0, .22); transform: translateY(-50%); > label { display: block; padding: 0; margin: 20px 0 10px 10px; font-weight: 600; font-size: 20px; } > textarea, > select, > input { display: block; margin-bottom: 30px; margin-left: 10px; } > textarea { width: 280px; resize: vertical; } > button { display: inline-block; font-size: .9em; text-transform: uppercase; cursor: pointer; color: #4285f4; background: none; border: none; &.close-button { position: absolute; top: 10px; right: 5px; display: block; overflow: hidden; width: 40px; height: 32px; text-indent: 40px; cursor: pointer; &:before, &:after { position: absolute; top: 0; left: 18px; width: 2px; height: 33px; content: ""; background-color: #8C8888; } &:before { transform: rotate(45deg); } &:after { transform: rotate(-45deg); } } &:focus { outline: none; } &.deleteText { margin-left: 4px; } } &.show { display: block; } }