paperhive / frontend

PaperHive frontend

PaperHive Frontend

Setup

Requirements

• nodejs and npm (included in nodejs): the easies way to install nodejs is via nvm

Configuration

The build (npm run build) and development (npm run watch) scripts respect these optional environment variables that you might want to change:

• PAPERHIVE_API_URL (optional): the PaperHive API to use. Defaults to https://dev.paperhive.org/master.
• PAPERHIVE_BASE_HREF (optional): the base path where the frontend is served. Defaults to /.

Build

git clone [email protected]:paperhive/paperhive-frontend.git --recursive
cd paperhive-frontend
npm install
npm run build

Upon completion, the files for deployment are placed in the directory build/.

Static files

Make sure you passed --recursive to the clone command (see above). If you switch branches and want to checkout the static files associated with the current branch run

git submodule update

Atom packages

The following atom packages are recommended:

• atom-typescript
• linter-tslint
• linter-eslint

Development

Running

npm run watch

continuously builds the project (upon changes of the code) and fires up an HTTP server which can be reached via http://localhost:8080.

Testing locally

Make sure that the frontend builds without errors,

npm run build

and that the selenium drivers are installed and up-to-date,

`npm bin`/webdriver-manager update

After that,

npm test

runs both unit and e2e tests.

License

The PaperHive frontend is licensed under the GPL3 license.

frontend's Issues

Feedback action item

As in http://goodio.com/ (right-hand side).

get bootstrap's JS elements back in

For this, the dependencies

"dependencies": {
    "angular": ">=1 <1.3.0"
}  

in https://github.com/angular-ui/bootstrap-bower/blob/master/bower.json need to be adapted.

store annotations in backend

Rename NotificationService -> notificationService

use strict globally

move mentio out to its own directive

Right now, user search and text replacement functions reside in CommentCtrl, but are not accessible from everywhere there. Moving out the entire mentio machine into its own directive will solve this.

make it possible to add images to comments

Enable PDF.js web workers

Currently the PDF.js web workers are not enabled because we use the combined js file. In this build, the web workers cannot be enabled since it is required to load a web worker from a separate file, see the docs. The web worker has to be excluded from the browserify build and should be minified separately.

inline comments: text selection removed when clicking on the comment panel next to textarea

When clicking on the comment panel next to textarea, the marked PDF text is unselected and not highlighted since the textarea ng-focus trigger doesn't go off.

Deserialization failure

Deserialization fails when switching from the discussion view to the text view.

Possible reason: controllers that are shared between views.

use devDependencies

Move the development dependencies from dependencies to devDependencies, either bower or npm.

list public questions in a central place

Give users incentives for answering those questions, too.

adapt width of boundary

Check out http://stackoverflow.com/q/6400326/353337.

This is for making more space for the annotations.

Rename templates/directive to templates/directives

Check out http://avatars.io/

Do they have SVG, image caching?

verify/test page speed, integrity

Check out
https://developers.google.com/speed/pagespeed
http://nibbler.silktide.com/en_US/reports/paperhub.io

MathJax crashes when `\\` is typed

The error message reads

Failed to load resource: the server responded with a status of 404 (Not Found)
(139) <error>
MathJax.js?config=TeX-AMS_HTML-full,Safe:19 Uncaught RangeError: Maximum call stack size exceeded

User settings: add `Delete account` box

return to the same URL after authorization

When authorizing from paperhub.com/foo/bar/, the user should be redirected to this page after the ORCID authorization dance.

Latex: link to wikipedia or howto in comment field

adjust page title by path

This will give structure to the browser history.

make PDF thumbnails links to actual pages

Natively scrolling with anchors # is not possible in Angular since # is already used for basic routing in angular.
Another difficulty is that the element with the referenced id is not immediately available on page load, but generated by the showPdf directive.

More on the problem here http://stackoverflow.com/questions/14712223/how-to-handle-anchor-hash-linking-in-angularjs.

checkout cloudflare for CDN serving

https://www.cloudflare.com/plans

sync from ORCID doesn't work anymore

TypeError: Cannot read property 'id' of undefined

Use ng-show instead of ng-if if not performance-critical

ng-show simply hides elements while ng-if actually removes them from the DOM.

Especially when custom handlers are in play (e.g., pdf selection), ng-if leads to nasty bugs because event handlers may be lost. I suggest we use ng-show everywhere unless the element is performance-critical. See also here.

highlight border around marked section for marginDiscussionDraft

Currently, this only works for marginDiscussion.

Show recently added articles on landing page

Use Page Header as a shared part

i guess it would be better to use the page header as a shared content element, which will be included with ng-include on the respective site, with dynamic content for each too.

Create DOM-neutral highlights

Don't use rangy's highlights – they modify the DOM and render serialized selections/ranges useless

template HTML validation

saucelab tests

http://docs.travis-ci.com/user/gui-and-headless-browsers/

'require' is not defined

Using strict mode (issue #84) in the JS brought up a general issue:

This is because require() does not exist in the browser/client-side JavaScript.

(from http://stackoverflow.com/a/19059825/353337).

We should probably review or use of require on the client side with respect to CommonJS, RequireJS, Browserify, ...

Helpful could be http://procbits.com/2013/06/17/client-side-javascript-management-browserify-vs-component.

Expose bibliographic metadata of articles

We could link to an external site for article metadata or offer an export of our metadata in several formats (e.g., bibtex). This doesn't have high priority right now but I'm adding the issue so we don't forget about it. :)

Thx @cholin for the feature request!

make entire inline comment clickable

The click should always expand the reply slot, not lead to the user page.

highlight deserialization fails if PDF isn't already loaded

Is almost guaranteed to happen when the pdf.js and the highlighter are racing.

Bootstrap, Less, CSS Namespaces

Prevent namespaces confusion, rename sm, xs, lg, md to small, extra-small, large and middle if it is not used for screen resolutions.

Example of wrong usage

Make links in PDFs clickable

Links to an anchor inside the document should be clickable. I'm not so sure about links to another website. Perhaps these links should be opened in a new tab?

@nschloe what do you think?

Thx @carlos-echeverria for reporting!

[gulp] use hash of generated files in filename

In order to avoid the usage of outdated cached files all generated files should be renamed such that the filename contains a hash of the content, e.g., with https://www.npmjs.com/package/gulp-md5-plus.

getRangesRects slow when text across multiple PDF pages is selected

Add pdf.js support for IE

We have to add compatibility.js from the pdf.js bower package, see https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq-support

add sub-sub-nav for article discussions

@pure180 maybe we can discuss this when you're available? :)

Check clearfix for floats

Apply clearfix class to containers of pull-right, pull-left or other classes that make use of the float property.

Links to text selections

If the user selects text in the PDF, a create link to selection option should be shown. When the generated URL is loaded, the previously selected text should be highlighted and the viewport should scroll to the corresponding position.

Thx @highlando for the feature request!

Edit my profile button appears with navigation style in mobile view

The button should appear as a regular button like in the desktop view:

@pure180 do you have an idea how to fix this in a clean way?

inline annotations: add privacy submenu (dropdown menu?)

This should possibly also be part of the regular discussions.

display how many comments are above and below the viewport

With some arrows, clickable of course.

General comment: limit the number of characters there

We already do that for inline comments. Possibly limit this in the backend?

add android, iphone, ipad, opera browsers to e2e tests

use ORCID icon

Check http://orcid.org/trademark-and-id-display-guidelines

Replace dummy content on landing page with useful content