├── .gitignore ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── keymaps └── atom-sticker.json ├── lib ├── atom-sticker-view.js ├── atom-sticker.js └── config-schema.json ├── menus └── atom-sticker.json ├── package.json ├── screenshots.jpeg ├── spec ├── atom-sticker-spec.js └── atom-sticker-view-spec.js └── styles └── atom-sticker.less /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | npm-debug.log 3 | node_modules 4 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 0.1.0 - First Release 2 | * Every feature added 3 | * Every bug fixed 4 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2016 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # atom-sticker 2 | 3 | ## a package to make you enjoy your coding with atom, have fun! 4 | 5 | ## Install 6 | 7 | run `apm install atom-sticker` in your terminal, or search `atom-sticker` in the Atom install-panel 8 | 9 | ## Usage 10 | 11 | `alt-cmd-s` 12 | 13 | ## Setup 14 | 15 | Set the desired images or folders from which to show your stickers in the extension settings. 16 | 17 | ## Screenshot (Example) 18 | 19 | ![Atom-Sticker in action!](./screenshots.jpeg) 20 | 21 | ## Remember: Have FUN! 22 | -------------------------------------------------------------------------------- /keymaps/atom-sticker.json: -------------------------------------------------------------------------------- 1 | { 2 | "atom-workspace": { 3 | "alt-cmd-s": "atom-sticker:toggle" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /lib/atom-sticker-view.js: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | export default class AtomStickerView { 4 | 5 | constructor(serializedState) { 6 | // Create sticker message 7 | const message = document.createElement('div'); 8 | message.classList.add('atom-sticker-message'); 9 | message.textContent = 'The Atom-Sticker package is Alive! Have Fun!'; 10 | 11 | // Create sticker image 12 | const sticker = document.createElement('img'); 13 | sticker.classList.add('atom-sticker-image'); 14 | 15 | // Create root element 16 | this.element = document.createElement('div'); 17 | this.element.classList.add('atom-sticker'); 18 | // this.element.appendChild(message); 19 | this.element.appendChild(sticker); 20 | } 21 | 22 | // Returns an object that can be retrieved when package is activated 23 | serialize() {} 24 | 25 | // Tear down any state and detach 26 | destroy() { 27 | this.element.remove(); 28 | } 29 | 30 | getElement() { 31 | return this.element; 32 | } 33 | 34 | } 35 | -------------------------------------------------------------------------------- /lib/atom-sticker.js: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | import AtomStickerSettings from './config-schema' 4 | import AtomStickerView from './atom-sticker-view'; 5 | import { CompositeDisposable } from 'atom'; 6 | 7 | export default { 8 | 9 | Subscriptions: null, 10 | config: AtomStickerSettings, 11 | 12 | AtomStickerView: null, 13 | 14 | ImageDiv: null, 15 | ImageAlbum: [], 16 | ImageIndex: 0, 17 | 18 | activate(state) { 19 | this.AtomStickerView = new AtomStickerView(state.atomStickerViewState); 20 | this.elem = this.AtomStickerView.getElement(); 21 | document.querySelector('.workspace').appendChild(this.elem); 22 | 23 | // Events subscribed to in atom's system can be easily cleaned up with a CompositeDisposable 24 | this.Subscriptions = new CompositeDisposable(); 25 | 26 | // Register command that toggles this view 27 | this.Subscriptions.add(atom.commands.add('atom-workspace', { 28 | 'atom-sticker:toggle': () => this.toggle() 29 | })); 30 | // Register command that chooses another image 31 | this.Subscriptions.add(atom.commands.add('atom-workspace', { 32 | 'atom-sticker:cycle-new': () => this.cycle_new() 33 | })); 34 | 35 | this.ImageDiv = this.elem.querySelector('.atom-sticker-image'); 36 | }, 37 | 38 | deactivate() { 39 | this.Subscriptions.dispose(); 40 | this.AtomStickerView.destroy(); 41 | }, 42 | 43 | serialize() { 44 | return { 45 | atomStickerViewState: this.AtomStickerView.serialize() 46 | }; 47 | }, 48 | 49 | toggle() { 50 | if(this.elem.style.display == 'block') { 51 | this.elem.style.display = 'none'; 52 | } else { 53 | this._loadImages(); 54 | this._setImage(this._indexRelativeTo(0)); 55 | this.elem.style.display = 'block'; 56 | } 57 | 58 | console.log('Atom-Sticker: Toggled['+ this.elem.style.display +']'); 59 | }, 60 | 61 | cycle_new() { 62 | this._setImage(this._indexRelativeTo(1)); 63 | 64 | console.log('AtomSticker: CycledImage[' + this._indexRelativeTo(0) + ']'); 65 | }, 66 | 67 | 68 | 69 | // Helper Functions // --- 70 | _loadImages() { 71 | this.ImageAlbum = [] // Clear old images 72 | 73 | var webstickers = atom.config.get('atom-sticker.stickerLocations'); 74 | for (l in webstickers){ 75 | console.log(webstickers[l]); 76 | this.ImageAlbum.push(webstickers[l]); 77 | } 78 | 79 | var stickersFolder = atom.config.get('atom-sticker.stickerFolder'); 80 | this.__recImgLoad(this.__recImgLoad, this.ImageAlbum, stickersFolder, 0, "png"); 81 | this.__recImgLoad(this.__recImgLoad, this.ImageAlbum, stickersFolder, 0, "gif"); 82 | this.__recImgLoad(this.__recImgLoad, this.ImageAlbum, stickersFolder, 0, "tiff"); 83 | this.__recImgLoad(this.__recImgLoad, this.ImageAlbum, stickersFolder, 0, "svg"); 84 | }, 85 | 86 | _setImage(toIndex){ 87 | this.ImageDiv.src = this.ImageAlbum[toIndex]; 88 | this.ImageDiv.style.opacity = atom.config.get('atom-sticker.stickerOpacity'); 89 | }, 90 | 91 | _indexRelativeTo(modifyer) { 92 | this.ImageIndex = (this.ImageIndex + modifyer) % this.ImageAlbum.length; 93 | return this.ImageIndex 94 | }, 95 | 96 | 97 | 98 | // Helper-Helper Functions // --- 99 | __recImgLoad(_self, imgAlbum, stickersFolder, i, extention){ 100 | var potentialFile = stickersFolder + "\\" + i + "." + extention; 101 | var img = new Image(); 102 | img.src = potentialFile; 103 | img.onload = function() { 104 | console.log(potentialFile); 105 | imgAlbum.push(potentialFile); 106 | _self(_self, imgAlbum, stickersFolder, i+1, "png"); 107 | _self(_self, imgAlbum, stickersFolder, i+1, "gif"); 108 | _self(_self, imgAlbum, stickersFolder, i+1, "tiff"); 109 | _self(_self, imgAlbum, stickersFolder, i+1, "svg"); 110 | }; 111 | } 112 | }; 113 | -------------------------------------------------------------------------------- /lib/config-schema.json: -------------------------------------------------------------------------------- 1 | { 2 | "stickerLocations": { 3 | "title": "Locations from which to source your stickers", 4 | "description": "These can be URLs to files and folders.", 5 | "type": "array", 6 | "default": ["https://upload.wikimedia.org/wikipedia/commons/c/ca/Atom_icon.png","https://vignette.wikia.nocookie.net/kancolle/images/1/15/BB_Nagato_Kai_Ni_541_Full.png"], 7 | "order": 1 8 | }, 9 | "stickerFolder": { 10 | "title": "A folder path containing your 'sticker' images.", 11 | "description": "Absolute path to folder containing: `0.png`, `1.png` ... `n.png`", 12 | "type": "string", 13 | "default": "C:/users/nobody/pictures", 14 | "order": 2 15 | }, 16 | "stickerOpacity": { 17 | "title": "Sticker Opacity", 18 | "description": "This will adjust the see-through-ness of stickers.", 19 | "type": "number", 20 | "default": 1, 21 | "minimum": 0, 22 | "maximum": 1, 23 | "order": 3 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /menus/atom-sticker.json: -------------------------------------------------------------------------------- 1 | { 2 | "context-menu": { 3 | "atom-workspace": [ 4 | { 5 | "label": "Atom-Sticker", 6 | "submenu": [ 7 | { 8 | "label": "Cycle New", 9 | "command": "atom-sticker:cycle-new" 10 | }, 11 | { 12 | "label": "Enable/Disable", 13 | "command": "atom-sticker:toggle" 14 | } 15 | ] 16 | } 17 | ] 18 | }, 19 | "menu": [ 20 | { 21 | "label": "Packages", 22 | "submenu": [ 23 | { 24 | "label": "Atom-Sticker", 25 | "submenu": [ 26 | { 27 | "label": "Enable/Disable", 28 | "command": "atom-sticker:toggle" 29 | }, 30 | { 31 | "label": "Cycle New", 32 | "command": "atom-sticker:cycle-new" 33 | } 34 | ] 35 | } 36 | ] 37 | } 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "atom-sticker", 3 | "main": "./lib/atom-sticker", 4 | "version": "0.5.1", 5 | "description": "A package to help you enjoy coding in atom. Remember: Have fun!", 6 | "keywords": [ 7 | "sticker", 8 | "customize", 9 | "ambiance", 10 | "workspace", 11 | "liven" 12 | ], 13 | "activationCommands": { 14 | "atom-workspace": "atom-sticker:toggle" 15 | }, 16 | "repository": "https://github.com/jobn123/atom-sticker.git", 17 | "license": "MIT", 18 | "engines": { 19 | "atom": ">=1.0.0 <2.0.0" 20 | }, 21 | "dependencies": {} 22 | } 23 | -------------------------------------------------------------------------------- /screenshots.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jobn123/atom-sticker/a6c98e49adb6a90bd8e1a11301bdcb1933917f08/screenshots.jpeg -------------------------------------------------------------------------------- /spec/atom-sticker-spec.js: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | import AtomSticker from '../lib/atom-sticker'; 4 | 5 | // Use the command `window:run-package-specs` (cmd-alt-ctrl-p) to run specs. 6 | // 7 | // To run a specific `it` or `describe` block add an `f` to the front (e.g. `fit` 8 | // or `fdescribe`). Remove the `f` to unfocus the block. 9 | 10 | describe('AtomSticker', () => { 11 | let workspaceElement, activationPromise; 12 | 13 | beforeEach(() => { 14 | workspaceElement = atom.views.getView(atom.workspace); 15 | activationPromise = atom.packages.activatePackage('atom-sticker'); 16 | }); 17 | 18 | describe('when the atom-sticker:toggle event is triggered', () => { 19 | it('hides and shows the modal panel', () => { 20 | // Before the activation event the view is not on the DOM, and no panel 21 | // has been created 22 | expect(workspaceElement.querySelector('.atom-sticker')).not.toExist(); 23 | 24 | // This is an activation event, triggering it will cause the package to be 25 | // activated. 26 | atom.commands.dispatch(workspaceElement, 'atom-sticker:toggle'); 27 | 28 | waitsForPromise(() => { 29 | return activationPromise; 30 | }); 31 | 32 | runs(() => { 33 | expect(workspaceElement.querySelector('.atom-sticker')).toExist(); 34 | 35 | let atomStickerElement = workspaceElement.querySelector('.atom-sticker'); 36 | expect(atomStickerElement).toExist(); 37 | 38 | let atomStickerPanel = atom.workspace.panelForItem(atomStickerElement); 39 | expect(atomStickerPanel.isVisible()).toBe(true); 40 | atom.commands.dispatch(workspaceElement, 'atom-sticker:toggle'); 41 | expect(atomStickerPanel.isVisible()).toBe(false); 42 | }); 43 | }); 44 | 45 | it('hides and shows the view', () => { 46 | // This test shows you an integration test testing at the view level. 47 | 48 | // Attaching the workspaceElement to the DOM is required to allow the 49 | // `toBeVisible()` matchers to work. Anything testing visibility or focus 50 | // requires that the workspaceElement is on the DOM. Tests that attach the 51 | // workspaceElement to the DOM are generally slower than those off DOM. 52 | jasmine.attachToDOM(workspaceElement); 53 | 54 | expect(workspaceElement.querySelector('.atom-sticker')).not.toExist(); 55 | 56 | // This is an activation event, triggering it causes the package to be 57 | // activated. 58 | atom.commands.dispatch(workspaceElement, 'atom-sticker:toggle'); 59 | 60 | waitsForPromise(() => { 61 | return activationPromise; 62 | }); 63 | 64 | runs(() => { 65 | // Now we can test for view visibility 66 | let atomStickerElement = workspaceElement.querySelector('.atom-sticker'); 67 | expect(atomStickerElement).toBeVisible(); 68 | atom.commands.dispatch(workspaceElement, 'atom-sticker:toggle'); 69 | expect(atomStickerElement).not.toBeVisible(); 70 | }); 71 | }); 72 | }); 73 | }); 74 | -------------------------------------------------------------------------------- /spec/atom-sticker-view-spec.js: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | import AtomStickerView from '../lib/atom-sticker-view'; 4 | 5 | describe('AtomStickerView', () => { 6 | it('has one valid test', () => { 7 | expect('life').toBe('easy'); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /styles/atom-sticker.less: -------------------------------------------------------------------------------- 1 | // The ui-variables file is provided by base themes provided by Atom. 2 | // 3 | // See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less 4 | // for a full listing of what's available. 5 | // @import "ui-variables"; 6 | 7 | .atom-sticker { 8 | z-index: 999999; 9 | pointer-events: none; 10 | 11 | display: block; 12 | position: absolute; 13 | bottom: 31px; 14 | right: 11px; 15 | 16 | max-height: 40%; 17 | max-width: 38%; 18 | min-height: 16%; 19 | min-width: 300px; 20 | 21 | overflow: hidden; 22 | } 23 | 24 | .atom-sticker-image { 25 | width: auto; // 26 | height: auto; 27 | max-width: 100%; 28 | max-height: 100%; 29 | } 30 | 31 | .atom-sticker-message { 32 | border-left: 3px inset white; 33 | padding-left: 6px; 34 | background-color: rgba(32, 32, 32, 0.85); 35 | } 36 | --------------------------------------------------------------------------------