print through web browser (#127)

* spawn a web server and open a printable view of the design in the user's web browser
  * configurable inclusion of client and operator views
  * editable fields for color names, client, title, and purchase order number
  * groundwork laid to save these parameters back into the SVG
* major refactor of codebase to support printing
  * code is organized logically into modules
* added inkstitch logo and branding guidelines
* l10n text extraction now handled by babel
* removed legacy embroider_update extension
* partial fix for #125 

1 files changed, 726 insertions, 0 deletions

diff --git a/print/resources/style.css b/print/resources/style.css
new file mode 100644
index 00000000..824f8dce
--- /dev/null
+++ b/print/resources/style.css
@@ -0,0 +1,726 @@
+@font-face {
+  font-family: 'Barlow Condensed';
+  font-style: normal;
+  font-weight: 400;
+  src: url(barlow_condensed.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Barlow';
+  font-style: normal;
+  font-weight: 400;
+  src: url(barlow.ttf) format('truetype');
+}
+
+
+@font-face {
+  font-family: 'Barlow';
+  font-style: normal;
+  font-weight: 700;
+  src: url(barlow-bold.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Barlow';
+  font-style: normal;
+  font-weight: 800;
+  src: url(barlow-extra-bold.ttf) format('truetype');
+}
+
+
+@font-face {
+  font-family: 'Barlow Condensed';
+  font-style: normal;
+  font-weight: 700;
+  src: url(barlow-condensed-bold.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Barlow Condensed';
+  font-style: normal;
+  font-weight: 800;
+  src: url(barlow-condensed-extra-bold.ttf) format('truetype');
+}
+
+@media screen {
+    .page {
+        margin-top: 20mm !important;
+        outline: 1px dotted grey;
+    }
+
+    .header-field::before {
+        content: attr(data-label);
+        padding-right: 0.5em;
+    }
+
+    [contenteditable=true]:empty::after{
+      content: attr(data-placeholder);
+      color: rgb(200, 200, 200);
+      font-weight: normal;
+    }
+}
+
+@media print {
+    body {
+      margin-bottom: 0 !important;
+    }
+
+    .page {
+        page-break-after: always;
+        margin: 0 !important;
+    }
+
+    .ui {
+      display: none;
+    }
+
+    #settings-ui {
+      display: none !important;
+    }
+    
+    #errors {
+      display: none !important;
+    }
+
+    .header-field:not(:empty)::before {
+        content: attr(data-label);
+        padding-right: 0.5em;
+    }
+}
+
+@page {
+    size: auto;   /* auto is the initial value */
+    margin: 0;
+}
+
+body {
+    font-family: "Barlow", sans-serif;
+    font-size: 8pt;
+    text-align: center;
+    color: rgb(80,80,80);
+    margin: 0;
+    margin-bottom: 5mm;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+.page {
+  width: 210mm;
+  height: 275mm;
+  padding: 5mm; 
+  background: #fff;
+  margin: 0 auto;
+  vertical-align: text-bottom;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Printing Size */
+  .page.a4 {
+    width: 205mm;
+    height: 292mm;
+    padding: 15mm;
+  }
+
+/* Settings */
+
+  .ui {
+    z-index: 1;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    padding: 1em;
+    text-align: center;
+    background: rgb(255, 255, 255);
+    background: rgba(255,255,255, 0.7);
+    border-bottom: 1px solid rgb(188, 188, 188);
+    border-bottom: 1px solid rgba(129, 129, 129, 0.5);
+    box-shadow: 0 1px 1px 1px rgba(194, 191, 191, 0.5);
+  }
+
+  .ui .header {
+    font-weight: bold;
+    font-size: 16pt;
+    float: left;
+    margin: 0.5em 0 0 1em;
+  }
+
+  .ui .buttons {
+    float: right;
+    margin-right: 50%;
+  }
+
+  .ui button {
+    margin: 0.5em;
+    background: white;
+    padding: 0.5em;
+    cursor: pointer;
+    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+  }
+
+  .ui button.close {
+    border: 1px solid rgb(197,5,5);
+    
+  }
+
+  .ui button.close:hover {
+    background: rgb(197,5,5);
+    color: white;
+    
+  }
+
+  .ui button.settings {
+    border: 1px solid rgb(243,204,35);
+  }
+
+  .ui button.settings:hover {
+    background: rgb(243,204,35);
+    color: white;
+  }
+
+  .ui button.print {
+    border: 1px solid rgb(50,132,50);
+  }
+
+  .ui button:hover {
+    background: rgb(50,132,50);
+    color: white;
+  }
+
+  #settings-ui {
+    display: none;
+    overflow: auto;
+    position: fixed;
+    right: 0;
+    left: 0;
+    z-index: 2;
+    width: 80%;
+    height: 80%;
+    margin: 0 auto;
+    padding: 2mm 5mm;
+    background: rgb(255, 255, 255);
+    background: rgba(255,255,255, 0.9);
+    border-bottom: 1px solid rgb(188, 188, 188);
+    border-bottom: 1px solid rgba(129, 129, 129, 0.5);
+    box-shadow: 0 1px 1px 1px rgba(194, 191, 191, 0.5);
+  }
+  
+  #settings-ui div {
+    text-align: left;
+    font-size: 12pt;
+  }
+
+  #close-settings {
+    position: absolute;
+    padding: 0.5em 1em;
+    right: 1em;
+    top: 1em;
+    margin: 0;
+    background: #c50505;
+    color: #fff;
+    font-weight: bold;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+/* Header */
+
+
+  header {
+    width: 100%;
+    height: 40mm;
+    margin: 0;
+    text-align: right;
+    display: flex;
+        display: -webkit-flex;  /* old webkit */
+        display: -ms-flexbox;   /* IE 10 */
+      flex-wrap: wrap;
+      flex-direction: column;
+  }
+
+  figure.brandlogo {
+    height: 30mm;
+    width: 30mm;
+    margin: 2.5mm;
+  }
+
+  figure.brandlogo img {
+    max-width: 30mm;
+    max-height: 30mm;
+  }
+  
+  .operator-detailedview figure.brandlogo {
+    height: 20mm;
+    width: 30mm;
+    margin: 0 2.5mm;
+    text-align: left;
+  }
+  
+  .operator-detailedview figure.brandlogo img {
+    max-width: 30mm;
+    max-height: 20mm;
+  }
+
+  div.headline {
+    display: flex;
+      display: -webkit-flex;  /* old webkit */
+      display: -ms-flexbox;   /* IE 10 */
+    width: calc(100% - 50mm);
+    height: 50%;
+  }
+
+  div.headline h1 {
+    font-size: 18pt;
+  }
+
+  div.headline p {
+    font-size: 12pt;
+  }
+
+  div.job-details {
+    display: flex;
+      display: -webkit-flex;  /* old webkit */
+      display: -ms-flexbox;   /* IE 10 */
+    width: calc(100% - 50mm);
+    height: 50%;
+    font-family: "Barlow Condensed", sans-serif;
+    font-size: 10pt;
+  }
+
+  div.job-details > div {
+    flex-grow: 1;
+  }
+
+  div.job-details .table {
+    display: table;
+    width: 100%;
+  }
+
+  div.job-details > div:last-child {
+    font-size: 12pt;
+  }
+
+  div.job-details p {
+    margin: 0;
+    display: table-row;
+  }
+
+  div.job-details p span {
+    display: table-cell;
+  }
+
+  div.job-details p span:first-child {
+    font-weight: bold;
+    padding-right: 1mm; 
+  }
+
+  div.job-details p span:last-child {
+    text-align: left; 
+  }
+
+  div.job-details > div:last-child span {
+    text-align: right !important; 
+  }
+
+  div.client-detailedview .job-details {
+    font-size: 12pt;
+  }
+
+  div.client-detailedview .job-details > div:first-child {
+    text-align: left;
+  }
+
+  .pageTitle {
+    text-align: left;
+    flex-grow: 1;
+  }
+
+  .pageTitle h1,
+    .pageTitle p {
+    margin: 0;
+  }
+
+  .currentDate {
+    font-size: 12pt;
+    font-weight: bold;
+  }
+  
+  /* client dedailed view header */
+  .client-detailedview div.job-details p span:first-child {
+    width: 20mm; 
+  }
+  
+  .client-detailedview div.job-details p span:last-child {
+    max-width: 60mm; 
+  }
+  
+
+/* SVG Preview Image */
+
+  figure.inksimulation {
+    width: 100%;
+    height: 175mm;
+    background: #fff;
+    margin: 0 auto;
+    text-align: center;
+    border: 1mm solid grey;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .client-overview-main figure.inksimulation {
+    height: 155mm;
+  }
+
+  figure.inksimulation svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+  }
+
+  figure.inksimulation figcaption {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    font-size: 12pt;
+    font-weight: bold;
+    line-height: 12pt;
+    margin: 2.5mm;
+  }
+
+/* Color Swatches */
+
+  .color-palette {
+    width: 100%;
+    height: 40mm;
+    background: #fff;
+    padding-top: 1.5mm;
+    padding-bottom: 1.5mm;
+    margin: 0;
+    overflow: hidden;
+    display: flex;
+        display: -webkit-flex;  /* old webkit */
+        display: -ms-flexbox;   /* IE 10 */
+      align-items: stretch;
+      flex-wrap: wrap;
+  }
+
+  .color-swatch {
+    font-family: "Barlow", sans-serif;
+
+    /* white text on dark colors doesn't print well unless it's bold */
+    font-weight: 700;
+    font-size: 12pt;
+    color: black;
+    background: white;  
+    border: 0.5mm solid white;
+    margin: 0px;
+    padding: 0px;
+    position: relative;
+    overflow: hidden;
+    flex-grow: 1;
+  }
+
+  .swatch-info {
+      text-align: left;
+      min-width: 20mm;
+      position: relative;
+      height: 100%;
+  }
+
+  .swatch-info .title {
+    font-weight: 800;
+  }
+
+  .color-swatch-svg rect {
+    border: 1px solid rgb(192, 192, 192);
+  }
+
+  .signature {
+    height: 20mm;
+    border: 0.5mm solid rgb(80, 80, 80);
+    flex-grow: 1;
+    line-height: 30mm;
+    text-align: center;
+  }
+  
+  /* detailedview color swatch */
+  
+  .color-palette.detailed > div {
+    height: 100%;
+    position: relative;
+  }
+  
+  .color-palette.detailed .color-info {
+    position: absolute;
+    top: 2mm;
+    left: 45mm;
+  }
+  
+  .color-palette.detailed .color-info > div {
+    display: table;
+  }
+  
+  .color-palette.detailed .color-info p {
+    display: table-row;
+  }
+  
+  .color-palette.detailed .color-info span {
+    display: table-cell;
+    padding-right: 5mm;
+  }
+  
+/* Operator Detailed View */
+
+  .operator-detailedview header {
+    height: 25mm;
+  }
+  
+  .operator-detailedveiw figure.brandlogo{
+    height: 15mm;
+    width: 15mm;
+  }
+  
+  .operator-detailedveiw figure.brandlogo img {
+    max-width: 12.5mm;
+    max-height: 12.5mm;
+  }
+
+  .operator-detailedview main {
+    height: 230mm;
+  }
+
+  .operator-job-info {
+    display: table;
+    width: 100%;
+  }
+  
+  .operator-job-info div {
+    display: table-row;
+  }
+  
+  div.job-headline {
+    display: table-header-group;
+    font-size: 9pt;
+    font-weight: bold;
+  }
+  
+  div.job-headline p {
+    height: 1em;
+  }
+  
+  .operator-job-info p {
+    height: 15mm;
+    max-width: 15mm;
+    display: table-cell;
+    vertical-align: middle;
+    position: relative;
+    overflow: hidden;
+    border: 1px solid rgb(239,239,239);
+  }
+  
+  .operator-job-info span {
+    display: block;
+  }
+  
+  .operator-job-info span.color-index {
+     position: absolute;
+     top: 0;
+     left: 0;
+     line-height: 15mm;
+     width: 10mm;
+   }
+  
+  .operator-svg.operator-colorswatch {
+    width: 15mm;
+  }
+  
+  .operator-svg.operator-preview {
+    min-width: 15mm;
+    max-width: 20mm;
+    height: 15mm;
+  }
+  
+  .operator-svg svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: auto;
+    max-width: 30mm;
+    height: 100%;
+  }
+  
+
+/* Footer */
+
+  footer {
+    width: 100%;
+    height: 7mm;
+    background: #fff;
+    margin-left: auto;
+    margin-right: auto;
+    white-space: wrap;
+    text-align: center;
+    padding-top: 2mm;
+    
+  }
+
+  footer p.num_pages {
+    float: right;
+    font-size: 12pt;
+    font-weight: bold;
+    margin-top: 0;
+  }
+
+/* Messages */
+
+  #errors.show {
+    display: block;
+    position: absolute;
+    right: 1em;
+    top: 1em;
+    color: red;
+    font-family: "Barlow", sans-serif;
+    font-size: 12pt;
+  }
+
+  #errors {
+    display: none;
+  }
+
+
+/* Color Swatch Logic */
+/* reference : http://jsfiddle.net/jrulle/btg63ezy/3/ */
+
+  /* one item */
+  .color-swatch:first-child:nth-last-child(n+1),
+  .color-swatch:first-child:nth-last-child(n+1) ~ .color-swatch {
+      font-size: 12pt;
+      height: 100%;
+  }
+
+  /* two items */
+  .color-swatch:first-child:nth-last-child(n+2),
+  .color-swatch:first-child:nth-last-child(n+2) ~ .color-swatch {
+      width: calc(100% / 2);
+  }
+
+  /* three items */
+  .color-swatch:first-child:nth-last-child(n+3),
+  .color-swatch:first-child:nth-last-child(n+3) ~ .color-swatch {
+    font-size: 12pt;
+    width: calc(100% / 3);
+  }
+
+  /* four items */
+  .color-swatch:first-child:nth-last-child(n+4),
+  .color-swatch:first-child:nth-last-child(n+4) ~ .color-swatch {
+      font-size: 10pt;
+      width: calc(100% / 4);
+  }
+
+  /* five items */
+  .color-swatch:first-child:nth-last-child(n+5),
+  .color-swatch:first-child:nth-last-child(n+5) ~ .color-swatch {
+    font-size: 9pt;  
+    width: calc(100% / 5);
+  }
+
+  /* six items */
+  .color-swatch:first-child:nth-last-child(n+6),
+  .color-swatch:first-child:nth-last-child(n+6) ~ .color-swatch {
+    font-size: 8pt;
+    width: calc(100% / 6);
+  }
+
+  /* seven items */
+  .color-swatch:first-child:nth-last-child(n+7),
+  .color-swatch:first-child:nth-last-child(n+7) ~ .color-swatch {
+      width: calc(100% / 4);
+      height: calc(100% / 2);
+  }
+
+  /* nine items */
+  .color-swatch:first-child:nth-last-child(n+9),
+  .color-swatch:first-child:nth-last-child(n+9) ~ .color-swatch {
+      width: calc(100% / 5);
+  }
+
+  /* eleven items */
+  .color-swatch:first-child:nth-last-child(n+11),
+  .color-swatch:first-child:nth-last-child(n+11) ~ .color-swatch {
+      width: calc(100% / 6);
+  }
+
+  /* thirteen items */
+  .color-swatch:first-child:nth-last-child(n+13),
+  .color-swatch:first-child:nth-last-child(n+13) ~ .color-swatch {
+      width: calc(100% / 5);
+      height: calc(100% / 3);
+  }
+
+  /*  fourteen items */
+  .color-swatch:first-child:nth-last-child(n+14),
+  .color-swatch:first-child:nth-last-child(n+14) ~ .color-swatch {
+    width: calc(100% / 5); 
+  }
+
+  /*  sixteen items */
+  .color-swatch:first-child:nth-last-child(n+16),
+  .color-swatch:first-child:nth-last-child(n+16) ~ .color-swatch {
+    width: calc(100% / 6);
+  }
+
+  /* nineteen items */
+  .color-swatch:first-child:nth-last-child(n+19),
+  .color-swatch:first-child:nth-last-child(n+19) ~ .color-swatch {
+    height: calc(100% / 4);
+    width: calc(100% / 5);
+  }
+    .color-swatch:first-child:nth-last-child(n+19) .swatch-info,
+    .color-swatch:first-child:nth-last-child(n+19) ~ .color-swatch .swatch-info {
+      margin-left: -1mm;
+      margin-top: -1mm;
+      height: calc(100% + 1mm);
+    }
+
+  /* twenty-one items */
+  .color-swatch:first-child:nth-last-child(n+21),
+  .color-swatch:first-child:nth-last-child(n+21) ~ .color-swatch {
+    width: calc(100% / 6);
+  }
+
+  /* twenty-five items */
+  .color-swatch:first-child:nth-last-child(n+25),
+  .color-swatch:first-child:nth-last-child(n+25) ~ .color-swatch {
+    width: calc(100% / 7);
+    font-size: 6pt;
+  }
+
+  /* twenty-nine items */
+  .color-swatch:first-child:nth-last-child(n+29),
+  .color-swatch:first-child:nth-last-child(n+29) ~ .color-swatch {
+    width: calc(100% / 9);
+  }
+
+  /* thirty-seven items */
+  .color-swatch:first-child:nth-last-child(n+37),
+  .color-swatch:first-child:nth-last-child(n+37) ~ .color-swatch {
+    width: calc(100% / 10);
+  }
+
+  /* fourty items */
+    .color-swatch:first-child:nth-last-child(n+40),
+    .color-swatch:first-child:nth-last-child(n+40) ~ .color-swatch {
+      width: calc(100% / 12);
+  }
+    
+  /* fourty-nine items */
+    .color-swatch:first-child:nth-last-child(n+49),
+    .color-swatch:first-child:nth-last-child(n+40) ~ .color-swatch {
+      height: calc(100% / 5);
+      width: calc(100% / 12);
+  }