camwiegert / baffle Goto Github PK
View Code? Open in Web Editor NEWA tiny javascript library for obfuscating and revealing text in DOM elements. :astonished:
Home Page: https://camwiegert.github.io/baffle
License: MIT License
A tiny javascript library for obfuscating and revealing text in DOM elements. :astonished:
Home Page: https://camwiegert.github.io/baffle
License: MIT License
There's quite a few functions and methods right now that need some documentation. Mostly the interface methods.
It would be fun to use this with emoji's, but i can't seem to get it to work. I tried it in a codepen, but it regulary shows the replacement character � instead of the emoji. Any idea why?
As of now, the default characters are pretty uncommon unicode characters that not all fonts have. That can lead to some weirdness. Should we default to something simpler and let people choose their own as needed?
my_baffle_node.reveal(5000)
my_baffle_node.reveal(10000)
my_baffle_node.reveal(1000000)
All seem to be revealing at the same time.
Am I doing something incorrectly?
Or is there a cap on reveal time?
I see that you can exclude certain characters from being obfuscated, however I was wondering if it's possible to use two different font's for the characters in options.fonts
.
Right now I'm using the array of characters from the example, ["█", "▓", "▒", "░", "█", "▓", "▒", "░", "█", "▓", "▒", "░"]
however I'd also like to include a single letter, but use a different from other characters as the unicode shade characters look ugly in the font i'm using for the letter.
The reveal method is pretty tangled up right now and needs some attention.
Currently, the reveal method flips each character by chance which leads to imprecision and unpredictability. It'd be nice to be able to provide a duration for the reveal and have it complete in that amount of time.
Hello
Love the finesse on Baffle! Noob Q: Any ideas on how to approach the creation of a GIF tool that can output the animated baffle text in a div?
It'd be nice to have a function queue so we can chain delays. That's a pretty common use and setTimeout isn't ideal.
baffle('.selector').start().delay(3000).reveal();
When I initialized the library with a p
tag containing a list with links, all the links were removed, as was the coloring.
2
When I click a link that scrolls the page or scroll the page clicking on the scrollbar and not releasing the cursor, baffle bugs and doesn't finish the effect.
You can test it on my website: https://carloswbarros.github.io/
The source code is here: https://github.com/carloswbarros/personal-website-source/blob/master/static/js/app.js#L88
Gif of the problem: http://g.recordit.co/DQvw2ar3pI.gif (sorry for the slow gif :p)
Can we add a chainable wait method? Like this... s.start().delay(5000).reveal();
?
As of now, it feels like it would require a big rewrite to implement a queueing system. I'm not ready to do that yet, but it can't hurt to write it down.
Hi,
I've tried to use baffle with angular 2 and angular cli but it produce a lot of errors with modules. Is there any way to this works?
Thanks
SOLVED - It was my fault whit. I imported the library erroneously.
The main scrambler method is kind of unruly and needs a refactor, probably with some kind of state object. Rewrite as a class?
Hey @camwiegert,
First of all, really awesome library! I love it! ❤️
I thought we could add an option for the direction in which the text resolves (currently it resolves randomly), like so (possible values are separated by |
):
baffle('.baffle', {
resolveDirection: 'begin-end | end-begin | inside-out | outside-in | none'
});
left-right
begin-end
inside-out
random
<- problem: could be confused with "select one resolveDirection
randomly"Do you have any ideas/improvements on this?
I'd love to create a PR for this! 😉
baffleFoo.text(currentText => "hello <i>world</i>");
This will output this:
hello <i>world</i>
But I want this:
hello world
Is there any option on your script to support .html() ?
Thank you :)
Wondering if it's worth trying to be non-destructive with the inner HTML of elements by recursively grabbing each child node and operating on them individually.
Very interested in this javascript library, and I found that it was firmly attached to the window.setInterval()
.
Ehmmm.. I think it is a little slow while running at the browser..
All the methods are called by chain..
I'm wondering if it can be used with Promise or async function(es7)?
just like that
// Promiselike
new Baffle('#id')
.then(start) // with the speed 50ms
.then(reveal) // with the reveal time 1000ms
.catch(error => {throw error;});
and each()
can be replaced by 'for-of' loop
(= ^ =)!
and I'm a college students in China ... would you mind if I translate the document into Chinese(simplified) :-)
Emm.. this would be very soon...
the partly translated demo is like that
# baffle.js
一个用于DOM元素**文本乱码模糊再恢复**的极简JavaScript库
[camwiegert.github.io/baffle](https://camwiegert.github.io/baffle)
> <img src="https://camwiegert.github.io/baffle/assets/images/baffle.js.png" width="500" alt="baffle.js">
- 压缩约 ~1.8kb :zap:
- 没有任何依赖 :tada:
- 支持IE9+ :heavy_check_mark:
The second param of the reveal function isn't documented on the website.
Hi, very nice module, but I can't come up when it could be useful.
For example I wouldn't prefer to obfuscate sensitive data such way, because nothing can stop a user from code inspection (e.g. from dev. toolse) and manual revealing obfuscated string. And for example if js is disabled, then obfuscating won't be happened at all.
The solution for sensitive data could be to generate obfuscated string on the server with some kind of private key and then deobfuscate this string with a public key on the client-side by request. But we haven't such ability since baffle
works only with DOM nodes and it needs additional information for revealing.
The only few cases I can come up are to have nice text animation on appearing or hiding text spoilers.
Could you provide with more real cases?
More of a feature request than an issue... When there's a sentence hidden, the spaces in the sentence are displayed as spaces. It would be nice to have the option to obfuscate the spaces too.
It looks like the inspiration (http://oak.is) does obfuscate spaces.
If we're running a reveal, for simplicity, we should block all other method calls until it's done.
Hi,
The baffle animation starts whether the element to be animated is in viewport or not.
Is it possible to reveal animation when element is in view?
I've tried import baffle from 'baffle'; let b = baffle('#baffled'); b.start();
but it doesn't do anything at all.
If the duration is long and there aren't enough characters to reveal evenly over that time, it should skip cycles as needed.
If the scrambler isn't running and the text
method is called, text isn't replaced again until run
is called again.
If you instantiate a scrambler on the same element multiple times, the intervals will pile up. Ideally, we would just return the existing interface again.
A small test suite has been part of the plan, but I haven't gotten to it just yet.
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.