libreliodev / javascript Goto Github PK

The Magazine Covers Grid View shows all magazines available for reading. The contents of this tab is specified by a plist, named Magazines.plist, in http://librelio-europe.s3.amazonaws.com/[client_name]/[magazine_name]/Magazines.plist, where [client_name] and [magazine_name] should be specified in application_.json (see #28). In order to test, please use [client_name]=niveales and [magazine_name]=wind.

Magazines.plist is updated regularly, depending on the frequency of the magazine. So, the reader should query the S3 server on a regular basis (every 30 minutes). If an updated version of Magazines.plist is downloaded, the Magazine Covers Grid View should be refreshed accordingly.

Each magazine is specified by 3 elements:

• Title: the title of the magazine
• Subtitle: the subtitle of the magazine
• FileName: the source element for the magazine
  The magazines tab should display all available magazines in a grid similar to the one that we have on iOS.

For each magazine, the following elements should be shown (from top to bottom):

• the title and subtitle of the magazine
• a thumbnail of the magazine. This thumbnail is available on the S3 server as a png file having the same file name as the magazine (without the final underscore if there is one). For example if FileName is "MyMagazine.pdf", the thumbnail will be "MyMagazine.png".
• a "read..." button: this button should trigger download of the magazine (if available) or present the in app purchase module dialog. Subscribers with valid subscriptions should be able to download the magazine
• a "sample" button: this button should be displayed only when the magazine is not free and the paid version has not been downloaded. Paid magazines always have a FileName ending with "" (before the extension). So MyMagazine.pdf is a paid magazine, MyMagazine.pdf is a free one. The sample button should open the sample, or open the sample using the pdf reader to be specified later

The background of this page should an image specified in application_.json.

The push.hbs/push.html page contains a "Messages sent" table which is currently not populated. We now want to populate it. In order to so, when page is loaded:

• download the file [appname]/APP_/REPORTS/push_.tsv (this is a tab separated file)
• parse the tsv file and populate the table.

In order to parse the tsv file, the best option is probably to include the d3js library in the project, as we intend to use this library extensively in the future.

A setup.hbs/setup.html page has been created, to allow uploading and input of specific configuration items for each app.

The UI is in place, but there is no connection with the backend. We now need to complete the work as follows:

• when loading the page:
  • read [appfolder]/APP_/Uploads/setup_.plist and populate all text fields with a matching id
  • try to download all images and populate the corresponding image input fields on the page
• when the user enters something new in a field:
  • if it a text filed, update [appfolder]/APP_/Uploads/setup_.plist
  • if it is an image, upload the image to [appfolder]/APP_/Uploads/

We would like to be able to manage users who have access only to a single app, instead of multiple apps. This should work as follows:

• these users will have to enter the app directory path in the log-in dialog, for example "developer/app1"
• in this case, we will not need to list all the app directories of the user (anyway, this will not be allowed with their credentials): just select directly the relevant app (app1 in this case)

@serverfire @avinahum I am not sure when this happened, but I just noticed that the keys in Magazines.plist have been changed. This should not be done as there are a lot of dependencies outside.

What I have noticed is:

• FileName has been changed to FolderName: FileName should be kept, the name of the folder can easily be deducted from FileName which is in the form name/name.pdf or name/name_.pdf
• Type has been added, with values "Paid" or "Free". This should not be done. This value can also be deducted from FileName : if filename ends with a "_" (before the extension), then it's paid, otherwise not.

@serverfire @avinahum : can the one of you who made these unwanted changes make corrections?

A given user can manage different applications, which are listed at the root level of his directory on the S3 server.

There is a dropdown menu in the upper bar for the user to specify the app he is working on (see src/templates/partials/nav.hbs) . 2 things remain to be done:

1- Populate this dropdown menu with the names of the subdirectories located a the root level of the user's S3 directory.

2- When the user selects an app, save the choice in local storage, and reload the current page.

• On the publications.html page, the title of the right column covers the down/up arrows
  
• On the login page, the Facebook and Google login button look smaller than the rest, as well as the checkbox which looks smaller than the rest.
• On all pages with table, the search box is below the test "search:". It should be on the same line

