Displays a blurred version of the thumbnail
while the actual image loads
Displays a progress bar showing the image load progress
Animates into focus once the actual image is loaded
Change-Id: I2b8bc4691c20ffb5b3f16da9a8b9d6fd1796d784
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/146
Everything is under mw.mmv now.
(Also, I cut down on the number of direct global instance references a bit.)
Change-Id: I88bb3b62b82ce54126dd069b0aab4412d9404719
The old technique doesn't work in Firefox and
doesn't always work in Chrome depending on
when you call it.
https://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/
Also fixes some tests that weren't overloading
the right function and were hitting the real
feature detection check
Change-Id: I0a9d6b5654efb169860ddf7e5e0551efb825920c
* Fixes the bug where the browser hash would get nuked on
foreign anchor clicks
* Moves the hash handling back into the mmv itself
* Adds test coverage for the hash nuking bug
Change-Id: Iea57d0f4b9090f96e622418223d3f774923e8038
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/254
After lots of experimenting with Wireshark and
current Chrome + Firefox on Ubuntu 13.10, this is my
current understanding of the caching when preloading images
with AJAX requests:
* on Chrome, the image request always comes from browser cache
* Firefox makes two separate requests by default
* Firefox with img.crossOrigin = 'anonymous' makes two separate
requests, but the second one is a 304 (does not load the
image twice)
* when the image has already been cached by the browser (but not in
this session), Chrome skips both requests; Firefox skips the AJAX
request, but sends the normal one, and it returns with 304.
"wish I knew this when I started" things:
* the Chrome DevTools has an option to disable cache. When this is
enabled, requests in the same document context still come from
cache (so if I load the page, fire an AJAX request, then without
reloading the page, fire an AJAX request to the same URL, then the
second request will be cached), but an AJAX request - image request
pair is an exception from this.
* when using Ctrl-F5 in Firefox, requests on that page will never hit
the cache (even AJAX request fired after user activity; even if
two identical requests follow each other). When using clear cache
+ normal reload, this is not the case.
* if the image does not have an Allow-Origin header and is loaded
with crossOrigin=true, Firefox will refuse to load it. Chrome will
log an error in the console saying it refused to load it, but will
actually load it.
* Wireshark rocks.
Pushed some tech debt (browser + domain whitelist) into other tickets:
https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/232https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/233
Reverted commits:
8a8d74f01d.
63021d0b0e.
Change-Id: I84ab2f3ac0a9706926adf7fe8726ecd9e9f843e0
Bug: 61542
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/207
Since there was no merge conflict and the changeset worked pre-merge, when jenkins merged the fullscreen changeset, it actually turned out to be incompatible with the new code and spews out a nasty JS error. I think from now on I'll always avoid +2ing a diff that hasn't been rebased to the latest. When looking at the diff not rebased to the latest, you just can't see the issues that might happen with the latest code merged and you certainly won't spot the potential breakage that comes with it.
In fact I think a lot of breakages we've encountered as of late were caused by this very issue.
Change-Id: I46b7dd93c55635f34c01bd8d3eee9785140b5f35
fileUsage tests were applying styles to the fixture element, which
apparently does not get cleaned between tests. This was because
fileUsage.$container had different semantics from element.$container
(widget's own container div vs. parent container div). FileUsage
now inherits from Element to make sure behavior is consistent.
Change-Id: I8fab8bcf084d8b7e480655114506d9848e9d9a49
We have had this method in all Repo subclasses for a while, but sadly
it never got used and we've unintentionally crippled foreign DB repos
for some time now.
{{fixed}}
Change-Id: I972eb739cdd56c666981d5fbc371fa53024ff359
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/217
* more robust method of obtaining URL
* decouple performance logging from providers (mostly)
* ignore fake XHR object which jQuery returns for JSONP requests
* guard for CORS requests - apparently Chrome refuses to return
certain information even with an Allow-Origin: * response header.
* Resource Timing is limited to 150 results, which causes fake
misses in debug mode. There is an API to increase the limit
but it is not implemented in Chrome. I am calling it nevertheless,
maybe IE understands it (it is present in the MSDN docs at least).
This seems to work for AJAX, CORS, JSONP, image AJAX; CORS requests
return 0 for a lot of values, per spec a Timing-Allow-Origin: *
header might help that.
Change-Id: I8353858022f51a7e70774e65513d0fa2554a5064
When the lightbox is opened, or prev/next pressed, preloads the
previous/next N images.
Technical debt introduced:
* initialization is a mess, with the viewer and the interface
randomly setting properties on each other in different phases of
execution. That got in the way and I shuffled things around
until they worked, which is obviously not the way to have a
robust system, but hopefully it will get scrapped soon anyway
in favor of a clean top-down dependency injection.
Change-Id: Idcb5c40de1ac0b3e482decd66e56c4de8ec71b6b
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/155
A simple task queue which can be processed or cancelled.
Will be used to handle preloading in a more robust way.
Change-Id: Ib33f9b2d814a35538f9d4f3691fce5ba5cdc82c1
* moves generic logic into ThumbnailSizeCalculator class
* moves UI-specific logic into interface class
* fixes bug where non-bucketed sizes were served on devices with
non-standard pixel density
* fixes bug where bucketed size was compared to css size instead of screen size
for resizing
Change-Id: I8ba3380b74fcc8fb0a6ecc3f3140627411851ad0
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/196
* update paths
* make generate script return failure state on failure
* fix some issues so that it does not actually fail
Change-Id: Idd42e0d8e333c461091079aa1150b1b435e6360c
* userinfo api requests are cached now
* we use jsonp only if we have to (makes gender api calls measurable on WMF wikis)
* all API calls use providers now, provider.Api constructor can be used to
wrap mw.Api with metrics
Does not return a proper model, and gender API calls are not preloaded together
with the rest of the calls. Maybe next time.
Change-Id: I9b3ea73c65eef57e160ac8636d9e45d349150884
This reverts commit 4280dd8b83.
After product discussion, we decided this was a bad idea. Sorry, Tony.
Change-Id: Ib59d75132c2a301f83d080b0f963e2a9d8b9b277
Because we're that cool of a startup apparently
Also because organization and easy code manipulation.
Change-Id: I81ca302b6848f83034f7efed2443757bb045c4f1
Now,The lightbox interface will exit when the user clicks anywhere on
the image backdrop, which is convenient
Bug: 56402
Change-Id: I261976c81b86bf029412dff2993ee7b8c6d347e1
The issue was happening because the metadata div
was placed without waiting for dom load. Also, the code
ignored the fact that the window size might change
between page load and when the lightbox is open.
Change-Id: Ib44720a7f989803b3f59aebcd33e94f610f51325
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/141
The code was incorrectly adding the link to the first section
no matter what. This wasn't caught by the existing assertions,
so these are being improved as well.
Change-Id: I4dcbf44b504bd4cb875b4058fe5604f2a3c871b7
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/44
$.fn.msg breaks on beta for an unknown reason
Switching to mw.message which is used elsewhere in mmv
Change-Id: Id569df019c03b2f11fb513fcd3ed9ffc6eac7e91
Interface code is its own class which does not depend on the main
interface class it can be unit tested (and eventually moved into its
own file to make browsing the code easier). IMO we should aim to
eventually break up the interface into similar classes (with a simple
init/empty/set interface + custom events where it makes sense).
Also, sneak-introducing LESS!
API usage could be more effective (globalusage is a separate API call;
it needn't be), but we will have to rewrite that part soon anyway, so
it should pass for now.
Bug: 60087
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/44
Change-Id: Ibe5c323cdeab4a378316925f0c3efb3dc7ef5997
The code to load and set the image was semi-duplicated and
scattered in various places. This was the source of defects
as this code is called asynchronously and was hard to debug.
This change attemps ot consolidate all the image load logic
in one place. It also adds sorely needed unit tests.
Change-Id: I92eb1c48e2ff0808134e56b4b150e22254eb2d6e
When the multimedia panel is closed, the chevron
points upwards, otherwise it points downwards
Pressing the up and down arrows on the keyboard
opens and closes the metadata panel
Change-Id: I7dd31f3cc3d90f9342845faea2c6cfea3b40e232
This sorta has a few other miscellaneous fixes in it, but it works!
There are maybe still funky behaviours left. Test it?
Also refactor some bits, so we aren't accessing mw.mediaViewer in the
interface code.
Change-Id: I69db8e7b4ff5f994ba706fd4965688f3c26859f4
After checking all the code paths (phew !), it seems
this simple change takes care of the resolution issue
that surfaces mainly in iOS devices (see b/60388).
Bug: 60388
Change-Id: I867dd18f782126fb71eb52ec637a2b90b910050d
Next/prev caused an attach() call which in turn
replaced the lightbox elements with themselves
causing the browser to exit fullscreen mode
because the full screened element was shortly
removed from the DOM (to be replaced by the same content),
Unfortunately this cannot be covered by a test case
because the screen would have to truly go into fullscreen
mode for the bug to happen. Having QUnit go fullscreen
seems unreasonable both for local testing (annoying)
and automated testing (could fail to really fo fullscreen
because user confirmation is requested by the browser).
Change-Id: I57a2668179d6749188d7b5a3efcd06216b7747a9
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/139
This is a big change, but should change nothing except the sizes of some
files and where they all are.
There are no more ext.multimediaViewer strings ANYWHERE, so let's keep
it that way. :)
Change-Id: Ic0892f5894700938bfa01f3f9bc8e5ab8276eb72
It seems the problem was iOS specific. In retina displays the devicePixelRatio
turns out to be 2. This was making the images twice as wide. This was introduced
as a way to fix the resolution problem with some Apple devices, I suppose? Since this is not
fixing the problem I am removing it for the moment. Fixing the resolution issue implies
more changes that will be addressed in another iteration.
Bug: 60173
Change-Id: Iaff2aa6ba13ae85f905ab6d1569572881d8b5990
* Move description and caption to both be in the bottom left
* Make empty description grey and italic
* Fix problem where description was sometimes appended twice
* Move description UI stuff into a separate file, and make it more MVCy
* Tests for description UI stuff
* General framework, to an extent, for UI classes
Change-Id: Ibc8c576cd8a41c2e3cf7e13f1b9e093384fb4655
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/120
Also include the description on the right side of the page, but the caption
generally is more relevant and so should have the place of honour.
+tests
Change-Id: I512b3dd99207878233d501135b4dda0d0bd9cdd6
The foreign repo link in the details area will display the favicon
of the foreign repo when available.
Change-Id: Id946a80beeabcd526f16872efaedbdd291444d2d
Mingle: Multimedia card #107
Currently LIP.resizeCallBack was called even when lightbox was not appended, so I added a test to check the same.
Change-Id: Ie3a40a5d98f12a95b1d54e130896f67b71e927fa
Querying the uploader's gender defaults to CORS, which is disallowed
for non-WMF sites and spams the javascript console with XHR errors.
JSONP works in such cases, and has no disadvantages I can think of.
Change-Id: I9b13210e03059a46407f119045540665c48585ad
Image information and repo information are now both stored somewhere
else entirely, so we don't need to keep accessing weird API return
values to sort things out. fetchImageInfo now uses those classes to
an extent, and we now cache thumbnail URLs for different sizes.
Change-Id: Ife8293c86683ea914b1a5a60000584b501d92e55
Uses promises in the entirety of fetchImageInfo. Also removes the old
fetchRepoInfo method which was unused (basically) anyway.
Change-Id: Ie7f9a27822ecb893b99dbd755c6199769f2e6784
Not when going prev/next.
The saved position feature was probably broken as well if you
happened to press prev/next.
This was my mistake for not noticing that attach() runs on
prev/next.
Bug: 59861
Change-Id: Ic6ff4b15a54178fb5d38640317650f5676293083
fetchImageInfo() was used to load different property sets,
but had a single cache, so sometimes the results with less properties
overwrote the ones with more.
This is a dirty hack to deal with that. I will revisit once we
use promises.
Bug: 59817
Change-Id: I4f375bcc4e6fcfdb3e3fe7a30fc90a8fd44164c3
This is just a clever way of marking messages as being useful again -
this way I don't need to go through the hassle of deleting old data.
Change-Id: I6a0574eaae063014340484ffd2552f8118abb939
Makes sure that the advanced description is out of view when
the lightbox opens.
Remembers the scrollTop position that was set when the lightbox
opens, in order to restore it when it closes.
Change-Id: I534f7d718528d1e5a4911c68a524eb96cadeae90
Looks drastic at first, but grows on you.
I based this on an extreme, the firefox inner scrollbar.
Which is huge when hovered.
I kind of wish the close button was a bit bigger, though.
Change-Id: I2f47280c4e7c4bff299149de24741e3381f0b5e9
"Hey! Scroll down! Yeah, you!"
Also fixes the previous arrow button, which got disappeared at some point
Bug: 58431
Change-Id: I98676ee921dc1d3b5780046eabec7415c05f8f4f
'No description available' message has been added when description for the
given file is not available.
Bug: 56446
Change-Id: Ie239e5cd0d1b645ed149ea1ecc80197b0e84bc34
targetWidth was switched to even if the image was way smaller than it,
fixed by only changing to it if the image is too big (too-small images
should never be stretched anyway).
Change-Id: I9e3e6a358e53dbed988b730205a8afec1dbf3483
See the conversation on mediawiki.org:
http://ur1.ca/g14jv
We're trying this out as one option in combatting slow thumbnail load
times. It may or may not work very well.
Bug: 56695
Change-Id: If1211fdff87c0782c7355d654415bfd29d63d84a
The title attribute of the link that wraps the image
in "Use this file on another website" will be set to
the license and/or author of the image, if available.
Bug: 56588
Change-Id: I5f504964ec3a63e4927385cb68e90856eb4cfe37
Apparently they don't have server members, they only have descBaseUrl.
Annoying inconsistencies are annoying.
Bug: 57842
Change-Id: I56cbb6b8ba29cc03105942816f6fa0bad0d126f7
I guess this got torn out along the way, but I'm pretty sure this is
what I meant to do - initialize the image object with the thumbnail
URL and then replace it later.
+tests for the failure.
Change-Id: I20ef4e87c6b4b6706ad586f2aa5796736895c780
Also fixes a bug where we didn't clear our arrow key listeners, and VE
would sometimes see lightbox loads accidentally.
+tests for .empty()
Bug: 58107
Change-Id: Ica8326891b2da1f94966dbe72c28e878934ca64f
Third try, merged latest changes and added a test.
Run loading test against a wikipedia.org image.
Change-Id: I4e5a137e0f6dbedc45ec2c8393590919e23a26be
Makes it possible to view the entire content of the box without copying
the text somewhere else, or to only copy a part of the text.
Change-Id: I8ed8beaadf7e515e57ee4f11bdaef9672c980f5b
Add test to verify that in case of a resize event no image
replacement takes place when api data is empty/undefined.
Change-Id: I2a880ce4b2e6c158763b1473f6a9f751922187b0
These are just smoke tests. I will add more in coming versions of this change.
Consolidated various cases in one tests. Added tests to validate for legit clicks.
Based on Idfbec829399ff6969cd01be3c13a8ed7a66a1fef
Change-Id: I366c7af9a5cf43361d8293183c9da117bc5d4971
Return false from the click handler so it doesn't fire a popstate event
because the link is to "#"
Change-Id: I08a49e1b664dc4e6b01c1f479209428578d36843
Every patch we've submitted up until now has been magically very good
at jshint, because I'm appropriately OCD about it, but now we can actually
point at results.
Also we'll enable voting very soon.
Change-Id: I028fa78a47778c8a4050f6b77623c6bfdc4f9c5b
Id44fea9008adb391817250c2897693f45bead717 pushed a bunch of stuff into the
subclass of LightboxInterface, but forgot to change the calls to "this" in
the dialog function to be sane.
Bug: 57678
Change-Id: I998240411b0970d43d401f739b383c0289163760
Adds buttons on the side, disabled at the start and end of the list of
images, that let you browse through the images on the page!
Also arrow keys!
EXCITING!
Change-Id: Ie514cd4b16bdee8a384a89d4bd1d755a24c5cdb4
Also listen for popState events so users can use their browser's back
functionality to close the lightbox or go backwards, etc.
Bug: 56469
Change-Id: Id44fea9008adb391817250c2897693f45bead717
There's just no other adjective for this, it is _super_ nice.
There may be refinements later as the designers get things together.
Bug: 56499
Change-Id: I200684a19c190444587f520595186e9ae5afbea6
Simple now, only really aliases the classes, but we'll use them to replace
the hooking infrastructure in the near future.
Change-Id: I963a4887a717c9bb064e30fa5fb86bbccb7186a1
Add moment.js ( http://momentjs.com/ ) as a ResourceLoader module
and use it to parse and format date strings. Moment.js seems to be
the least bad option right now; eventually it should be replaced
by i18n functionality in core Javascript modules.
Change-Id: I332655778be3d694781b83fa5dea1e59770d8866
Split it into a bunch of different functions.
No helper functions because apparently most of my UI code is pretty
unique and not refactorable, or at least not easily.
Change-Id: I8209fd91ec6788c26b8dea26d97c26f8231ddbbf
Keep modules in separate dirs, move images to their module dirs, and fix
up the module declarations so they still work.
Also moved viewer.svg into the root.
Bug: 56421
Change-Id: Ia84ddfd3b91c784c42d9ba243c5cfd46354f139f
