libreliodev / javascript Goto Github PK
View Code? Open in Web Editor NEWHTML5 Customizable Reader & Admin Console - Librelio Digital Publishing Suite
Home Page: www.librelio.com
License: MIT License
HTML5 Customizable Reader & Admin Console - Librelio Digital Publishing Suite
Home Page: www.librelio.com
License: MIT License
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:
For each magazine, the following elements should be shown (from top to bottom):
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:
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:
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:
@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:
@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.
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:
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:
{
"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:
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:
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:
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:
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:
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:
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:
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:
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:
In the left menu (src/templates/partials/left.hbs), there is a div where we want to display:
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:
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:
We want to move the site into this project.
In order to do so, we need to:
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:
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:
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:
This can be done using https://github.com/Kerrick/Ladda-jQuery
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.