Initial public beta version of Bookalope’s InDesign extension.

README.md

@@ -1,2 +1,82 @@
 # Bookalope-CEP
-Adobe CEP extension for InDesign to use the Bookalope cloud services.
+
+## Introduction
+
+[Adobe CEP](https://github.com/Adobe-CEP), or Common Extensibility Platform, provides a framework to extend Adobe applications like [InDesign](http://www.adobe.com/products/indesign.html) with custom user interfaces and functionality. There is a wealth of useful extensions available on [Adobe’s Add-On Marketplace](https://creative.adobe.com/addons).
+
+This repository contains the complete source code for [Bookalope](https://bookalope.net/)’s InDesign extension. The extension uses the [Bookalope REST API](https://github.com/jenstroeger/Bookalope/blob/master/API.md) and its [Javascript wrapper](https://github.com/jenstroeger/Bookalope/blob/master/clients/javascript/bookalope.js) to integrate the Bookalope toolset into InDesign. For more information on Bookalope and its services, please refer the the website.
+
+## Requirements
+
+The extension currently requires Adobe InDesign version 11 or 12. However, the extension may run on older versions that provide CEP support, but that hasn’t been tested.
+
+## Coding
+
+Read a general introduction to writing an Adobe CEP extension [here](http://www.adobe.com/devnet/creativesuite/articles/a-short-guide-to-HTML5-extensions.html). For more information on the Bookalope API please refer to the [documentation on Github](https://github.com/jenstroeger/Bookalope).
+
+InDesign does not load an extension unless the extension has been cryptographically signed. Therefore, in order to run the Bookalope extension from source, you need to switch InDesign to _PlayerDebugMode_:
+
+ - On Mac, open the file `~/Library/Preferences/com.adobe.CSXS.4.plist` and add a row with key `PlayerDebugMode` of type String and value `1`.
+ - On Windows, open the registry key `HKEY_CURRENT_USER/Software/Adobe/CSXS.4` and add a key named `PlayerDebugMode` of type String and value `1`.
+
+If you have multiple CSXS versions installed, add the `PlayerDebugMode` to all of them.
+
+For InDesign to find and load the Bookalope extension, copy the entire `extensions/Bookalope` folder to:
+
+ - On Mac: `~/Library/Application Support/Adobe/CEP/extensions`
+ - On Windows: `%APPDATA%\Adobe\CEP\extensions`
+
+Then start InDesign, and the extension should be available from the _Window → Extensions_ menu.
+
+### Debugging
+
+Debugging the ExtendScript side of the extension doesn’t really work. However, I found it helpful to use the [ExtendScript Toolkit](http://www.adobe.com/au/products/extendscript-toolkit.html), connect it to a running InDesign instance, and prototype the code there before using it for the Bookalope extension.
+
+Debugging the Javascript side is easier. The file `extensions/Bookalope/.debug` configures a remote debugger which can connect to a running InDesign instance. Once the extension panel is open, navigate the [Chrome web browser](https://www.google.com/chrome/) (or alternatively, the [Adobe cef-client](https://github.com/Adobe-CEP/CEP-Resources)) to `localhost:8001` and enjoy…
+
+## Building
+
+To build the extension and generate an Adobe Zip Format Extension Package (`.zxp`) use Adobe’s [ZXPSignCmd tool](https://github.com/Adobe-CEP/CEP-Resources/tree/master/ZXPSignCMD). You also need a valid [PKCS 12](https://en.wikipedia.org/wiki/PKCS_12) certificate. If you don’t have one yet, you may generate one using e.g. [OpenSSL](https://www.ssl.com/how-to/create-a-pfx-p12-certificate-file-using-openssl/) or the ZXPSignCmd itself:
+
+    > # ZXPSignCmd -selfSignedCert <countryCode> <stateOrProvince> <organization> <commonName> <password> <outputPath.p12> [options]
+    > ZXPSignCmd -selfSignedCert AU QL Bookalope Bookalope MyPa55w0rd bookalope-cep-cert.p12
+
+Once you’ve created the certificate, package and sign the extension itself:
+
+    > # ZXPSignCmd -sign <inputDirectory> <outputZxp> <p12> <p12Password> [options]
+    > ZXPSignCmd -sign ./extensions/Bookalope com.bookalope.zxp bookalope-cep-cert.p12 MyPa55w0rd -tsa https://timestamp.geotrust.com/tsa
+
+Finding a [Trusted Timestamping Authority (TSA)](https://en.wikipedia.org/wiki/Trusted_timestamping) that works for ZXPSignCmd seems to be challenging at times, so take a look at [this list of possible options](http://www.davidebarranca.com/2017/04/html-panel-tips-24-fixing-zxp-timestamping-errors/).
+
+## Installing
+
+The easy way to install the packaged and signed extension is by using [Anastasiy’s Extension Manager](http://install.anastasiy.com/). The nerdy way is to use Adobe’s [ExManCmd tool](https://www.adobeexchange.com/resources/28):
+
+    > ExManCmd --list all  # List all installed extensions
+    > ExManCmd --install ./com.bookalope.zxp  # Install the Bookalope extension
+
+Then start InDesign, and the extension should be available from the _Window → Extensions_ menu.
+
+## Running
+
+Once installed, open the extension panel:
+
+<img src="https://bookalope.net/img/idsn-bookalope-upload.png" width="50%" alt="Bookalope InDesign: Upload panel">
+
+To use the Bookalope web services, you need a Bookalope API key: you can find the key in the [user profile](https://bookflow.bookalope.net/profile) of your Bookalope account. Then select a book manuscript in Word format (or any other of the [supported document formats](https://github.com/jenstroeger/Bookalope/blob/master/API.md#get-formats)), fill in `Name` and `Author` of the book, and then click the `Upload and convert` button.
+
+The extension uploads the document to the Bookalope server for analysis and conversion. This can take a little while. Once finished, the extension downloads the converted file, creates a new InDesign document, and places the downloaded content into the new InDesign document. The extension’s panel changes now to this:
+
+<img src="https://bookalope.net/img/idsn-bookalope-update.png" width="50%" alt="Bookalope InDesign: Update panel">
+
+From here, you can open the document on the Bookalope website to revisit and adjust the entire analysis and conversion flow (watch the video tutorials on [Youtube](https://www.youtube.com/channel/UCCxR_k6G06qEAj3IjZ9AcoQ)). You can also download the converted document in EPUB, MOBI, or print-ready PDF formats.
+
+## Further Documentation
+
+Writing an Adobe CEP extension requires documentation which is not always readily available. However, some useful resources are:
+
+ - The Adobe CEP resources on Github is [here](https://github.com/Adobe-CEP/CEP-Resources),
+ - The ExtendScript documentation is [here](http://www.indesignjs.de/extendscriptAPI/indesign-latest/),
+ - Davide Barranca’s [blog](https://www.davidebarranca.com/category/code/) contains useful tips.
+
+In addition to the above, the [InDesign Scripting Forum](https://forums.adobe.com/community/indesign/indesign_scripting) might be useful, or the [#cep channel on Slack](https://adobedevs.slack.com/messages/C1FKLQ63F) is a playground to many experienced developers.

extensions/Bookalope/.debug

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ExtensionList>
+  <Extension Id="com.bookalope.panel">
+    <HostList>
+      <Host Name="IDSN" Port="8001"/>
+    </HostList>
+  </Extension>
+</ExtensionList>

extensions/Bookalope/CSXS/manifest.xml

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ExtensionManifest Version="5.0" ExtensionBundleId="com.bookalope" ExtensionBundleVersion="0.9.3" ExtensionBundleName="Bookalope" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
+    <Author>Jens Troeger, Bookalope</Author>
+    <Abstract>Adobe CEP extension for InDesign to use the Bookalope cloud services.</Abstract>
+    <ExtensionList>
+        <Extension Id="com.bookalope.panel" Version="0.9.3" />
+    </ExtensionList>
+    <ExecutionEnvironment>
+        <HostList>
+             <Host Name="IDSN" Version="[11.0,12.9]" />
+        </HostList>
+        <LocaleList>
+            <Locale Code="All" />
+        </LocaleList>
+        <RequiredRuntimeList>
+            <RequiredRuntime Name="CSXS" Version="5.0" />
+        </RequiredRuntimeList>
+    </ExecutionEnvironment>
+    <DispatchInfoList>
+        <Extension Id="com.bookalope.panel">
+            <DispatchInfo >
+                <Resources>
+                    <MainPath>./index.html</MainPath>
+                    <ScriptPath>./jsx/bookalope.jsx</ScriptPath>
+                    <!-- Can I not list multiple jsx scripts here? -->
+                </Resources>
+                <Lifecycle>
+                    <AutoVisible>true</AutoVisible>
+                </Lifecycle>
+                <UI>
+                    <Type>Panel</Type>
+                    <Menu>Bookalope</Menu>
+                    <Geometry>
+                        <Size>
+                            <Width>400</Width>
+                            <Height>260</Height>
+                        </Size>
+                        <MinSize>
+                            <Width>400</Width>
+                            <Height>260</Height>
+                        </MinSize>
+                        <MaxSize>
+                            <Width>400</Width>
+                            <Height>260</Height>
+                        </MaxSize>
+                    </Geometry>
+                    <Icons>
+                      <!--
+                        <Icon Type="Normal">./icons/iconNormal.png</Icon>
+                        <Icon Type="RollOver">./icons/iconRollover.png</Icon>
+                        <Icon Type="Disabled">./icons/iconDisabled.png</Icon>
+                        <Icon Type="DarkNormal">./icons/iconDarkNormal.png</Icon>
+                        <Icon Type="DarkRollOver">./icons/iconDarkRollover.png</Icon>
+                      -->
+                    </Icons>
+                </UI>
+            </DispatchInfo>
+        </Extension>
+    </DispatchInfoList>
+</ExtensionManifest>

extensions/Bookalope/css/bookalope.css

@@ -0,0 +1,185 @@
+
+/* Those classes will be edited at runtime with values specified by the settings of the CC application */
+
+.hostFontColor {
+}
+
+.hostFontFamily {
+}
+
+.hostFontSize {
+}
+
+.hostFont {
+}
+
+.hostBgd {
+}
+
+.hostBgdLight {
+}
+
+.hostBgdDark {
+}
+
+.hostElt {
+}
+
+/* Panel styling */
+
+@font-face {
+  font-family: "Noto Sans";
+  src: url("../font/NotoSans-Regular.ttf");
+}
+@font-face {
+  font-family: "Noto Serif";
+  src: url("../font/NotoSerif-Regular.ttf");
+}
+
+body {
+  color: #d6d6d6;
+  background-color: #494949;
+  font: normal 12px "Noto Sans", Helvetica, Arial, sans-serif;
+  padding: 10px;
+ /* Enable for browser testing.
+  width: 400px;
+  height: 290px;
+ */
+}
+
+:focus {
+  outline: none;
+}
+
+#content {
+  width: 100%;
+  height: 100%;
+}
+#content,
+#content * {
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+}
+
+#bookalope-upload {
+  display: none;
+}
+
+#bookalope-update {
+  display: none;
+}
+
+div.form-row:nth-child(n+0):nth-child(-n+3) {
+  padding-bottom: 5px;
+}
+
+.form-row {
+  overflow: auto;
+}
+
+.buttons-row {
+  margin-top: 10px;
+  padding-left: 25%;
+}
+
+label {
+  float: left;
+  width: 25%;
+  padding-right: 10px;
+  text-align: right;
+}
+
+.input-wrapper {
+  width: 75%;
+  float: left;
+}
+
+.file-wrapper {
+}
+
+.p-wrapper{
+}
+
+.checkbox-radiobutton-wrapper {
+  margin-left: 25%;
+}
+.checkbox-radiobutton-wrapper label {
+  float: none;
+}
+
+.status-message-box {
+  position: absolute;
+  bottom: 0;
+  padding-bottom: 5px;
+}
+.status-type-info {
+  color: #d6d6d6;
+}
+.status-type-error {
+  color: #ec514e;
+}
+.error-row {
+  border: solid 1px red;
+}
+
+input[type="text"] {
+  width: 100%;
+  padding: 2px;
+  border: 1px solid #272727;
+  background-color: #a2a2a2;
+  font: normal 12px "Noto Sans", Helvetica, Arial, sans-serif;
+}
+
+input[type="file"] {
+  font: normal 12px "Noto Sans", Helvetica, Arial, sans-serif;
+}
+
+input[type="checkbox"] {
+}
+
+input[type="radio"] {
+}
+
+button {
+  border: 1px solid #272727;
+  background-color: #a2a2a2;
+  font: normal 12px "Noto Sans", Helvetica, Arial, sans-serif;
+}
+button:hover {
+  background-color: #737373;
+  cursor: pointer;
+}
+
+hr {
+  border-top-color: #343434;
+  border-left-color: #737373;
+  border-bottom-color: #737373;
+  border-right-color: #343434;
+}
+
+a {
+  color: #737373;
+  text-decoration: none;
+}
+a:hover {
+  color: #d6d6d6;
+  text-decoration: underline;
+}
+
+#spinner {
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+}
+#spinner > img {
+  position: absolute;
+  left: 180px;
+  top: 110px;
+  width: 40px;
+  height: 40px;
+}