├── src ├── app │ ├── modal.component.scss │ ├── root.component.scss │ ├── page-done.component.scss │ ├── browser-support.component.pug │ ├── guard.service.ts │ ├── translate.functions.ts │ ├── page-home.component.scss │ ├── modal.component.pug │ ├── titleize.pipe.ts │ ├── modal.component.ts │ ├── storage.service.ts │ ├── root.component.pug │ ├── interfaces.ts │ ├── page-home.component.ts │ ├── app-routing.module.ts │ ├── root.component.ts │ ├── safe.pipe.ts │ ├── tools.ts │ ├── page-done.component.pug │ ├── browser-support.component.ts │ ├── page-home.component.pug │ ├── app.module.ts │ ├── page-editor.component.scss │ ├── page-editor.component.pug │ ├── renderer.service.ts │ ├── page-done.component.ts │ ├── data-design-processor.class.ts │ ├── postman.service.ts │ ├── artboard.class.ts │ └── bitmapper.class.ts ├── style.scss ├── scss │ ├── bootstrap │ │ ├── mixins │ │ │ ├── _center-block.scss │ │ │ ├── _opacity.scss │ │ │ ├── _size.scss │ │ │ ├── _text-overflow.scss │ │ │ ├── _labels.scss │ │ │ ├── _resize.scss │ │ │ ├── _progress-bar.scss │ │ │ ├── _text-emphasis.scss │ │ │ ├── _reset-filter.scss │ │ │ ├── _nav-divider.scss │ │ │ ├── _background-variant.scss │ │ │ ├── _alerts.scss │ │ │ ├── _tab-focus.scss │ │ │ ├── _nav-vertical-align.scss │ │ │ ├── _reset-text.scss │ │ │ ├── _border-radius.scss │ │ │ ├── _pagination.scss │ │ │ ├── _responsive-visibility.scss │ │ │ ├── _panels.scss │ │ │ ├── _hide-text.scss │ │ │ ├── _clearfix.scss │ │ │ ├── _list-group.scss │ │ │ ├── _table-row.scss │ │ │ ├── _image.scss │ │ │ ├── _buttons.scss │ │ │ ├── _grid-framework.scss │ │ │ ├── _forms.scss │ │ │ ├── _grid.scss │ │ │ ├── _gradients.scss │ │ │ └── _vendor-prefixes.scss │ │ ├── _wells.scss │ │ ├── _responsive-embed.scss │ │ ├── _breadcrumbs.scss │ │ ├── _close.scss │ │ ├── _component-animations.scss │ │ ├── _utilities.scss │ │ ├── _thumbnails.scss │ │ ├── _pager.scss │ │ ├── _mixins.scss │ │ ├── _media.scss │ │ ├── _jumbotron.scss │ │ ├── _labels.scss │ │ ├── _badges.scss │ │ ├── _code.scss │ │ ├── _grid.scss │ │ ├── _alerts.scss │ │ ├── _progress-bars.scss │ │ ├── _pagination.scss │ │ ├── _print.scss │ │ ├── _tooltip.scss │ │ ├── _list-group.scss │ │ ├── _scaffolding.scss │ │ ├── _popovers.scss │ │ ├── _modals.scss │ │ ├── _buttons.scss │ │ ├── _input-groups.scss │ │ ├── _responsive-utilities.scss │ │ ├── _tables.scss │ │ ├── _dropdowns.scss │ │ ├── _navs.scss │ │ ├── _button-groups.scss │ │ ├── _carousel.scss │ │ └── _type.scss │ ├── _mixins.scss │ ├── _bootstrap.scss │ └── _style.scss ├── main.ts ├── config-sample.ts ├── config.ts ├── i18n │ ├── en.json │ └── id.json ├── index.pug └── assets │ └── no-preview.svg ├── @types ├── rtltextarea │ └── index.d.ts └── rasterizehtml │ └── index.d.ts ├── .vscode └── settings.json ├── _redirects ├── templates └── new-component.component.ts.template ├── tsconfig.json ├── CODESTYLE.md ├── .gitignore ├── package.json └── README.md /src/app/modal.component.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/style.scss: -------------------------------------------------------------------------------- 1 | @import 'scss/style'; -------------------------------------------------------------------------------- /@types/rtltextarea/index.d.ts: -------------------------------------------------------------------------------- 1 | export as namespace RTLTextArea; -------------------------------------------------------------------------------- /src/app/root.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | min-height: 100vh; 3 | display: flex; 4 | flex-direction: column; 5 | } 6 | 7 | .p-footer { 8 | color: #586069; 9 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | "editor.renderIndentGuides": true, 4 | "jshint.enable": false 5 | } -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_center-block.scss: -------------------------------------------------------------------------------- 1 | // Center-align a block level element 2 | 3 | @mixin center-block() { 4 | display: block; 5 | margin-left: auto; 6 | margin-right: auto; 7 | } 8 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_opacity.scss: -------------------------------------------------------------------------------- 1 | // Opacity 2 | 3 | @mixin opacity($opacity) { 4 | opacity: $opacity; 5 | // IE8 filter 6 | $opacity-ie: ($opacity * 100); 7 | filter: alpha(opacity=$opacity-ie); 8 | } 9 | -------------------------------------------------------------------------------- /src/app/page-done.component.scss: -------------------------------------------------------------------------------- 1 | .col-result { 2 | margin-top: -180px; 3 | min-height: 200px; 4 | } 5 | 6 | .panel-actions { 7 | margin-top: 20px; 8 | } 9 | 10 | .ending-words { 11 | margin-top: 10px; 12 | } -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_size.scss: -------------------------------------------------------------------------------- 1 | // Sizing shortcuts 2 | 3 | @mixin size($width, $height) { 4 | width: $width; 5 | height: $height; 6 | } 7 | 8 | @mixin square($size) { 9 | @include size($size, $size); 10 | } 11 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_text-overflow.scss: -------------------------------------------------------------------------------- 1 | // Text overflow 2 | // Requires inline-block or block for proper styling 3 | 4 | @mixin text-overflow() { 5 | overflow: hidden; 6 | text-overflow: ellipsis; 7 | white-space: nowrap; 8 | } 9 | -------------------------------------------------------------------------------- /src/scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Cross child component styling in Angular 4+ 2 | // Reference: https://medium.com/google-developer-experts/angular-advanced-styling-guide-v4-f0765616e635 3 | @mixin angular-deep { 4 | #{':host /deep/'} { 5 | @content 6 | }; 7 | } 8 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_labels.scss: -------------------------------------------------------------------------------- 1 | // Labels 2 | 3 | @mixin label-variant($color) { 4 | background-color: $color; 5 | 6 | &[href] { 7 | &:hover, 8 | &:focus { 9 | background-color: darken($color, 10%); 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_resize.scss: -------------------------------------------------------------------------------- 1 | // Resize anything 2 | 3 | @mixin resizable($direction) { 4 | resize: $direction; // Options: horizontal, vertical, both 5 | overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` 6 | } 7 | -------------------------------------------------------------------------------- /_redirects: -------------------------------------------------------------------------------- 1 | # These rules will change if you change your site’s custom domains or HTTPS settings 2 | # Copy this file to dist for netlify redirection 3 | 4 | # Redirect default Netlify subdomain to primary domain 5 | https://posteregg.netlify.com/* https://posteregg.com/:splat 301! 6 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_progress-bar.scss: -------------------------------------------------------------------------------- 1 | // Progress bars 2 | 3 | @mixin progress-bar-variant($color) { 4 | background-color: $color; 5 | 6 | // Deprecated parent class requirement as of v3.2.0 7 | .progress-striped & { 8 | @include gradient-striped; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_text-emphasis.scss: -------------------------------------------------------------------------------- 1 | // Typography 2 | 3 | // [converter] $parent hack 4 | @mixin text-emphasis-variant($parent, $color) { 5 | #{$parent} { 6 | color: $color; 7 | } 8 | a#{$parent}:hover, 9 | a#{$parent}:focus { 10 | color: darken($color, 10%); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_reset-filter.scss: -------------------------------------------------------------------------------- 1 | // Reset filters for IE 2 | // 3 | // When you need to remove a gradient background, do not forget to use this to reset 4 | // the IE filter for IE9 and below. 5 | 6 | @mixin reset-filter() { 7 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 8 | } 9 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_nav-divider.scss: -------------------------------------------------------------------------------- 1 | // Horizontal dividers 2 | // 3 | // Dividers (basically an hr) within dropdowns and nav lists 4 | 5 | @mixin nav-divider($color: #e5e5e5) { 6 | height: 1px; 7 | margin: (($line-height-computed / 2) - 1) 0; 8 | overflow: hidden; 9 | background-color: $color; 10 | } 11 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import 'core-js'; 2 | import 'zone.js/dist/zone.js'; 3 | 4 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 5 | import { AppModule } from './app/app.module'; 6 | import { enableProdMode } from '@angular/core'; 7 | 8 | enableProdMode(); 9 | platformBrowserDynamic().bootstrapModule(AppModule); -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_background-variant.scss: -------------------------------------------------------------------------------- 1 | // Contextual backgrounds 2 | 3 | // [converter] $parent hack 4 | @mixin bg-variant($parent, $color) { 5 | #{$parent} { 6 | background-color: $color; 7 | } 8 | a#{$parent}:hover, 9 | a#{$parent}:focus { 10 | background-color: darken($color, 10%); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /templates/new-component.component.ts.template: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | moduleId: module.id, 5 | selector: 'compNameDashed', 6 | templateUrl: './app/compNameDashed.component.html', 7 | styleUrls: ['./app/compNameDashed.component.css'], 8 | }) 9 | export class compNameCapitalizedComponent { } 10 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_alerts.scss: -------------------------------------------------------------------------------- 1 | // Alerts 2 | 3 | @mixin alert-variant($background, $border, $text-color) { 4 | background-color: $background; 5 | border-color: $border; 6 | color: $text-color; 7 | 8 | hr { 9 | border-top-color: darken($border, 5%); 10 | } 11 | .alert-link { 12 | color: darken($text-color, 10%); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/app/browser-support.component.pug: -------------------------------------------------------------------------------- 1 | .alert.alert-danger(*ngIf="!browserSupport") 2 | | #[strong Unsupported Browser:] This web app is only supported on the recent #[a(href="https://www.google.com/chrome/browser/desktop/index.html") Google Chrome], #[a(href="http://www.opera.com/download") Opera], and #[a(href="https://www.mozilla.org/en-US/firefox/new/") Firefox] browsers on desktop. -------------------------------------------------------------------------------- /src/app/guard.service.ts: -------------------------------------------------------------------------------- 1 | import { CanDeactivate } from '@angular/router'; 2 | import { Injectable } from '@angular/core'; 3 | 4 | @Injectable() 5 | export class Guard implements CanDeactivate { 6 | canDeactivate(target: any) { 7 | if (target.guard) { 8 | target.modal.show(); 9 | return false; 10 | } 11 | return true; 12 | } 13 | } -------------------------------------------------------------------------------- /src/app/translate.functions.ts: -------------------------------------------------------------------------------- 1 | import { Http } from '@angular/http'; 2 | import { HttpClient } from '@angular/common/http'; 3 | import { HttpModule } from '@angular/http'; 4 | 5 | import { TranslateHttpLoader } from '@ngx-translate/http-loader'; 6 | 7 | export function createTranslateLoader(http: HttpClient) { 8 | return new TranslateHttpLoader(http, './i18n/', '.json'); 9 | } 10 | 11 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_tab-focus.scss: -------------------------------------------------------------------------------- 1 | // WebKit-style focus 2 | 3 | @mixin tab-focus() { 4 | // WebKit-specific. Other browsers will keep their default outline style. 5 | // (Initially tried to also force default via `outline: initial`, 6 | // but that seems to erroneously remove the outline in Firefox altogether.) 7 | outline: 5px auto -webkit-focus-ring-color; 8 | outline-offset: -2px; 9 | } 10 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_nav-vertical-align.scss: -------------------------------------------------------------------------------- 1 | // Navbar vertical align 2 | // 3 | // Vertically center elements in the navbar. 4 | // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin. 5 | 6 | @mixin navbar-vertical-align($element-height) { 7 | margin-top: (($navbar-height - $element-height) / 2); 8 | margin-bottom: (($navbar-height - $element-height) / 2); 9 | } 10 | -------------------------------------------------------------------------------- /src/app/page-home.component.scss: -------------------------------------------------------------------------------- 1 | .pack-title { 2 | font-size: 32px; 3 | color: #263A5E; 4 | font-weight: bold; 5 | margin-bottom: 5px; 6 | } 7 | 8 | .pack-description { 9 | font-size: 18px; 10 | color: #99B1BD; 11 | } 12 | 13 | .pack-heading { 14 | margin-bottom: 15px; 15 | } 16 | 17 | .pack-content { 18 | margin-bottom: 30px; 19 | } 20 | 21 | .img-responsive { 22 | left: 0; 23 | right: 0; 24 | margin: auto; 25 | } -------------------------------------------------------------------------------- /src/app/modal.component.pug: -------------------------------------------------------------------------------- 1 | .modal.fade( 2 | (click)='hide()', 3 | tabindex='-1', 4 | [ngClass]="{'in': visibleAnimate}", 5 | [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}" 6 | ) 7 | .modal-dialog((click)="$event.stopPropagation();") 8 | .modal-content 9 | .modal-body 10 | ng-content(select='.content-body') 11 | .modal-footer 12 | ng-content(select='.content-footer') -------------------------------------------------------------------------------- /src/config-sample.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Config file 3 | * Duplicate this file and rename it to config.ts. 4 | */ 5 | 6 | export const config = { 7 | 8 | // Watermark to be used in the poster 9 | watermarkLabel: "Poster Egg", 10 | 11 | // Google Analytics ID 12 | googleAnalytics: "X", 13 | 14 | // Url of design data, including design-packs and design-assets 15 | designDataApi: "http://localhost:60572/data", 16 | 17 | // Set language, e.g. en, id 18 | language: "en" 19 | } -------------------------------------------------------------------------------- /@types/rasterizehtml/index.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Type definitions for rasterizehtml 0.1 3 | * Project: Poster Egg 4 | * Definitions by: Hernawan Fa'iz Abdillah 5 | */ 6 | 7 | export as namespace rasterizehtml; 8 | 9 | export function drawDocument ( 10 | url: string, 11 | canvas?: any, 12 | options?: any 13 | ) : any; 14 | 15 | export function drawURL ( 16 | url: string, 17 | canvas?: any, 18 | options?: any 19 | ) : any; 20 | 21 | export function drawHTML ( 22 | html: any, 23 | canvas?: any, 24 | options?: any 25 | ) : any; 26 | 27 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_reset-text.scss: -------------------------------------------------------------------------------- 1 | @mixin reset-text() { 2 | font-family: $font-family-base; 3 | // We deliberately do NOT reset font-size. 4 | font-style: normal; 5 | font-weight: normal; 6 | letter-spacing: normal; 7 | line-break: auto; 8 | line-height: $line-height-base; 9 | text-align: left; // Fallback for where `start` is not supported 10 | text-align: start; 11 | text-decoration: none; 12 | text-shadow: none; 13 | text-transform: none; 14 | white-space: normal; 15 | word-break: normal; 16 | word-spacing: normal; 17 | word-wrap: normal; 18 | } 19 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_border-radius.scss: -------------------------------------------------------------------------------- 1 | // Single side border-radius 2 | 3 | @mixin border-top-radius($radius) { 4 | border-top-right-radius: $radius; 5 | border-top-left-radius: $radius; 6 | } 7 | @mixin border-right-radius($radius) { 8 | border-bottom-right-radius: $radius; 9 | border-top-right-radius: $radius; 10 | } 11 | @mixin border-bottom-radius($radius) { 12 | border-bottom-right-radius: $radius; 13 | border-bottom-left-radius: $radius; 14 | } 15 | @mixin border-left-radius($radius) { 16 | border-bottom-left-radius: $radius; 17 | border-top-left-radius: $radius; 18 | } 19 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_pagination.scss: -------------------------------------------------------------------------------- 1 | // Pagination 2 | 3 | @mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { 4 | > li { 5 | > a, 6 | > span { 7 | padding: $padding-vertical $padding-horizontal; 8 | font-size: $font-size; 9 | line-height: $line-height; 10 | } 11 | &:first-child { 12 | > a, 13 | > span { 14 | @include border-left-radius($border-radius); 15 | } 16 | } 17 | &:last-child { 18 | > a, 19 | > span { 20 | @include border-right-radius($border-radius); 21 | } 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_responsive-visibility.scss: -------------------------------------------------------------------------------- 1 | // Responsive utilities 2 | 3 | // 4 | // More easily include all the states for responsive-utilities.less. 5 | // [converter] $parent hack 6 | @mixin responsive-visibility($parent) { 7 | #{$parent} { 8 | display: block !important; 9 | } 10 | table#{$parent} { display: table !important; } 11 | tr#{$parent} { display: table-row !important; } 12 | th#{$parent}, 13 | td#{$parent} { display: table-cell !important; } 14 | } 15 | 16 | // [converter] $parent hack 17 | @mixin responsive-invisibility($parent) { 18 | #{$parent} { 19 | display: none !important; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": [ 3 | "./src/**/*" 4 | ], 5 | "compilerOptions": { 6 | "baseUrl": "./", 7 | "paths": { 8 | "rasterizehtml": [ "@types/rasterizehtml/index.d.ts", "node_modules/rasterizehtml/dist/rasterizeHTML" ] 9 | }, 10 | "noImplicitAny": true, 11 | "target": "es5", 12 | "emitDecoratorMetadata": true, 13 | "experimentalDecorators": true, 14 | "lib": [ 15 | "es2015", 16 | "dom" 17 | ], 18 | "allowSyntheticDefaultImports": true, 19 | "noEmitOnError": false, 20 | "outDir": "dist-tsc" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_panels.scss: -------------------------------------------------------------------------------- 1 | // Panels 2 | 3 | @mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) { 4 | border-color: $border; 5 | 6 | & > .panel-heading { 7 | color: $heading-text-color; 8 | background-color: $heading-bg-color; 9 | border-color: $heading-border; 10 | 11 | + .panel-collapse > .panel-body { 12 | border-top-color: $border; 13 | } 14 | .badge { 15 | color: $heading-bg-color; 16 | background-color: $heading-text-color; 17 | } 18 | } 19 | & > .panel-footer { 20 | + .panel-collapse > .panel-body { 21 | border-bottom-color: $border; 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_wells.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Wells 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base class 7 | .well { 8 | min-height: 20px; 9 | padding: 19px; 10 | margin-bottom: 20px; 11 | background-color: $well-bg; 12 | border: 1px solid $well-border; 13 | border-radius: $border-radius-base; 14 | @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); 15 | blockquote { 16 | border-color: #ddd; 17 | border-color: rgba(0,0,0,.15); 18 | } 19 | } 20 | 21 | // Sizes 22 | .well-lg { 23 | padding: 24px; 24 | border-radius: $border-radius-large; 25 | } 26 | .well-sm { 27 | padding: 9px; 28 | border-radius: $border-radius-small; 29 | } 30 | -------------------------------------------------------------------------------- /CODESTYLE.md: -------------------------------------------------------------------------------- 1 | # Coding Style 2 | 3 | Under construction ... 4 | 5 | ## TypeScript 6 | 7 | ### Import order 8 | 9 | 1. Config 10 | 1. Interfaces 11 | 1. Angular vendor 12 | 1. Other vendors 13 | 1. Modules 14 | 1. Services 15 | 1. Pipes 16 | 1. Classes 17 | 1. Components 18 | 1. Tools 19 | 20 | ### Bad vs Good 21 | 22 | Bad : 23 | 24 | ``` 25 | import { HttpModule, Http } from '@angular/http'; 26 | ``` 27 | 28 | Bad (unsorted) : 29 | 30 | ``` 31 | import { HttpModule } from '@angular/http'; 32 | import { Http } from '@angular/http'; 33 | ``` 34 | 35 | Good (sorted alphabetically) : 36 | 37 | ``` 38 | import { Http } from '@angular/http'; 39 | import { HttpModule } from '@angular/http'; 40 | ``` 41 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_hide-text.scss: -------------------------------------------------------------------------------- 1 | // CSS image replacement 2 | // 3 | // Heads up! v3 launched with only `.hide-text()`, but per our pattern for 4 | // mixins being reused as classes with the same name, this doesn't hold up. As 5 | // of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. 6 | // 7 | // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 8 | 9 | // Deprecated as of v3.0.1 (has been removed in v4) 10 | @mixin hide-text() { 11 | font: 0/0 a; 12 | color: transparent; 13 | text-shadow: none; 14 | background-color: transparent; 15 | border: 0; 16 | } 17 | 18 | // New mixin to use as of v3.0.1 19 | @mixin text-hide() { 20 | @include hide-text; 21 | } 22 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_responsive-embed.scss: -------------------------------------------------------------------------------- 1 | // Embeds responsive 2 | // 3 | // Credit: Nicolas Gallagher and SUIT CSS. 4 | 5 | .embed-responsive { 6 | position: relative; 7 | display: block; 8 | height: 0; 9 | padding: 0; 10 | overflow: hidden; 11 | 12 | .embed-responsive-item, 13 | iframe, 14 | embed, 15 | object, 16 | video { 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | bottom: 0; 21 | height: 100%; 22 | width: 100%; 23 | border: 0; 24 | } 25 | } 26 | 27 | // Modifier class for 16:9 aspect ratio 28 | .embed-responsive-16by9 { 29 | padding-bottom: 56.25%; 30 | } 31 | 32 | // Modifier class for 4:3 aspect ratio 33 | .embed-responsive-4by3 { 34 | padding-bottom: 75%; 35 | } 36 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // Clearfix 2 | // 3 | // For modern browsers 4 | // 1. The space content is one way to avoid an Opera bug when the 5 | // contenteditable attribute is included anywhere else in the document. 6 | // Otherwise it causes space to appear at the top and bottom of elements 7 | // that are clearfixed. 8 | // 2. The use of `table` rather than `block` is only necessary if using 9 | // `:before` to contain the top-margins of child elements. 10 | // 11 | // Source: http://nicolasgallagher.com/micro-clearfix-hack/ 12 | 13 | @mixin clearfix() { 14 | &:before, 15 | &:after { 16 | content: " "; // 1 17 | display: table; // 2 18 | } 19 | &:after { 20 | clear: both; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | 39 | # Others 40 | dist 41 | dist-tsc 42 | # src/config.ts -------------------------------------------------------------------------------- /src/app/titleize.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe } from '@angular/core'; 2 | import { PipeTransform } from '@angular/core'; 3 | 4 | @Pipe({ name: 'titleize' }) 5 | export class TitleizePipe implements PipeTransform { 6 | 7 | transform(value: any) { 8 | if (value) { 9 | let string = value; 10 | string = string.replace(/\w\S*/g, (txt: string) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()); 11 | 12 | // Exceptions 13 | let replaceDict: any = { 14 | "And": "and", 15 | "Dan": "dan" 16 | } 17 | 18 | Object.keys(replaceDict).forEach(key => { 19 | string = string.replace(key, replaceDict[key]) 20 | }); 21 | 22 | return string; 23 | } 24 | return value; 25 | } 26 | 27 | } 28 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_breadcrumbs.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Breadcrumbs 3 | // -------------------------------------------------- 4 | 5 | 6 | .breadcrumb { 7 | padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal; 8 | margin-bottom: $line-height-computed; 9 | list-style: none; 10 | background-color: $breadcrumb-bg; 11 | border-radius: $border-radius-base; 12 | 13 | > li { 14 | display: inline-block; 15 | 16 | + li:before { 17 | // [converter] Workaround for https://github.com/sass/libsass/issues/1115 18 | $nbsp: "\00a0"; 19 | content: "#{$breadcrumb-separator}#{$nbsp}"; // Unicode space added since inline-block means non-collapsing white-space 20 | padding: 0 5px; 21 | color: $breadcrumb-color; 22 | } 23 | } 24 | 25 | > .active { 26 | color: $breadcrumb-active-color; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_list-group.scss: -------------------------------------------------------------------------------- 1 | // List Groups 2 | 3 | @mixin list-group-item-variant($state, $background, $color) { 4 | .list-group-item-#{$state} { 5 | color: $color; 6 | background-color: $background; 7 | 8 | // [converter] extracted a&, button& to a.list-group-item-#{$state}, button.list-group-item-#{$state} 9 | } 10 | 11 | a.list-group-item-#{$state}, 12 | button.list-group-item-#{$state} { 13 | color: $color; 14 | 15 | .list-group-item-heading { 16 | color: inherit; 17 | } 18 | 19 | &:hover, 20 | &:focus { 21 | color: $color; 22 | background-color: darken($background, 5%); 23 | } 24 | &.active, 25 | &.active:hover, 26 | &.active:focus { 27 | color: #fff; 28 | background-color: $color; 29 | border-color: $color; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/app/modal.component.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { Component } from '@angular/core'; 3 | import { OnInit } from '@angular/core'; 4 | import { ViewChild } from '@angular/core'; 5 | import { ViewEncapsulation } from '@angular/core'; 6 | 7 | import * as tool from './tools'; 8 | 9 | @Component({ 10 | selector: 'modal', 11 | templateUrl: '/app/modal.component.html', 12 | styleUrls: ['/app/modal.component.css'], 13 | }) 14 | export class ModalComponent { 15 | public visible = false; 16 | private visibleAnimate = false; 17 | 18 | public show(): void { 19 | this.visible = true; 20 | setTimeout(() => this.visibleAnimate = true); 21 | } 22 | 23 | public hide(): void { 24 | this.visibleAnimate = false; 25 | setTimeout(() => this.visible = false, 150); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_table-row.scss: -------------------------------------------------------------------------------- 1 | // Tables 2 | 3 | @mixin table-row-variant($state, $background) { 4 | // Exact selectors below required to override `.table-striped` and prevent 5 | // inheritance to nested tables. 6 | .table > thead > tr, 7 | .table > tbody > tr, 8 | .table > tfoot > tr { 9 | > td.#{$state}, 10 | > th.#{$state}, 11 | &.#{$state} > td, 12 | &.#{$state} > th { 13 | background-color: $background; 14 | } 15 | } 16 | 17 | // Hover states for `.table-hover` 18 | // Note: this is not available for cells or rows within `thead` or `tfoot`. 19 | .table-hover > tbody > tr { 20 | > td.#{$state}:hover, 21 | > th.#{$state}:hover, 22 | &.#{$state}:hover > td, 23 | &:hover > .#{$state}, 24 | &.#{$state}:hover > th { 25 | background-color: darken($background, 5%); 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/app/storage.service.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Save data temporarily to move between pages 3 | * Put StorageService in app.module to make it singleton between different pages/routes 4 | */ 5 | 6 | export class StorageService { 7 | 8 | private data: any = {}; 9 | 10 | constructor() { } 11 | 12 | deleteData(key: string): void { 13 | delete this.data[key]; 14 | } 15 | 16 | hasData(key: string): boolean { 17 | return this.data.hasOwnProperty(key); 18 | } 19 | 20 | setData(key: string, data: any): void { 21 | this.data[key] = data; 22 | } 23 | 24 | getData(key: string): any { 25 | if(this.data.hasOwnProperty(key)) { 26 | return this.data[key]; 27 | } else { 28 | return null; 29 | } 30 | } 31 | 32 | getAllData(): any { 33 | return this.data; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/app/root.component.pug: -------------------------------------------------------------------------------- 1 | //- nav.navbar.navbar-default 2 | //- .container-fluid 3 | //- .navbar-header 4 | //- a.navbar-brand(routerLink="/") {{ "brand" | translate }} 5 | //- .collapse.navbar-collapse 6 | //- ul.nav.navbar-nav 7 | //- ul.nav.navbar-nav.navbar-right 8 | 9 | router-outlet 10 | .flex-1 11 | .container-fluid.container-footer 12 | .row 13 | .col-xs-12.text-center 14 | p.p-footer. 15 | {{ "brand" | translate }} is made by #[a(href="https://github.com/echamudi", target="_blank") Ezzat Chamudi], licensed under #[a(href="http://www.gnu.org/licenses/agpl-3.0.html", target="_blank") AGPLv3]. Fork me on #[a(href="https://github.com/echamudi/poster-egg", target="_blank") GitHub]. -------------------------------------------------------------------------------- /src/app/interfaces.ts: -------------------------------------------------------------------------------- 1 | export interface DesignProperty { 2 | pack?: string, 3 | label?: string, 4 | value?: any, 5 | binder?: string, // Same as objectKey, used for Array in designPropertiesArray 6 | 7 | // Input type 8 | input: "text" | "textbox" | "range" | "radiobuttons" | "image" | "separator", 9 | 10 | // In range type : max and min value 11 | // In text type : max and min letters 12 | min?: number, 13 | max?: number, 14 | 15 | // In range type : step differences 16 | step?: number, 17 | 18 | // In radiobuttons type : list of options 19 | options?: string[], 20 | 21 | _objectKey?: string 22 | } 23 | 24 | export interface DesignProperties { 25 | [key: string]: DesignProperty 26 | } 27 | 28 | // declare global { 29 | // interface NodeList { 30 | // forEach?: (handler: Function) => void; 31 | // } 32 | // } 33 | 34 | declare global { 35 | interface Window { 36 | ga?: any; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_close.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Close icons 3 | // -------------------------------------------------- 4 | 5 | 6 | .close { 7 | float: right; 8 | font-size: ($font-size-base * 1.5); 9 | font-weight: $close-font-weight; 10 | line-height: 1; 11 | color: $close-color; 12 | text-shadow: $close-text-shadow; 13 | @include opacity(.2); 14 | 15 | &:hover, 16 | &:focus { 17 | color: $close-color; 18 | text-decoration: none; 19 | cursor: pointer; 20 | @include opacity(.5); 21 | } 22 | 23 | // [converter] extracted button& to button.close 24 | } 25 | 26 | // Additional properties for button version 27 | // iOS requires the button element instead of an anchor tag. 28 | // If you want the anchor version, it requires `href="#"`. 29 | // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile 30 | button.close { 31 | padding: 0; 32 | cursor: pointer; 33 | background: transparent; 34 | border: 0; 35 | -webkit-appearance: none; 36 | } 37 | -------------------------------------------------------------------------------- /src/config.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Config file 3 | * Check config-sample.ts for default values. 4 | */ 5 | 6 | let language: string; 7 | let watermarkLabel: string = "Poster Egg"; 8 | let googleAnalytics: string = "X"; 9 | 10 | window.document.title = "Poster Egg"; 11 | 12 | let idHostnames: string[] = [ 13 | "www.desainmu.com", 14 | "desainmu.com", 15 | "beta.desainmu.com", 16 | "id-posteregg.netlify.com", 17 | "id.posteregg.com" 18 | ]; 19 | 20 | if (idHostnames.indexOf(window.location.hostname) > -1) { 21 | language = "id"; 22 | googleAnalytics = "UA-57805922-5"; 23 | } else { 24 | language = "en"; 25 | googleAnalytics = "UA-57805922-6"; 26 | } 27 | 28 | export const config = { 29 | 30 | watermarkLabel: watermarkLabel, 31 | 32 | googleAnalytics: googleAnalytics, 33 | 34 | // designDataApi: "http://localhost:60572/data", 35 | // designDataApi: "https://echamudi.github.io/poster-egg-data-server/", 36 | designDataApi: "/data", 37 | 38 | language: language 39 | } -------------------------------------------------------------------------------- /src/scss/bootstrap/_component-animations.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Component animations 3 | // -------------------------------------------------- 4 | 5 | // Heads up! 6 | // 7 | // We don't use the `.opacity()` mixin here since it causes a bug with text 8 | // fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552. 9 | 10 | .fade { 11 | opacity: 0; 12 | @include transition(opacity .15s linear); 13 | &.in { 14 | opacity: 1; 15 | } 16 | } 17 | 18 | .collapse { 19 | display: none; 20 | 21 | &.in { display: block; } 22 | // [converter] extracted tr&.in to tr.collapse.in 23 | // [converter] extracted tbody&.in to tbody.collapse.in 24 | } 25 | 26 | tr.collapse.in { display: table-row; } 27 | 28 | tbody.collapse.in { display: table-row-group; } 29 | 30 | .collapsing { 31 | position: relative; 32 | height: 0; 33 | overflow: hidden; 34 | @include transition-property(height, visibility); 35 | @include transition-duration(.35s); 36 | @include transition-timing-function(ease); 37 | } 38 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_utilities.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Utility classes 3 | // -------------------------------------------------- 4 | 5 | 6 | // Floats 7 | // ------------------------- 8 | 9 | .clearfix { 10 | @include clearfix; 11 | } 12 | .center-block { 13 | @include center-block; 14 | } 15 | .pull-right { 16 | float: right !important; 17 | } 18 | .pull-left { 19 | float: left !important; 20 | } 21 | 22 | 23 | // Toggling content 24 | // ------------------------- 25 | 26 | // Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1 27 | .hide { 28 | display: none !important; 29 | } 30 | .show { 31 | display: block !important; 32 | } 33 | .invisible { 34 | visibility: hidden; 35 | } 36 | .text-hide { 37 | @include text-hide; 38 | } 39 | 40 | 41 | // Hide from screenreaders and browsers 42 | // 43 | // Credit: HTML5 Boilerplate 44 | 45 | .hidden { 46 | display: none !important; 47 | } 48 | 49 | 50 | // For Affix plugin 51 | // ------------------------- 52 | 53 | .affix { 54 | position: fixed; 55 | } 56 | -------------------------------------------------------------------------------- /src/i18n/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "brand": "Poster Egg", 3 | 4 | "cancel": "cancel", 5 | "choose this design": "choose this design", 6 | "choose your design style": "choose your design style", 7 | "discard and exit": "discard and exit", 8 | "discard": "discard", 9 | "don't save": "don't save", 10 | "download and exit": "download and exit", 11 | "download": "download", 12 | "edit again": "edit again", 13 | "exit": "exit", 14 | "options": "options", 15 | "processing": "processing", 16 | "save": "save", 17 | 18 | "Are you sure to exit without downloading the poster?": "Are you sure to exit without downloading it?", 19 | "Do you want to save the changes made to the poster?": "Do you want to save the changes made to the poster?", 20 | "Thanks for using Poster Egg.": "Thanks for using Poster Egg.", 21 | "Your changes will be lost if you don’t download it.": "Your changes will be lost if you don’t download it.", 22 | "Your changes will be lost if you don’t save them.": "Your changes will be lost if you don’t save them." 23 | } -------------------------------------------------------------------------------- /src/scss/bootstrap/_thumbnails.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Thumbnails 3 | // -------------------------------------------------- 4 | 5 | 6 | // Mixin and adjust the regular image class 7 | .thumbnail { 8 | display: block; 9 | padding: $thumbnail-padding; 10 | margin-bottom: $line-height-computed; 11 | line-height: $line-height-base; 12 | background-color: $thumbnail-bg; 13 | border: 1px solid $thumbnail-border; 14 | border-radius: $thumbnail-border-radius; 15 | @include transition(border .2s ease-in-out); 16 | 17 | > img, 18 | a > img { 19 | @include img-responsive; 20 | margin-left: auto; 21 | margin-right: auto; 22 | } 23 | 24 | // [converter] extracted a&:hover, a&:focus, a&.active to a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active 25 | 26 | // Image captions 27 | .caption { 28 | padding: $thumbnail-caption-padding; 29 | color: $thumbnail-caption-color; 30 | } 31 | } 32 | 33 | // Add a hover state for linked versions only 34 | a.thumbnail:hover, 35 | a.thumbnail:focus, 36 | a.thumbnail.active { 37 | border-color: $link-color; 38 | } 39 | -------------------------------------------------------------------------------- /src/app/page-home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { OnInit } from '@angular/core'; 3 | 4 | import { TranslateService } from '@ngx-translate/core'; 5 | 6 | import { PostmanService } from './postman.service'; 7 | import { StorageService } from './storage.service'; 8 | 9 | @Component({ 10 | moduleId: module.id, 11 | selector: 'app-page-home', 12 | templateUrl: './app/page-home.component.html', 13 | styleUrls: ['./app/page-home.component.css'], 14 | providers: [ 15 | PostmanService, 16 | ] 17 | }) 18 | export class PageHomeComponent { 19 | 20 | private packs: any[]; 21 | 22 | constructor( 23 | private postmanService: PostmanService, 24 | private translate: TranslateService 25 | ) { } 26 | 27 | ngOnInit() { 28 | this.postmanService.getAllPacks().then(data => { 29 | this.packs = data; 30 | }); 31 | } 32 | 33 | getDesignThumbnail(packID: string, designID: string): string { 34 | return this.postmanService.getDesignThumbnail(packID, designID); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/i18n/id.json: -------------------------------------------------------------------------------- 1 | { 2 | "brand": "Poster Egg", 3 | 4 | "cancel": "batal", 5 | "choose this design": "pilih desain ini", 6 | "choose your design style": "pilih gaya desainmu", 7 | "discard and exit": "buang dan keluar", 8 | "discard": "buang desain", 9 | "don't save": "jangan simpan", 10 | "download and exit": "download dan keluar", 11 | "download": "download", 12 | "edit again": "edit kembali", 13 | "exit": "keluar", 14 | "options": "opsi", 15 | "processing": "sedang memproses", 16 | "save": "simpan", 17 | 18 | "Are you sure to exit without downloading the poster?": "Apakah kamu mau keluar tanpa mendownload poster ini?", 19 | "Do you want to save the changes made to the poster?": "Apakah kamu mau menyimpan poster ini?", 20 | "Thanks for using Poster Egg.": "Terima kasih telah menggunakan Poster Egg.", 21 | "Your changes will be lost if you don’t download it.": "Poster akan hilang jika kamu tidak mendownloadnya.", 22 | "Your changes will be lost if you don’t save them.": "Hasil editan akan hilang jika kamu tidak menyimpan poster ini." 23 | } -------------------------------------------------------------------------------- /src/scss/bootstrap/_pager.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Pager pagination 3 | // -------------------------------------------------- 4 | 5 | 6 | .pager { 7 | padding-left: 0; 8 | margin: $line-height-computed 0; 9 | list-style: none; 10 | text-align: center; 11 | @include clearfix; 12 | li { 13 | display: inline; 14 | > a, 15 | > span { 16 | display: inline-block; 17 | padding: 5px 14px; 18 | background-color: $pager-bg; 19 | border: 1px solid $pager-border; 20 | border-radius: $pager-border-radius; 21 | } 22 | 23 | > a:hover, 24 | > a:focus { 25 | text-decoration: none; 26 | background-color: $pager-hover-bg; 27 | } 28 | } 29 | 30 | .next { 31 | > a, 32 | > span { 33 | float: right; 34 | } 35 | } 36 | 37 | .previous { 38 | > a, 39 | > span { 40 | float: left; 41 | } 42 | } 43 | 44 | .disabled { 45 | > a, 46 | > a:hover, 47 | > a:focus, 48 | > span { 49 | color: $pager-disabled-color; 50 | background-color: $pager-bg; 51 | cursor: $cursor-disabled; 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { Routes } from '@angular/router'; 4 | 5 | import { Guard } from './guard.service'; 6 | 7 | import { PageDoneComponent } from './page-done.component'; 8 | import { PageEditorComponent } from './page-editor.component'; 9 | import { PageHomeComponent } from './page-home.component'; 10 | import { RootComponent } from './root.component'; 11 | 12 | const routes: Routes = [ 13 | { 14 | path: '', 15 | component: PageHomeComponent 16 | }, 17 | { 18 | path: 'editor/:packID/:designID', 19 | component: PageEditorComponent, 20 | canDeactivate: [Guard] 21 | }, 22 | { 23 | path: 'done', 24 | component: PageDoneComponent, 25 | canDeactivate: [Guard] 26 | }, 27 | { 28 | path: '**', 29 | redirectTo: '/', 30 | pathMatch: 'full' 31 | } 32 | ]; 33 | 34 | @NgModule({ 35 | providers: [Guard], 36 | imports: [RouterModule.forRoot(routes)], 37 | exports: [RouterModule] 38 | }) 39 | export class AppRoutingModule { } -------------------------------------------------------------------------------- /src/scss/bootstrap/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Mixins 2 | // -------------------------------------------------- 3 | 4 | // Utilities 5 | @import "mixins/hide-text"; 6 | @import "mixins/opacity"; 7 | @import "mixins/image"; 8 | @import "mixins/labels"; 9 | @import "mixins/reset-filter"; 10 | @import "mixins/resize"; 11 | @import "mixins/responsive-visibility"; 12 | @import "mixins/size"; 13 | @import "mixins/tab-focus"; 14 | @import "mixins/reset-text"; 15 | @import "mixins/text-emphasis"; 16 | @import "mixins/text-overflow"; 17 | @import "mixins/vendor-prefixes"; 18 | 19 | // Components 20 | @import "mixins/alerts"; 21 | @import "mixins/buttons"; 22 | @import "mixins/panels"; 23 | @import "mixins/pagination"; 24 | @import "mixins/list-group"; 25 | @import "mixins/nav-divider"; 26 | @import "mixins/forms"; 27 | @import "mixins/progress-bar"; 28 | @import "mixins/table-row"; 29 | 30 | // Skins 31 | @import "mixins/background-variant"; 32 | @import "mixins/border-radius"; 33 | @import "mixins/gradients"; 34 | 35 | // Layout 36 | @import "mixins/clearfix"; 37 | @import "mixins/center-block"; 38 | @import "mixins/nav-vertical-align"; 39 | @import "mixins/grid-framework"; 40 | @import "mixins/grid"; 41 | -------------------------------------------------------------------------------- /src/app/root.component.ts: -------------------------------------------------------------------------------- 1 | import { config } from '../config'; 2 | 3 | import { Component } from '@angular/core'; 4 | import { OnInit } from '@angular/core'; 5 | import { Router, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RoutesRecognized } from '@angular/router'; 6 | 7 | import { TranslateService } from '@ngx-translate/core'; 8 | 9 | @Component({ 10 | moduleId: module.id, 11 | selector: 'app-root', 12 | templateUrl: './app/root.component.html', 13 | styleUrls: ['./app/root.component.css'], 14 | }) 15 | export class RootComponent { 16 | 17 | constructor(public translate: TranslateService, private router: Router) { 18 | translate.setDefaultLang('en'); 19 | 20 | // Set language, change it in config.ts file 21 | translate.use(config.language); 22 | 23 | window.ga('create', config.googleAnalytics, 'auto'); 24 | 25 | router.events 26 | .filter(event => event instanceof NavigationEnd) 27 | .subscribe((event:NavigationEnd) => { 28 | window.ga('set', 'page', window.location.href.replace(window.location.origin, "")); 29 | window.ga('send', 'pageview'); 30 | }); 31 | } 32 | } -------------------------------------------------------------------------------- /src/scss/bootstrap/_media.scss: -------------------------------------------------------------------------------- 1 | .media { 2 | // Proper spacing between instances of .media 3 | margin-top: 15px; 4 | 5 | &:first-child { 6 | margin-top: 0; 7 | } 8 | } 9 | 10 | .media, 11 | .media-body { 12 | zoom: 1; 13 | overflow: hidden; 14 | } 15 | 16 | .media-body { 17 | width: 10000px; 18 | } 19 | 20 | .media-object { 21 | display: block; 22 | 23 | // Fix collapse in webkit from max-width: 100% and display: table-cell. 24 | &.img-thumbnail { 25 | max-width: none; 26 | } 27 | } 28 | 29 | .media-right, 30 | .media > .pull-right { 31 | padding-left: 10px; 32 | } 33 | 34 | .media-left, 35 | .media > .pull-left { 36 | padding-right: 10px; 37 | } 38 | 39 | .media-left, 40 | .media-right, 41 | .media-body { 42 | display: table-cell; 43 | vertical-align: top; 44 | } 45 | 46 | .media-middle { 47 | vertical-align: middle; 48 | } 49 | 50 | .media-bottom { 51 | vertical-align: bottom; 52 | } 53 | 54 | // Reset margins on headings for tighter default spacing 55 | .media-heading { 56 | margin-top: 0; 57 | margin-bottom: 5px; 58 | } 59 | 60 | // Media list variation 61 | // 62 | // Undo default ul/ol styles 63 | .media-list { 64 | padding-left: 0; 65 | list-style: none; 66 | } 67 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_image.scss: -------------------------------------------------------------------------------- 1 | // Image Mixins 2 | // - Responsive image 3 | // - Retina image 4 | 5 | 6 | // Responsive image 7 | // 8 | // Keep images from scaling beyond the width of their parents. 9 | @mixin img-responsive($display: block) { 10 | display: $display; 11 | max-width: 100%; // Part 1: Set a maximum relative to the parent 12 | height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching 13 | } 14 | 15 | 16 | // Retina image 17 | // 18 | // Short retina mixin for setting background-image and -size. Note that the 19 | // spelling of `min--moz-device-pixel-ratio` is intentional. 20 | @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { 21 | background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-1x}"), "#{$file-1x}")); 22 | 23 | @media 24 | only screen and (-webkit-min-device-pixel-ratio: 2), 25 | only screen and ( min--moz-device-pixel-ratio: 2), 26 | only screen and ( -o-min-device-pixel-ratio: 2/1), 27 | only screen and ( min-device-pixel-ratio: 2), 28 | only screen and ( min-resolution: 192dpi), 29 | only screen and ( min-resolution: 2dppx) { 30 | background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-2x}"), "#{$file-2x}")); 31 | background-size: $width-1x $height-1x; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/app/safe.pipe.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Force bind by bypassing security trust. 3 | * Source : https://forum.ionicframework.com/t/inserting-html-via-angular-2-use-of-domsanitizationservice-bypasssecuritytrusthtml/62562 4 | */ 5 | 6 | import { DomSanitizer } from '@angular/platform-browser'; 7 | import { Pipe } from '@angular/core'; 8 | import { SafeHtml } from '@angular/platform-browser'; 9 | import { SafeResourceUrl } from '@angular/platform-browser'; 10 | import { SafeScript } from '@angular/platform-browser'; 11 | import { SafeStyle } from '@angular/platform-browser'; 12 | import { SafeUrl } from '@angular/platform-browser'; 13 | 14 | @Pipe({ 15 | name: 'safe' 16 | }) 17 | export class SafePipe { 18 | 19 | constructor(protected _sanitizer: DomSanitizer) { } 20 | 21 | public transform(value: string, type: string = 'html'): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl { 22 | switch (type) { 23 | case 'html': return this._sanitizer.bypassSecurityTrustHtml(value); 24 | case 'style': return this._sanitizer.bypassSecurityTrustStyle(value); 25 | case 'script': return this._sanitizer.bypassSecurityTrustScript(value); 26 | case 'url': return this._sanitizer.bypassSecurityTrustUrl(value); 27 | case 'resourceUrl': return this._sanitizer.bypassSecurityTrustResourceUrl(value); 28 | default: throw new Error(`Invalid safe type specified: ${type}`); 29 | } 30 | } 31 | 32 | } 33 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_jumbotron.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Jumbotron 3 | // -------------------------------------------------- 4 | 5 | 6 | .jumbotron { 7 | padding-top: $jumbotron-padding; 8 | padding-bottom: $jumbotron-padding; 9 | margin-bottom: $jumbotron-padding; 10 | color: $jumbotron-color; 11 | background-color: $jumbotron-bg; 12 | 13 | h1, 14 | .h1 { 15 | color: $jumbotron-heading-color; 16 | } 17 | 18 | p { 19 | margin-bottom: ($jumbotron-padding / 2); 20 | font-size: $jumbotron-font-size; 21 | font-weight: 200; 22 | } 23 | 24 | > hr { 25 | border-top-color: darken($jumbotron-bg, 10%); 26 | } 27 | 28 | .container &, 29 | .container-fluid & { 30 | border-radius: $border-radius-large; // Only round corners at higher resolutions if contained in a container 31 | padding-left: ($grid-gutter-width / 2); 32 | padding-right: ($grid-gutter-width / 2); 33 | } 34 | 35 | .container { 36 | max-width: 100%; 37 | } 38 | 39 | @media screen and (min-width: $screen-sm-min) { 40 | padding-top: ($jumbotron-padding * 1.6); 41 | padding-bottom: ($jumbotron-padding * 1.6); 42 | 43 | .container &, 44 | .container-fluid & { 45 | padding-left: ($jumbotron-padding * 2); 46 | padding-right: ($jumbotron-padding * 2); 47 | } 48 | 49 | h1, 50 | .h1 { 51 | font-size: $jumbotron-heading-font-size; 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/index.pug: -------------------------------------------------------------------------------- 1 | html 2 | head 3 | meta(charset="UTF-8") 4 | meta(name="viewport" content="width=device-width") 5 | title Loading ... 6 | base(href="/") 7 | script. 8 | if(window.location.hostname == "desainmu.com") { 9 | // Redirect non-www to www 10 | location.href = 'https://www.' + window.location.href.substring(window.location.protocol.length + 2); 11 | } else if (location.protocol != 'https:' && (window.location.hostname == "www.posteregg.com" || window.location.hostname == "www.desainmu.com")) { 12 | // Redirect non-https to https 13 | location.href = 'https:' + window.location.href.substring(window.location.protocol.length); 14 | } 15 | 16 | link(id="mainstyle", rel="stylesheet", href="/style.css") 17 | link(id="mainfont", rel='stylesheet', href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700') 18 | body 19 | app-root 20 | script. 21 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 22 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 23 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 24 | })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); 25 | script(src="bundle.js") -------------------------------------------------------------------------------- /src/scss/bootstrap/_labels.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Labels 3 | // -------------------------------------------------- 4 | 5 | .label { 6 | display: inline; 7 | padding: .2em .6em .3em; 8 | font-size: 75%; 9 | font-weight: bold; 10 | line-height: 1; 11 | color: $label-color; 12 | text-align: center; 13 | white-space: nowrap; 14 | vertical-align: baseline; 15 | border-radius: .25em; 16 | 17 | // [converter] extracted a& to a.label 18 | 19 | // Empty labels collapse automatically (not available in IE8) 20 | &:empty { 21 | display: none; 22 | } 23 | 24 | // Quick fix for labels in buttons 25 | .btn & { 26 | position: relative; 27 | top: -1px; 28 | } 29 | } 30 | 31 | // Add hover effects, but only for links 32 | a.label { 33 | &:hover, 34 | &:focus { 35 | color: $label-link-hover-color; 36 | text-decoration: none; 37 | cursor: pointer; 38 | } 39 | } 40 | 41 | // Colors 42 | // Contextual variations (linked labels get darker on :hover) 43 | 44 | .label-default { 45 | @include label-variant($label-default-bg); 46 | } 47 | 48 | .label-primary { 49 | @include label-variant($label-primary-bg); 50 | } 51 | 52 | .label-success { 53 | @include label-variant($label-success-bg); 54 | } 55 | 56 | .label-info { 57 | @include label-variant($label-info-bg); 58 | } 59 | 60 | .label-warning { 61 | @include label-variant($label-warning-bg); 62 | } 63 | 64 | .label-danger { 65 | @include label-variant($label-danger-bg); 66 | } 67 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_badges.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Badges 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base class 7 | .badge { 8 | display: inline-block; 9 | min-width: 10px; 10 | padding: 3px 7px; 11 | font-size: $font-size-small; 12 | font-weight: $badge-font-weight; 13 | color: $badge-color; 14 | line-height: $badge-line-height; 15 | vertical-align: middle; 16 | white-space: nowrap; 17 | text-align: center; 18 | background-color: $badge-bg; 19 | border-radius: $badge-border-radius; 20 | 21 | // Empty badges collapse automatically (not available in IE8) 22 | &:empty { 23 | display: none; 24 | } 25 | 26 | // Quick fix for badges in buttons 27 | .btn & { 28 | position: relative; 29 | top: -1px; 30 | } 31 | 32 | .btn-xs &, 33 | .btn-group-xs > .btn & { 34 | top: 0; 35 | padding: 1px 5px; 36 | } 37 | 38 | // [converter] extracted a& to a.badge 39 | 40 | // Account for badges in navs 41 | .list-group-item.active > &, 42 | .nav-pills > .active > a > & { 43 | color: $badge-active-color; 44 | background-color: $badge-active-bg; 45 | } 46 | 47 | .list-group-item > & { 48 | float: right; 49 | } 50 | 51 | .list-group-item > & + & { 52 | margin-right: 5px; 53 | } 54 | 55 | .nav-pills > li > a > & { 56 | margin-left: 3px; 57 | } 58 | } 59 | 60 | // Hover state, but only for links 61 | a.badge { 62 | &:hover, 63 | &:focus { 64 | color: $badge-link-hover-color; 65 | text-decoration: none; 66 | cursor: pointer; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/app/tools.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Escape string from any regex format. 3 | * Source: http://stackoverflow.com/questions/1144783/how-to-replace-all-occurrences-of-a-string-in-javascript 4 | * @param string 5 | */ 6 | export function escapeRegExp(string: string) { 7 | return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"); 8 | } 9 | 10 | /** 11 | * Replace all occurences in a string 12 | * Source: http://stackoverflow.com/questions/1144783/how-to-replace-all-occurrences-of-a-string-in-javascript 13 | * @param string 14 | * @param find 15 | * @param replace 16 | */ 17 | export function replaceAll(string: string, find: string, replace: string) { 18 | return string.replace(new RegExp(escapeRegExp(find), 'g'), replace); 19 | } 20 | 21 | /** 22 | * Object to Array 23 | */ 24 | export function objToArray(obj: any) { 25 | let returney: any[] = []; 26 | 27 | Object 28 | .keys(obj) 29 | .map((objectKey, Index) => { 30 | returney[Index] = obj[objectKey]; 31 | returney[Index]._objectKey = objectKey; 32 | }); 33 | 34 | return returney; 35 | } 36 | /** 37 | * Detect if a string RTL 38 | */ 39 | export function detectRTL(text: string) { 40 | 41 | // don't count spaces and new line 42 | text = text.replace(/[\n ]/g, ""); 43 | 44 | var rtlChar = /[\u0590-\u083F]|[\u08A0-\u08FF]|[\uFB1D-\uFDFF]|[\uFE70-\uFEFF]/mg; 45 | 46 | var totalRTL = text.match(rtlChar) ? text.match(rtlChar).length : 0; 47 | var totalLTR = text.length - totalRTL; 48 | 49 | var ratio = totalRTL / totalLTR; 50 | 51 | return ratio >= 1 ? true : false; 52 | } 53 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_code.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Code (inline and block) 3 | // -------------------------------------------------- 4 | 5 | 6 | // Inline and block code styles 7 | code, 8 | kbd, 9 | pre, 10 | samp { 11 | font-family: $font-family-monospace; 12 | } 13 | 14 | // Inline code 15 | code { 16 | padding: 2px 4px; 17 | font-size: 90%; 18 | color: $code-color; 19 | background-color: $code-bg; 20 | border-radius: $border-radius-base; 21 | } 22 | 23 | // User input typically entered via keyboard 24 | kbd { 25 | padding: 2px 4px; 26 | font-size: 90%; 27 | color: $kbd-color; 28 | background-color: $kbd-bg; 29 | border-radius: $border-radius-small; 30 | box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); 31 | 32 | kbd { 33 | padding: 0; 34 | font-size: 100%; 35 | font-weight: bold; 36 | box-shadow: none; 37 | } 38 | } 39 | 40 | // Blocks of code 41 | pre { 42 | display: block; 43 | padding: (($line-height-computed - 1) / 2); 44 | margin: 0 0 ($line-height-computed / 2); 45 | font-size: ($font-size-base - 1); // 14px to 13px 46 | line-height: $line-height-base; 47 | word-break: break-all; 48 | word-wrap: break-word; 49 | color: $pre-color; 50 | background-color: $pre-bg; 51 | border: 1px solid $pre-border-color; 52 | border-radius: $border-radius-base; 53 | 54 | // Account for some code outputs that place code tags in pre tags 55 | code { 56 | padding: 0; 57 | font-size: inherit; 58 | color: inherit; 59 | white-space: pre-wrap; 60 | background-color: transparent; 61 | border-radius: 0; 62 | } 63 | } 64 | 65 | // Enable scrollable blocks of code 66 | .pre-scrollable { 67 | max-height: $pre-scrollable-max-height; 68 | overflow-y: scroll; 69 | } 70 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Button variants 2 | // 3 | // Easily pump out default styles, as well as :hover, :focus, :active, 4 | // and disabled options for all buttons 5 | 6 | @mixin button-variant($color, $background, $border) { 7 | color: $color; 8 | background-color: $background; 9 | border-color: $border; 10 | 11 | &:focus, 12 | &.focus { 13 | color: $color; 14 | background-color: darken($background, 10%); 15 | border-color: darken($border, 25%); 16 | } 17 | &:hover { 18 | color: $color; 19 | background-color: darken($background, 10%); 20 | border-color: darken($border, 12%); 21 | } 22 | &:active, 23 | &.active, 24 | .open > &.dropdown-toggle { 25 | color: $color; 26 | background-color: darken($background, 10%); 27 | border-color: darken($border, 12%); 28 | 29 | &:hover, 30 | &:focus, 31 | &.focus { 32 | color: $color; 33 | background-color: darken($background, 17%); 34 | border-color: darken($border, 25%); 35 | } 36 | } 37 | &:active, 38 | &.active, 39 | .open > &.dropdown-toggle { 40 | background-image: none; 41 | } 42 | &.disabled, 43 | &[disabled], 44 | fieldset[disabled] & { 45 | &:hover, 46 | &:focus, 47 | &.focus { 48 | background-color: $background; 49 | border-color: $border; 50 | } 51 | } 52 | 53 | .badge { 54 | color: $background; 55 | background-color: $color; 56 | } 57 | } 58 | 59 | // Button sizes 60 | @mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { 61 | padding: $padding-vertical $padding-horizontal; 62 | font-size: $font-size; 63 | line-height: $line-height; 64 | border-radius: $border-radius; 65 | } 66 | -------------------------------------------------------------------------------- /src/app/page-done.component.pug: -------------------------------------------------------------------------------- 1 | modal 2 | .content-body 3 | .modal-title {{ "Are you sure to exit without downloading the poster?" | translate }} 4 | p {{ "Your changes will be lost if you don’t download it." | translate }} 5 | .content-footer 6 | button.btn.btn-default(type='button', (click)='modal.hide()') {{ "cancel" | translate | titleize }} 7 | .flex-1 8 | button.btn.btn-default(type='button', (click)="this.guard = false; exit()") {{ "discard and exit" | translate | titleize }} 9 | button.btn.btn-go(type='button', [ngClass]="{'disabled': !resultImgSrc}", (click)="download(); exit();") {{ "download and exit" | translate | titleize }} 10 | .hero 11 | .container 12 | .row 13 | .col-lg-1.visible-lg-block 14 | .col-md-8.col-lg-6.col-result 15 | .panel.panel-default 16 | .panel-body 17 | .progress(*ngIf='!resultImgSrc') 18 | .progress-bar.progress-bar-striped.active(role='progressbar', style='width: 100%') {{ "processing" | translate | titleize }}... 19 | img.img-responsive(*ngIf='resultImgSrc', [attr.src]="resultImgSrc") 20 | .col-md-4.col-lg-4 21 | .panel.panel-default.panel-actions 22 | .panel-body 23 | a.btn.btn-go.btn-block([ngClass]="{'disabled': !resultImgSrc}", (click)="download()") {{ "download" | translate | titleize }} 24 | a.btn.btn-default.btn-block((click)="back()") {{ "edit again" | translate | titleize }} 25 | a.btn.btn-default.btn-block((click)="exit()") {{ "exit" | translate | titleize }} 26 | p.ending-words {{ "Thanks for using Poster Egg." | translate }} 27 | .col-lg-1.visible-lg-block 28 | -------------------------------------------------------------------------------- /src/scss/_bootstrap.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap v3.3.7 (http://getbootstrap.com) 3 | * Copyright 2011-2016 Twitter, Inc. 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 5 | */ 6 | 7 | // Core variables and mixins 8 | @import "bootstrap/variables"; 9 | @import "bootstrap/mixins"; 10 | 11 | // Reset and dependencies 12 | @import "bootstrap/normalize"; 13 | @import "bootstrap/print"; 14 | // @import "bootstrap/glyphicons"; 15 | 16 | // Core CSS 17 | @import "bootstrap/scaffolding"; 18 | @import "bootstrap/type"; 19 | // @import "bootstrap/code"; 20 | @import "bootstrap/grid"; 21 | // @import "bootstrap/tables"; 22 | @import "bootstrap/forms"; 23 | @import "bootstrap/buttons"; 24 | 25 | // Components 26 | @import "bootstrap/component-animations"; 27 | // @import "bootstrap/dropdowns"; 28 | // @import "bootstrap/button-groups"; 29 | // @import "bootstrap/input-groups"; 30 | @import "bootstrap/navs"; 31 | @import "bootstrap/navbar"; 32 | // @import "bootstrap/breadcrumbs"; 33 | // @import "bootstrap/pagination"; 34 | // @import "bootstrap/pager"; 35 | // @import "bootstrap/labels"; 36 | // @import "bootstrap/badges"; 37 | // @import "bootstrap/jumbotron"; 38 | // @import "bootstrap/thumbnails"; 39 | @import "bootstrap/alerts"; 40 | @import "bootstrap/progress-bars"; 41 | // @import "bootstrap/media"; 42 | // @import "bootstrap/list-group"; 43 | @import "bootstrap/panels"; 44 | // @import "bootstrap/responsive-embed"; 45 | // @import "bootstrap/wells"; 46 | // @import "bootstrap/close"; 47 | 48 | // Components w/ JavaScript 49 | @import "bootstrap/modals"; 50 | // @import "bootstrap/tooltip"; 51 | // @import "bootstrap/popovers"; 52 | // @import "bootstrap/carousel"; 53 | 54 | // Utility classes 55 | @import "bootstrap/utilities"; 56 | @import "bootstrap/responsive-utilities"; 57 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_grid.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Grid system 3 | // -------------------------------------------------- 4 | 5 | 6 | // Container widths 7 | // 8 | // Set the container width, and override it for fixed navbars in media queries. 9 | 10 | .container { 11 | @include container-fixed; 12 | 13 | @media (min-width: $screen-sm-min) { 14 | width: $container-sm; 15 | } 16 | @media (min-width: $screen-md-min) { 17 | width: $container-md; 18 | } 19 | @media (min-width: $screen-lg-min) { 20 | width: $container-lg; 21 | } 22 | } 23 | 24 | 25 | // Fluid container 26 | // 27 | // Utilizes the mixin meant for fixed width containers, but without any defined 28 | // width for fluid, full width layouts. 29 | 30 | .container-fluid { 31 | @include container-fixed; 32 | } 33 | 34 | 35 | // Row 36 | // 37 | // Rows contain and clear the floats of your columns. 38 | 39 | .row { 40 | @include make-row; 41 | } 42 | 43 | 44 | // Columns 45 | // 46 | // Common styles for small and large grid columns 47 | 48 | @include make-grid-columns; 49 | 50 | 51 | // Extra small grid 52 | // 53 | // Columns, offsets, pushes, and pulls for extra small devices like 54 | // smartphones. 55 | 56 | @include make-grid(xs); 57 | 58 | 59 | // Small grid 60 | // 61 | // Columns, offsets, pushes, and pulls for the small device range, from phones 62 | // to tablets. 63 | 64 | @media (min-width: $screen-sm-min) { 65 | @include make-grid(sm); 66 | } 67 | 68 | 69 | // Medium grid 70 | // 71 | // Columns, offsets, pushes, and pulls for the desktop device range. 72 | 73 | @media (min-width: $screen-md-min) { 74 | @include make-grid(md); 75 | } 76 | 77 | 78 | // Large grid 79 | // 80 | // Columns, offsets, pushes, and pulls for the large desktop device range. 81 | 82 | @media (min-width: $screen-lg-min) { 83 | @include make-grid(lg); 84 | } 85 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_alerts.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Alerts 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base styles 7 | // ------------------------- 8 | 9 | .alert { 10 | padding: $alert-padding; 11 | margin-bottom: $line-height-computed; 12 | border: 1px solid transparent; 13 | border-radius: $alert-border-radius; 14 | 15 | // Headings for larger alerts 16 | h4 { 17 | margin-top: 0; 18 | // Specified for the h4 to prevent conflicts of changing $headings-color 19 | color: inherit; 20 | } 21 | 22 | // Provide class for links that match alerts 23 | .alert-link { 24 | font-weight: $alert-link-font-weight; 25 | } 26 | 27 | // Improve alignment and spacing of inner content 28 | > p, 29 | > ul { 30 | margin-bottom: 0; 31 | } 32 | 33 | > p + p { 34 | margin-top: 5px; 35 | } 36 | } 37 | 38 | // Dismissible alerts 39 | // 40 | // Expand the right padding and account for the close button's positioning. 41 | 42 | .alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0. 43 | .alert-dismissible { 44 | padding-right: ($alert-padding + 20); 45 | 46 | // Adjust close link position 47 | .close { 48 | position: relative; 49 | top: -2px; 50 | right: -21px; 51 | color: inherit; 52 | } 53 | } 54 | 55 | // Alternate styles 56 | // 57 | // Generate contextual modifier classes for colorizing the alert. 58 | 59 | .alert-success { 60 | @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text); 61 | } 62 | 63 | .alert-info { 64 | @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text); 65 | } 66 | 67 | .alert-warning { 68 | @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text); 69 | } 70 | 71 | .alert-danger { 72 | @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text); 73 | } 74 | -------------------------------------------------------------------------------- /src/app/browser-support.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { OnInit } from '@angular/core'; 3 | 4 | import { RendererService } from './renderer.service'; 5 | import { StorageService } from './storage.service'; 6 | 7 | @Component({ 8 | moduleId: module.id, 9 | selector: 'browser-support', 10 | templateUrl: './app/browser-support.component.html', 11 | providers: [ 12 | RendererService, 13 | ] 14 | 15 | }) 16 | export class BrowserSupportComponent { 17 | 18 | // Assume current browser is not supported (false) 19 | private browserSupport: boolean = false; 20 | 21 | constructor( 22 | private rendererService: RendererService, 23 | private storageService: StorageService 24 | ) { } 25 | 26 | ngOnInit() { 27 | // if (this.storageService.hasData('renderSupport')) { 28 | // this.browserSupport = this.storageService.getData('renderSupport'); 29 | // } else { 30 | // // Check if user's browser can render HTML, mainly for detecting Safari 31 | // this.rendererService.renderTest().then((value) => { this.browserSupport = value; }); 32 | // } 33 | 34 | // Chrome 1 - 71 35 | 36 | var isChrome: boolean; 37 | var isOpera: boolean; 38 | var isFirefox: boolean; 39 | eval(`isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);`); 40 | 41 | // Opera 8.0+ 42 | eval(`isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;`); 43 | 44 | // Firefox 1.0+ 45 | eval(`isFirefox = typeof InstallTrigger !== 'undefined';`); 46 | 47 | 48 | if (this.storageService.hasData('browserSupport')) { 49 | this.browserSupport = this.storageService.getData('browserSupport'); 50 | } else { 51 | this.browserSupport = isChrome || isOpera || isFirefox ? true : false; 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/app/page-home.component.pug: -------------------------------------------------------------------------------- 1 | a(href="https://github.com/echamudi/poster-egg", target="_blank").github-badge.hidden-xs 2 | img(src="https://raw.githubusercontent.com/aral/fork-me-on-github-retina-ribbons/master/images-after-imageoptim/fork-me-right-graphite.png" srcset="https://raw.githubusercontent.com/aral/fork-me-on-github-retina-ribbons/master/images-after-imageoptim/fork-me-right-graphite.png 1x, https://raw.githubusercontent.com/aral/fork-me-on-github-retina-ribbons/master/images-after-imageoptim/fork-me-right-graphite%402x.png 2x" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png") 3 | .topbar 4 | .container 5 | h1 Poster #[span.egg Egg] 6 | .topbar-pad 7 | .container 8 | div 9 | .row 10 | .col-xs-12 11 | browser-support 12 | div(*ngIf="!packs") 13 | .row 14 | .col-xs-12 15 | .progress 16 | .progress-bar.progress-bar-striped.active(role='progressbar', style='width: 100%') Loading... 17 | div(*ngFor='let pack of packs') 18 | .row.pack-heading 19 | .col-xs-12 20 | h2.pack-title {{ pack.title[translate.currentLang] }} 21 | p.pack-description {{ pack.description[translate.currentLang] }} 22 | .row.pack-content 23 | .col-sm-6.col-md-4.col-lg-3(*ngFor='let design of pack.designs') 24 | .panel.panel-design 25 | .panel-heading {{ design.title[translate.currentLang] }} 26 | .panel-body 27 | img.img-responsive( 28 | [attr.src]="getDesignThumbnail(pack.packID, design.designID)", 29 | [routerLink]="['/editor', pack.packID, design.designID]", 30 | (error)="$event.target.src = '/assets/no-preview.svg'") 31 | .panel-footer 32 | a.btn.btn-go.btn-block([routerLink]="['/editor', pack.packID, design.designID]") {{ "choose this design" | translate | titleize }} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "poster-egg", 3 | "version": "0.0.1", 4 | "description": "A client-side poster maker using HTML5, CSS3, and Angular.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "license": "AGPL-3.0", 10 | "devDependencies": { 11 | "@babel/core": "^7.4.4", 12 | "@babel/preset-env": "^7.4.4", 13 | "autoprefixer": "^9.5.1", 14 | "browserify": "^16.2.3", 15 | "del": "^4.1.1", 16 | "gulp": "^4.0.2", 17 | "gulp-babel": "^8.0.0", 18 | "gulp-connect": "^5.7.0", 19 | "gulp-debug": "^4.0.0", 20 | "gulp-exit": "0.0.2", 21 | "gulp-if": "^2.0.2", 22 | "gulp-postcss": "^8.0.0", 23 | "gulp-pug": "^4.0.1", 24 | "gulp-run": "^1.7.1", 25 | "gulp-sass": "^4.0.2", 26 | "gulp-sourcemaps": "^2.6.5", 27 | "gulp-uglify": "^3.0.2", 28 | "gulp-util": "^3.0.8", 29 | "minimist": "^1.2.0", 30 | "mkdirp": "^0.5.1", 31 | "rtltextarea": "^1.0.1", 32 | "tsify": "^4.0.1", 33 | "typescript": "^3.6.3", 34 | "vinyl-buffer": "^1.0.1", 35 | "vinyl-source-stream": "^2.0.0", 36 | "watchify": "^3.11.1", 37 | "yargs": "^13.2.2" 38 | }, 39 | "dependencies": { 40 | "@angular/animations": "^7.2.15", 41 | "@angular/common": "^7.2.15", 42 | "@angular/compiler": "^7.2.15", 43 | "@angular/compiler-cli": "^7.2.15", 44 | "@angular/core": "^7.2.15", 45 | "@angular/forms": "^7.2.15", 46 | "@angular/http": "^7.2.15", 47 | "@angular/platform-browser": "^7.2.15", 48 | "@angular/platform-browser-dynamic": "^7.2.15", 49 | "@angular/platform-server": "^7.2.15", 50 | "@angular/router": "^7.2.15", 51 | "@ngx-translate/core": "^11.0.1", 52 | "@ngx-translate/http-loader": "4.0.0", 53 | "@types/jquery": "^3.3.29", 54 | "@types/node": "^12.0.0", 55 | "@types/webfontloader": "^1.6.29", 56 | "bootstrap-sass": "^3.4.1", 57 | "canvas-to-image": "^2.0.3", 58 | "core-js": "^3.0.1", 59 | "file-saver": "^2.0.1", 60 | "jquery": "^3.4.1", 61 | "rasterizehtml": "^1.3.0", 62 | "rxjs": "^6.5.2", 63 | "rxjs-compat": "^6.5.2", 64 | "textversionjs": "^1.1.3", 65 | "zone.js": "^0.9.1" 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/assets/no-preview.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | no-preview 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | No Preview 14 | 15 | 16 | Click to see 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_progress-bars.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Progress bars 3 | // -------------------------------------------------- 4 | 5 | 6 | // Bar animations 7 | // ------------------------- 8 | 9 | // WebKit 10 | @-webkit-keyframes progress-bar-stripes { 11 | from { background-position: 40px 0; } 12 | to { background-position: 0 0; } 13 | } 14 | 15 | // Spec and IE10+ 16 | @keyframes progress-bar-stripes { 17 | from { background-position: 40px 0; } 18 | to { background-position: 0 0; } 19 | } 20 | 21 | 22 | // Bar itself 23 | // ------------------------- 24 | 25 | // Outer container 26 | .progress { 27 | overflow: hidden; 28 | height: $line-height-computed; 29 | margin-bottom: $line-height-computed; 30 | background-color: $progress-bg; 31 | border-radius: $progress-border-radius; 32 | @include box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); 33 | } 34 | 35 | // Bar of progress 36 | .progress-bar { 37 | float: left; 38 | width: 0%; 39 | height: 100%; 40 | font-size: $font-size-small; 41 | line-height: $line-height-computed; 42 | color: $progress-bar-color; 43 | text-align: center; 44 | background-color: $progress-bar-bg; 45 | @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); 46 | @include transition(width .6s ease); 47 | } 48 | 49 | // Striped bars 50 | // 51 | // `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the 52 | // `.progress-bar-striped` class, which you just add to an existing 53 | // `.progress-bar`. 54 | .progress-striped .progress-bar, 55 | .progress-bar-striped { 56 | @include gradient-striped; 57 | background-size: 40px 40px; 58 | } 59 | 60 | // Call animation for the active one 61 | // 62 | // `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the 63 | // `.progress-bar.active` approach. 64 | .progress.active .progress-bar, 65 | .progress-bar.active { 66 | @include animation(progress-bar-stripes 2s linear infinite); 67 | } 68 | 69 | 70 | // Variations 71 | // ------------------------- 72 | 73 | .progress-bar-success { 74 | @include progress-bar-variant($progress-bar-success-bg); 75 | } 76 | 77 | .progress-bar-info { 78 | @include progress-bar-variant($progress-bar-info-bg); 79 | } 80 | 81 | .progress-bar-warning { 82 | @include progress-bar-variant($progress-bar-warning-bg); 83 | } 84 | 85 | .progress-bar-danger { 86 | @include progress-bar-variant($progress-bar-danger-bg); 87 | } 88 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { HashLocationStrategy } from '@angular/common'; 4 | import { Http } from '@angular/http'; 5 | import { HttpClient } from '@angular/common/http'; 6 | import { HttpClientModule } from '@angular/common/http'; 7 | import { HttpModule } from '@angular/http'; 8 | import { Location } from '@angular/common'; 9 | import { LocationStrategy } from '@angular/common'; 10 | import { NgModule } from '@angular/core'; 11 | import { RouterModule } from '@angular/router'; 12 | import { Routes } from '@angular/router'; 13 | 14 | import { TranslateLoader } from '@ngx-translate/core'; 15 | import { TranslateModule } from '@ngx-translate/core'; 16 | import { TranslateHttpLoader } from '@ngx-translate/http-loader'; 17 | 18 | import { AppRoutingModule } from './app-routing.module'; 19 | 20 | import { StorageService } from './storage.service'; 21 | 22 | import { SafePipe } from './safe.pipe'; 23 | import { TitleizePipe } from "./titleize.pipe"; 24 | 25 | import { BrowserSupportComponent } from './browser-support.component'; 26 | import { ModalComponent } from './modal.component'; 27 | import { PageDoneComponent } from './page-done.component'; 28 | import { PageEditorComponent } from './page-editor.component'; 29 | import { PageHomeComponent } from './page-home.component'; 30 | import { RootComponent } from './root.component'; 31 | 32 | import * as translate from './translate.functions'; 33 | 34 | @NgModule({ 35 | imports: [ 36 | BrowserModule, 37 | HttpModule, 38 | HttpClientModule, 39 | TranslateModule.forRoot({ 40 | loader: { 41 | provide: TranslateLoader, 42 | useFactory: (translate.createTranslateLoader), 43 | deps: [HttpClient] 44 | } 45 | }), 46 | AppRoutingModule, 47 | FormsModule 48 | ], 49 | declarations: [ 50 | RootComponent, 51 | PageHomeComponent, 52 | PageEditorComponent, 53 | BrowserSupportComponent, 54 | PageDoneComponent, 55 | ModalComponent, 56 | SafePipe, 57 | TitleizePipe 58 | ], 59 | bootstrap: [ 60 | RootComponent 61 | ], 62 | providers: [ 63 | StorageService, 64 | { 65 | provide: LocationStrategy, 66 | useClass: HashLocationStrategy 67 | } 68 | ] 69 | 70 | }) 71 | export class AppModule { } -------------------------------------------------------------------------------- /src/scss/bootstrap/_pagination.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Pagination (multiple pages) 3 | // -------------------------------------------------- 4 | .pagination { 5 | display: inline-block; 6 | padding-left: 0; 7 | margin: $line-height-computed 0; 8 | border-radius: $border-radius-base; 9 | 10 | > li { 11 | display: inline; // Remove list-style and block-level defaults 12 | > a, 13 | > span { 14 | position: relative; 15 | float: left; // Collapse white-space 16 | padding: $padding-base-vertical $padding-base-horizontal; 17 | line-height: $line-height-base; 18 | text-decoration: none; 19 | color: $pagination-color; 20 | background-color: $pagination-bg; 21 | border: 1px solid $pagination-border; 22 | margin-left: -1px; 23 | } 24 | &:first-child { 25 | > a, 26 | > span { 27 | margin-left: 0; 28 | @include border-left-radius($border-radius-base); 29 | } 30 | } 31 | &:last-child { 32 | > a, 33 | > span { 34 | @include border-right-radius($border-radius-base); 35 | } 36 | } 37 | } 38 | 39 | > li > a, 40 | > li > span { 41 | &:hover, 42 | &:focus { 43 | z-index: 2; 44 | color: $pagination-hover-color; 45 | background-color: $pagination-hover-bg; 46 | border-color: $pagination-hover-border; 47 | } 48 | } 49 | 50 | > .active > a, 51 | > .active > span { 52 | &, 53 | &:hover, 54 | &:focus { 55 | z-index: 3; 56 | color: $pagination-active-color; 57 | background-color: $pagination-active-bg; 58 | border-color: $pagination-active-border; 59 | cursor: default; 60 | } 61 | } 62 | 63 | > .disabled { 64 | > span, 65 | > span:hover, 66 | > span:focus, 67 | > a, 68 | > a:hover, 69 | > a:focus { 70 | color: $pagination-disabled-color; 71 | background-color: $pagination-disabled-bg; 72 | border-color: $pagination-disabled-border; 73 | cursor: $cursor-disabled; 74 | } 75 | } 76 | } 77 | 78 | // Sizing 79 | // -------------------------------------------------- 80 | 81 | // Large 82 | .pagination-lg { 83 | @include pagination-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large); 84 | } 85 | 86 | // Small 87 | .pagination-sm { 88 | @include pagination-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small); 89 | } 90 | -------------------------------------------------------------------------------- /src/scss/bootstrap/_print.scss: -------------------------------------------------------------------------------- 1 | /*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */ 2 | 3 | // ========================================================================== 4 | // Print styles. 5 | // Inlined to avoid the additional HTTP request: h5bp.com/r 6 | // ========================================================================== 7 | 8 | @media print { 9 | *, 10 | *:before, 11 | *:after { 12 | background: transparent !important; 13 | color: #000 !important; // Black prints faster: h5bp.com/s 14 | box-shadow: none !important; 15 | text-shadow: none !important; 16 | } 17 | 18 | a, 19 | a:visited { 20 | text-decoration: underline; 21 | } 22 | 23 | a[href]:after { 24 | content: " (" attr(href) ")"; 25 | } 26 | 27 | abbr[title]:after { 28 | content: " (" attr(title) ")"; 29 | } 30 | 31 | // Don't show links that are fragment identifiers, 32 | // or use the `javascript:` pseudo protocol 33 | a[href^="#"]:after, 34 | a[href^="javascript:"]:after { 35 | content: ""; 36 | } 37 | 38 | pre, 39 | blockquote { 40 | border: 1px solid #999; 41 | page-break-inside: avoid; 42 | } 43 | 44 | thead { 45 | display: table-header-group; // h5bp.com/t 46 | } 47 | 48 | tr, 49 | img { 50 | page-break-inside: avoid; 51 | } 52 | 53 | img { 54 | max-width: 100% !important; 55 | } 56 | 57 | p, 58 | h2, 59 | h3 { 60 | orphans: 3; 61 | widows: 3; 62 | } 63 | 64 | h2, 65 | h3 { 66 | page-break-after: avoid; 67 | } 68 | 69 | // Bootstrap specific changes start 70 | 71 | // Bootstrap components 72 | .navbar { 73 | display: none; 74 | } 75 | .btn, 76 | .dropup > .btn { 77 | > .caret { 78 | border-top-color: #000 !important; 79 | } 80 | } 81 | .label { 82 | border: 1px solid #000; 83 | } 84 | 85 | .table { 86 | border-collapse: collapse !important; 87 | 88 | td, 89 | th { 90 | background-color: #fff !important; 91 | } 92 | } 93 | .table-bordered { 94 | th, 95 | td { 96 | border: 1px solid #ddd !important; 97 | } 98 | } 99 | 100 | // Bootstrap specific changes end 101 | } 102 | -------------------------------------------------------------------------------- /src/app/page-editor.component.scss: -------------------------------------------------------------------------------- 1 | @import '../scss/mixins'; 2 | @import '../scss/bootstrap/variables'; 3 | 4 | .editor { 5 | &-container { 6 | box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13); 7 | margin-bottom: 10px; 8 | 9 | overflow: hidden; 10 | 11 | @media (min-width: $screen-sm-min) { 12 | position: fixed; 13 | top: 15px; 14 | left: 15px; 15 | right: 15px; 16 | bottom: 40px; 17 | 18 | margin-bottom: 0px; 19 | 20 | display: flex; 21 | } 22 | } 23 | 24 | &-content { 25 | position: relative; 26 | overflow: hidden; 27 | flex: 1; 28 | background: #F4F5F8; 29 | 30 | height: 500px; 31 | max-height: 100vw; 32 | 33 | @media (min-width: $screen-sm-min) { 34 | height: auto; 35 | max-height: none; 36 | 37 | } 38 | } 39 | 40 | &-sidebar { 41 | z-index: 1; 42 | border-left: 1px solid #e7e7e7; 43 | box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); 44 | background: #FFFFFF; 45 | 46 | @media (min-width: $screen-sm-min) { 47 | display: flex; 48 | flex-direction: column; 49 | overflow: hidden; 50 | width: 350px; 51 | } 52 | } 53 | 54 | &-tools { 55 | flex: 1; 56 | padding: 40px; 57 | 58 | @media (min-width: $screen-sm-min) { 59 | overflow-y: auto; 60 | overflow-x: hidden; 61 | } 62 | } 63 | 64 | &-actions { 65 | display: flex; 66 | height: 51px; 67 | padding: 9px; 68 | box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); 69 | 70 | > .btn { 71 | flex: 1; 72 | } 73 | 74 | > .separator { 75 | width: 5px; 76 | } 77 | } 78 | } 79 | 80 | .loading { 81 | position: absolute; 82 | top: 10px; 83 | left: 10px; 84 | display: flex; 85 | justify-content: center; 86 | align-items: center; 87 | 88 | visibility: hidden; 89 | opacity: 0; 90 | 91 | transition: opacity 0.1s linear, visibility 0.1s linear; 92 | 93 | z-index: 1; 94 | 95 | &-still { 96 | visibility: visible; 97 | opacity: 1; 98 | } 99 | } 100 | 101 | textarea { 102 | resize: none; 103 | overflow-y: hidden; 104 | height: 70px; 105 | } -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_grid-framework.scss: -------------------------------------------------------------------------------- 1 | // Framework grid generation 2 | // 3 | // Used only by Bootstrap to generate the correct number of grid classes given 4 | // any value of `$grid-columns`. 5 | 6 | // [converter] This is defined recursively in LESS, but Sass supports real loops 7 | @mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") { 8 | @for $i from (1 + 1) through $grid-columns { 9 | $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}"; 10 | } 11 | #{$list} { 12 | position: relative; 13 | // Prevent columns from collapsing when empty 14 | min-height: 1px; 15 | // Inner gutter via padding 16 | padding-left: ceil(($grid-gutter-width / 2)); 17 | padding-right: floor(($grid-gutter-width / 2)); 18 | } 19 | } 20 | 21 | 22 | // [converter] This is defined recursively in LESS, but Sass supports real loops 23 | @mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") { 24 | @for $i from (1 + 1) through $grid-columns { 25 | $list: "#{$list}, .col-#{$class}-#{$i}"; 26 | } 27 | #{$list} { 28 | float: left; 29 | } 30 | } 31 | 32 | 33 | @mixin calc-grid-column($index, $class, $type) { 34 | @if ($type == width) and ($index > 0) { 35 | .col-#{$class}-#{$index} { 36 | width: percentage(($index / $grid-columns)); 37 | } 38 | } 39 | @if ($type == push) and ($index > 0) { 40 | .col-#{$class}-push-#{$index} { 41 | left: percentage(($index / $grid-columns)); 42 | } 43 | } 44 | @if ($type == push) and ($index == 0) { 45 | .col-#{$class}-push-0 { 46 | left: auto; 47 | } 48 | } 49 | @if ($type == pull) and ($index > 0) { 50 | .col-#{$class}-pull-#{$index} { 51 | right: percentage(($index / $grid-columns)); 52 | } 53 | } 54 | @if ($type == pull) and ($index == 0) { 55 | .col-#{$class}-pull-0 { 56 | right: auto; 57 | } 58 | } 59 | @if ($type == offset) { 60 | .col-#{$class}-offset-#{$index} { 61 | margin-left: percentage(($index / $grid-columns)); 62 | } 63 | } 64 | } 65 | 66 | // [converter] This is defined recursively in LESS, but Sass supports real loops 67 | @mixin loop-grid-columns($columns, $class, $type) { 68 | @for $i from 0 through $columns { 69 | @include calc-grid-column($i, $class, $type); 70 | } 71 | } 72 | 73 | 74 | // Create grid for specific class 75 | @mixin make-grid($class) { 76 | @include float-grid-columns($class); 77 | @include loop-grid-columns($grid-columns, $class, width); 78 | @include loop-grid-columns($grid-columns, $class, pull); 79 | @include loop-grid-columns($grid-columns, $class, push); 80 | @include loop-grid-columns($grid-columns, $class, offset); 81 | } 82 | -------------------------------------------------------------------------------- /src/scss/bootstrap/mixins/_forms.scss: -------------------------------------------------------------------------------- 1 | // Form validation states 2 | // 3 | // Used in forms.less to generate the form validation CSS for warnings, errors, 4 | // and successes. 5 | 6 | @mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) { 7 | // Color the label and help text 8 | .help-block, 9 | .control-label, 10 | .radio, 11 | .checkbox, 12 | .radio-inline, 13 | .checkbox-inline, 14 | &.radio label, 15 | &.checkbox label, 16 | &.radio-inline label, 17 | &.checkbox-inline label { 18 | color: $text-color; 19 | } 20 | // Set the border and box shadow on specific inputs to match 21 | .form-control { 22 | border-color: $border-color; 23 | @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work 24 | &:focus { 25 | border-color: darken($border-color, 10%); 26 | $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%); 27 | @include box-shadow($shadow); 28 | } 29 | } 30 | // Set validation states also for addons 31 | .input-group-addon { 32 | color: $text-color; 33 | border-color: $border-color; 34 | background-color: $background-color; 35 | } 36 | // Optional feedback icon 37 | .form-control-feedback { 38 | color: $text-color; 39 | } 40 | } 41 | 42 | 43 | // Form control focus state 44 | // 45 | // Generate a customized focus state and for any input with the specified color, 46 | // which defaults to the `$input-border-focus` variable. 47 | // 48 | // We highly encourage you to not customize the default value, but instead use 49 | // this to tweak colors on an as-needed basis. This aesthetic change is based on 50 | // WebKit's default styles, but applicable to a wider range of browsers. Its 51 | // usability and accessibility should be taken into account with any change. 52 | // 53 | // Example usage: change the default blue border and shadow to white for better 54 | // contrast against a dark gray background. 55 | @mixin form-control-focus($color: $input-border-focus) { 56 | $color-rgba: rgba(red($color), green($color), blue($color), .6); 57 | &:focus { 58 | border-color: $color; 59 | outline: 0; 60 | @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba); 61 | } 62 | } 63 | 64 | // Form control sizing 65 | // 66 | // Relative text size, padding, and border-radii changes for form controls. For 67 | // horizontal sizing, wrap controls in the predefined grid classes. `