If credentials are not stored in session or local storage (depending on wether or not the user checked the checkbox "remember me"), user should be redirected to login page (login.html, with template login.hbs).

Login page should allow to enter the AWS credentials (Developer
Access Key ID and Secret Access Key) and name of publisher (which matches name of root directory on the S3 server for the publisher).

Using the AWS SDK for Javascript (http://docs.aws.amazon.com/AWSJavaScriptSDK/guide/browser-examples.html) , the validity of the credentials should be tested. The best way to do this is to check wether the directory specified by the user exists. If fine, user should be directed to index.html, otherwise, a modal alert should be displayed.

Logout should be implemented from the red button at the top right

Currently, clicking on such publications (for example Wind 355) downloads the pdf file

cc @serverfire

Subissue of #30

In order to reproduce the bug:

• double click on pdf
• you would like to be able to drag the content in order to continue reading in zoom mode, but it's not possible

cc @serverfire

Subissue of #30

Consequently, the cover should be alone

cc @serverfire

The slideshow module is specified by a link with a numbered image, such as http://localhost/Photo_10.png.In this example, the slideshow includes 10 images: ➡ Photo_1.png ➡ Photo_2.png ➡ Photo_3.png ➡ Photo_4.png ➡ Photo_5.png ➡ Photo_6.png ➡ Photo_7.png ➡ Photo_8.png ➡ Photo_9.png ➡ Photo_10.png.

If the link contains warect=full (or example http://localhost/photo_5.png?warect=full), then the slideshow should be launched in full screen. If not, the slideshow should be launched only inside the region defined by the link in the pdf file.

If the link contains waplay=auto (for example http://localhost/photo_5.png?waplay=auto), then the slideshow should be launched automatically. If not, the slideshow should be monitored by the user swiping.

If the link contains watransition=none, there should be no transition between photos. Otherwise, there should be a transition from left to right or right to left.

If the link contains wadelay=xxx, there should be an xxx ms delay between photos

if the link contains wabgcolor=white, the slideshow should be displayed on a white background (otherwise, it should be black by default).

As implemented in #5, an icon is displayed in left bar when an app if chosen.

If the icon is not available, we should display a generic icon (src/assets/img/no-icon.png)

We have created a page push.hbs>push.html (src/templates/pages/push.hbs). This page is intended allow the admin to send push messages to the app's users.

This page needs to be completed with the appropriate javascript code using the aws sdk. When the admin clicks on send:

• if the message is empty (or >300 cars), display an error message
• if the message is OK, send it to topics arn:aws:sns:eu-west-1:105216790221:[name of publisher]_[name of app]_all, with the following syntax, and show a confirmation message:

 { 
    "default": "[message]", 
     "APNS": "{\"aps\":{\"alert\": \"[message]\",\"sound\":\"default\"} }", 
    "GCM": "{ \"data\": { \"[message]\": \"<message>\" } }", 
}

Sub issue of #30

This is because such links are "masked" by the active corner used for page curl

cc @serverfire

At this time, we already have a reader on iOS, Android, and Windows 8.

Now, we want to have an HTML5/JS version for users on PCs or Macs using a browser (this is not intended to be used on tablets or smartphones, native versions are far better).

To start with, what we need to do is:

• create an index.hbs page with "Hello World" (for the time being). Put this page in a specific "reader" directory in the appropriate res subdirectory
• create an application_.json file which will be used to configure the reader; the contents of this file will be similar to https://github.com/libreliodev/android/blob/master/res/values/application_.xml. Put it in the appropriate res subdirectory
• when generating pages with grunt, use a new subdirectory in dist ("reader"), in addition to "admin" and "www", in order to put pages and assets for this reader.

When using this menu, the user should be redirected to publications.html.

Also, the "SVG-Edit home" link should be removed

This module can be launched from inside a pdf file (using a link such as the ones on the last page of all Wind samples, starting with buy://), or from the Magazines view.

If the user did not log in previously, a modal dialog should be shown:

• If application_.json contains a CodeService field, the dialog should show only one input field, with the text "Enter your code" .
• If application_.json contains a UserService field, the dialog should show 2 input fields, with the text "Enter your user ID and password"

A cancel button should also be displayed.

After the user has entered their credentials, the web app should try to open the requested publication using the following URL:

http://download.librelio.com/downloads/subscribers.php?client=[publisher]&app=[app]&service=[userservice]&user=[user id]&pswd=[password]&urlstring=[relative url of pdf]&deviceid=[unique id of user device]

or

http://download.librelio.com/downloads/pswd.php?client=[publisher]&app=[app]&service=[codeservice]&code=[code]&urlstring=[relative url of pdf]&deviceid=[unique id of user device]

If the credentials are correct, the request will be redirected by our server to a temporary url allowing to download the publication, otherwise an error status header will be returned with an XML message. Here are the different types of error headers that can be returned:

401: incorrect code
461: incorrect user name or password
462: issue is not allowed for this subscriber

Subissue of #30

cc @serverfire

As a first step, we will need to implement pdf.js into the project. It may also be a good idea to look at http://www.maxims6n.bget.ru/pdf_books/demo_21.html to implement page curl effect

Then, we need to make some customizations in order to have the following features:

• depending on the geometry of the page, displays 1 page in portrait orientation, or 2 pages in landscape orientation
• when the user taps on the bottom of the page, displays a band with a preview of all pages. This band remains visible for a few seconds, and disappears if the user does not tap on a page thumbnail.
  - going from one (double) page to the next or previous one can be done by clicking on the right or left.
• a page curl effect is available when turning pages
• double click zooms 2x, double click again goes back to normal
• internal links (to another page in the document) or external ones should be active We use some specific links to enhance the pdf files:
• links with .mp4 or .mov files should open the video module (to be specified later)
• links with .png or .jpg files should open the slideshow module (to be specified later)
• links with the buy:// scheme should open the purchase module ((to be specified later)
• other links should open the corresponding web page in a new window

When possible, center the page where the double click occured.

Otherwise (if for example the double click occurred at the top of the page) make sure the target point of the double click is displayed

cc @serverfire

Subissue of #30

See explanations here: http://www.prepressure.com/pdf/basics/page-boxes

cc @serverfire

The best library seems to be http://www.localeplanet.com/index.html, but suggestions are welcome!

As mentioned in the pdf reader specifications (#30,#32,#33 ...), we support regular links, plus links with a specific syntax for videos and slide shows. We need to make it possible for our admin users to edit these links.

Here are the ideas we have about how this could work. @serverfire @intrications please let us know if you see potential issues in these first ideas:

• the interface should be similar to the one we have for our svg editor (#23)
• there should be a preview mode powered by the pdf reader
• when opening a page for editing, annotations should be displayed on the page, and stored in a temporary xml file
• admin user should be able to add or remove annotations using drag and drop similarly to our svg editor; temporary xml file should be updated and saved accordingly on the S3 server (or locally?)
• when admin user clicks on save, pdf file should be updated using the web service we are going to develop, specified here https://github.com/libreliodev/java/issues

Our final goal is to make it possible to edit publications from the console in various formats. As a first step, we are going to consider that we want to edit publications in svg format.

In order to achieve this, we are going to use the open source Google SVG Editor: http://svg-edit.googlecode.com/svn/branches/stable/editor/svg-editor.html.

What we need to do is:
1- Install this editor into our project using a new page called svgedit.html . This new page should not use the layout of our other console pages; it should be similar to http://svg-edit.googlecode.com/svn/branches/stable/editor/svg-editor.html, except the SVG-edit logo should be replaced by the Librelio Logo. However, this page should not be accessible without being logged in, so user should be redirected to log-in page if not logged-in, and then back to this page after logging in
2- When user selects menu "open image", display list of publications in svg format in current app, and make it possible to open one of them when clicking. If there are both a paid and free version of a publication, display both specifying (free) or (paid)
3- When user selects menu "import image", make it possible to open a local image from the user's computer
4- When user selects menu "save", if the opened publication was already on the server, update it, otherwise save it as a new free publication (as [filename]/[filename].svg)
5- Make it possible to open a publication for editing from the console, or by using svgedit.html?filename=[filename].svg. In order to access the editor from the console, user should click on the name of the publication on publications.html page. Once the user has clicked on the publication title , a new "edit" button should be added on the modification modal view (if the publication is in svg format). When the user clicks on "edit", a new window should be opened at svgedit.html?filename=[publicationname].svg

We have started creating a UI for the users page (users.hbs/users.html). The work should now be completed:

• On the table (list of users)
  • Change the column names: User Name, Password, Status
  • Populate the table from arn:aws:dynamodb:eu-west-1:105216790221:table/Subscribers, using hash [publisher]/[app]; if status of user is 1, show green button "active" , otherwise show red button "Inactive"
  • If admin clicks on an Active button, change the status to 0, and display Inactive button (and reciprocally)
  • make it possible to update user name or password, by clicking on them, and iopening modal dialog
• On the modal dialog to create new user, when user clicks on create, create new user; display error if user already exists, or user name is empty, or password is empty.

This seems to come from the latest commits for #9 and #11.

See original specs in #8

We need to create an interstitial page (interstitials.hbs/interstitials.html), in order to let the admin upload new ads that will be displayed when the app launches.

The interface should be similar to the one developed for publications (publications.hbs/publications.html). Instead of uploading free/paid versions and cover, the admin will need to upload the various sizes of ads specified at:

• https://github.com/libreliodev/iOS/wiki/Interstitial
• https://github.com/libreliodev/android/wiki/Interstitial

The admin will also need to enter the link for the ad. When this link is submitted, it should be stored inside a plist called Ad.plist

There are different options for the video module that are specified by the link calling the module.

If the link contains waplay=auto (for example http://localhost/video.mov?waplay=auto), then the video should be launched automatically. If not, the video should be launched only when the user has tapped on the play button.

If the link contains warect=full (or example http://localhost/video.mov?warect=full), then the video should be launched in full screen. If not, the video should be launched only inside the region defined by the link in the pdf file.

For the time being, on this page, we only want one table giving the number of paid and free downloads per publication.

The data will be available in a tsv file, located at [appname]/APP_/Reports/publications.tsv

As a reminder, all users ("publishers") have their own directory on our S3 bucket. In each user directory, there are 1 or more subdirectories corresponding to "Applications". The user can select the current Application as specified in #2.

Now, in each application directory, there are:

• subdirectories corresponding to "Publications"
• a plist (xml) file, usually named "magazines.plist" listing all active publications

We have created in this project a page (publications.hbs) which contains a table that we want to populate with the list of the user's publications. In order to do so, what needs to be done is:

1. Read on the S3 server the list of subdirectories of the current Application directory (excluding directories AAD, APP_ and APW_).
2. Populate the table with this list
3. Read and parse the magazines.plist file (using for example this library: https://github.com/pugetive/plist_parser).
4. Update the table by adding the Title and Subtitle found in magazines.plist, and marking the publication as "active"

This happens for example on Wind 355.
Crash report: https://gist.github.com/libreliodev/bd3e7b9d55377c2f9e22

Subissue of #30

cc @serverfire

As notably documented on this page, it's possible to login in AWS using Facebook or Google.

This should be done as follows:

• on the login.html page, add Log in with Facebook, and Log in with Google
• don't look for apps, automatically select "reader"
• don't ask for directory name at log in: instead, check if directory librelio/reader/[userid] exists; if it does not, send a message to topic arn:aws:sns:eu-west-1:105216790221:__createuserdir , and wait a few seconds for directory to be created.
• display only the setting and publications menu on the left
• in publications and edit pages, instead of looking for publications in [publisher]/[app], look for them in librelio/reader/[userid].

In the left menu (src/templates/partials/left.hbs), there is a div where we want to display:

• the name of the current publisher (entered at login, see #1)
• the name of the current app (see #2)
• the icon of the current app, which is stored at the following url: https://librelio-europe.s3.amazonaws.com/[name of publisher]/[name of app]/APP/SOURCES/iOS/Icon.png

Subissue of #30

Currently, page curl is only visible when turning page by dragging corners.

cc @serverfire

This could be done using https://github.com/faisalman/simple-excel-php

This should be done as follows:

• when a user tries to access [page].html?[args] on our server and is not logged in, redirect him to login.html?redirect=[page].html%3F[args]
• once the user has logged in, redirect him to [page].html?[args]

Use https://github.com/dobtco/formbuilder as a starting point

A specified in #9, publications can be uploaded to the S3 server.
It should be possible to update any of the uploaded files, and possibly to add missing assets.

The Librelio website currently runs on Wordpress, but it's actually mainly static. There is:

• a Bootstrap single page home page at www.librelio.com
• some legal stuff at http://www.librelio.com/customer-agreement and http://www.librelio.com/mentions-legales

We want to move the site into this project.

In order to do so, we need to:

• create 2 subdirectories inside dist: admin and www. The files generated by the current version of the project should now be placed into dist/admin by grunt. The new files generated for the web site should be placed into dist/www
• create hbs files to handle the home page of the site and the 2 other ones: the should probably be one hbs file for the menu, one for the footer, one for the body (maybe more)
• make sure the 2 forms on the home page keep working
• use markdown files as the source for http://www.librelio.com/customer-agreement and http://www.librelio.com/mentions-legales pages; we will provide the markdown files.

Subissue of #30

It would finally be better to hide/show lower bar when clicking anywhere on the screen (except on links). This is the way we do it on iOS, Android, and Win8.

cc @serverfire

Users should be able to browse their S3 directory (specified at login, see #1), create subdirectories, upload and move files, delete files.

There is probably an open source library for this, that may need to be adapted.

It takes significant time to load the pdf after clicking on one of the "sample" buttons.

We should display a progress bar for the user to understand that the magazine is loading

cc @libreliorip @serverfire

As specified in #8, the publications page (publications.hbs) contains a list a publications uploaded to the Application directory. Now, we want to make upload possible from this page.

In order to do this, we have added a "New publication" button. Clicking on this button opens a modal dialog, where we want to implement the upload feature. At this time, there are a few form elements that have been put here for testing purposes. Here are the real form elements that we want:

• Folder name: text input (note: hide all other fields until this one is specified)
• Free/Paid: Radio buttons
• Free version: file upload (note:start upload immediately)
• Paid version: file upload (note: show only if paid, start upload immediately showing progress bar)
• Medium res cover (1024 px height): image upload (note: start upload immediately)
• Low res cover (300 px height): image upload (note: start upload immediately)
• Assets: multiple uploader based on Plupload (see http://demo.onokumus.com/metis/form-wizard.html for an example)

As mentioned above, all files should start being uploaded immediately after user has selected them. A progress bar should be displayed, and an "x" should allow user to cancel upload. The uploaded files should be named as follows:

• Free version: [Folder name].[Extension](for example publication001.pdf)
• Paid version: [Folder name].[Extension](for example publication001.pdf)
• Medium res cover : [Folder name]_newssstand.png (for example publication001_newsstand.png)
• Low res cover : [Folder name].png (for example publication001.png)

See #6

I now get an error message when loading the push page:

DataTables warning (table id = 'dataTable'): Cannot reinitialise DataTable.

To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy

As specified in #8, the publications page (publications.hbs) contains a list a publications uploaded to the Application directory. Some of the publications are active, others not: the active ones are those listed in "magazines.plist".

Now, we want to make activation possible from this page. In order to do that, we need to:

• Add an "Activate" column in the table for the publications that are not active and "Deactivate" for the active publications
• Add a modal dialog that will be opened when a user clicks on "Activate". In the this modal dialog, include a form with Title and Subtitle text inputs, and an "Activate" button. When the user clicks on activate, update magazines.plist on the server
• When a user clicks on "Deactivate", show a dialog asking for confirmation; if user confirms, update Magazines.plist on the server by removing the corresponding entry.

This can be done using https://github.com/Kerrick/Ladda-jQuery