search

simplajs / simpla-img

An editable image you can update inline, built on Simpla
https://www.simplajs.org
MIT License
6 stars 3 forks source link

[v1] Fix placeholder #48

Closed madeleineostoja closed 7 years ago

madeleineostoja commented 7 years ago

The placeholder for simpla-img is currently pretty broken. Turned out a lot of this was due to us working with an image with an empty src, which is actually not allowed and handled differently by every browser.

This PR shims these issues by making the 'empty' state of src a 1px transparent PNG (as data URI). The transparent PNG is 76 bytes which I think is acceptable (couldn't use GIF, because cropper spits back a PNG instead - this might be patched in 1.0-gif branch, if so we should use GIF pixel because it's about half the size at 48 bytes).

Also makes placeholder configurable with placeholder attribute (can take any valid CSS background prop - eg: colors, img urls).

Tested in Chrome, Safari, Firefox, and Edge.

Fixes https://github.com/SimplaElements/simpla-img/issues/47 and https://github.com/SimplaElements/simpla-img/issues/46 (though still kinda fugly that empty editor opens when placeholder clicked, but no longer breaking bug).

Oh and renamed editing to active to be consistent with other elements while I was in there.

madeleineostoja commented 7 years ago

Okay thought 'hey should make this pass tests' but then realised tests were totes broken on Travis and got a bit carried away. Have a gulp + travis refactor that should fix them sitting locally, but will push to 1.0 when this is merged. Also all tests pass locally...

Actually screw it will just push what I have here

bedeoverend commented 7 years ago

Tests are still shitty on img - want to write some nightwatch ones that are more generalised.

Also made review + comment

madeleineostoja commented 7 years ago

Updated with a check for default src value in Simpla connector (also fixed that gulpfile typo, oops).

Also, what's with the window._counter in simpla behavior? Leftover from debugging or something?

bedeoverend commented 7 years ago

👍

And yup, my bad 😞 was for debugging.

madeleineostoja commented 7 years ago

Ha figured, there were a few console logs lying around too (logging all the base64 data, was wondering why my inspector was freezing up haha). Will clean up and merge, cools?

bedeoverend commented 7 years ago

LGTM 👍