== Plan (YMMV)
# Remove all module definitions from the codebase.
# The code for `ext.popups.renderer.mobileRenderer` and `ext.popups.targets.mobileTarget` (defined in `PopupsHooks#onResourceLoaderRegisterModules`) should be removed from the codebase.
# Add the `ext.popups.lib` module, which contains [Redux@3.6.0](https://unpkg.com/redux@3.6.0/dist/redux.min.js).
# Define and document the set of events that Hovercards should respond to.
# Create actions for those events.
# Move all DOM event handlers into a single file and add unit tests.
# Each handler should dispatch an action against the store.
# Run QUnit tests in Node.js by repurposing [I00045bb9: Add isolated unit testing with npm run test:unit](https://gerrit.wikimedia.org/r/#/q/I00045bb914d101ff67398a891c9b42f387e5332c).
# Create the `controller` module, which contains the code responsible for maintaining the entire state of the system (which link is being interacted with, whether the link's title attribute should be scrubbed, timers, the render cache, the popup element and if it's visible or is being animated, etc.) by consuming `ext.popups.event` events and triggering actions when certain state transitions occur, i.e.
```lang=javascript
var controller = createController( /* initialState = */ {} );
mw.trackSubscribe(
'ext.popups.event',
event => controller.onEvent( event )
);
```
8. Extract the API-related code from `ext.popups.renderer.article` to the `api` module.
# `api` subscribes to updates from the `controller` and makes an API request if the state has the correct shape. An event is dispatched when the API request is made, completes, or encounters an error.
# Ensure that anchor `title` attribute manipulation and hook firing code is removed.
# Extract the rendering code from the `ext.popups.renderer.article` module to the `renderer` module.
# `renderer` subscribes to updates from the `controller` and renders a Hovercard if the state has the correct shape.
# `mw.popups.render( data )` returns a DOM element ready to be inserted into the DOM.
# The results of `mw.popups.render` may be cached in order to improve rendering performance but the caching behaviour should be distinct from the rendering behaviour.
== Considerations
# Hovercards is event driven. We should consider using [RxJS](https://github.com/Reactive-Extensions/RxJS) to simplify a lot of the logic around subscribing to streams of DOM events and timers.
# We should strongly consider using [Redux](http://redux.js.org/) to implement `controller`.
# It has [a well-defined language that we can use to talk about modelling applications](http://redux.js.org/docs/basics/).
# It's battle tested.
# It's 2kB.
# It's incredibly well documented. Indeed, I wish I could write documentation like that…
=== Etherpad
I'm keeping a diary/my notes in [an Etherpad](https://etherpad.wikimedia.org/p/T149801).
== Acceptance criteria
Full requirements at: https://www.mediawiki.org/wiki/Beta_Features/Hovercards/Functionality (draft: https://docs.google.com/document/d/1A53OEJpjzjSgGKWTCwUPSqNopTNskr_i8oElwzOX9Uc/edit?ts=58123738#heading=h.p7d3kocgqxg8 )
**Summary of the article:**
- Article summary will contain the first 525 characters from the lead paragraph of each article
- After the first 525 characters, a horizontal gradient will be displayed to indicate continuation (as in related pages). More info here: https://phabricator.wikimedia.org/T67845
- The first instance of bolded text within the article will appear bolded within a hovercard. Any other instance of bolded text will not appear bolded
- More info here: https://phabricator.wikimedia.org/T141651
- If an article has no lead paragraph, a generic hovercard will be used (more info below)
**Visual Design Criteria**
Page previews need visual design improvement in three areas
1. depth of shadow
3. no border
4. transition time
New Properties
```
.mwe-popups {
box-shadow: 0 45px 70px -20px rgba(0,0,0,0.3), 0px 0px 1px rgba(0,0,0,0.5);
border:none;
}
```
Before: {F4729434}
After: {F4729432}
**transition time**
There are two time constants for Pagepreview to appear
1. delay
2. transition time after the delay
We need to reduce the second value from 0.3s to 0.2s and keep the delay constant.