camwiegert / baffle Goto Github PK

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?

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.

If we're running a reveal, for simplicity, we should block all other method calls until it's done.

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.

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?

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.

When I initialized the library with a p tag containing a list with links, all the links were removed, as was the coloring.

A small test suite has been part of the plan, but I haven't gotten to it just yet.

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.

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?

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();

The main scrambler method is kind of unruly and needs a refactor, probably with some kind of state object. Rewrite as a class?

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.

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 :)

If the duration is long and there aren't enough characters to reveal evenly over that time, it should skip cycles 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?

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 |):

Example

baffle('.baffle', {
    resolveDirection: 'begin-end | end-begin | inside-out | outside-in | none'
});

Specification of the values

• begin-end: starts resolving at the beginning of the string and makes it's way through 'til the end.
  • alternative naming: left-right
• end-begin: opposite of begin-end
• inside-out: starts resolving at the middle of the string and consecutively resolves towards the beginning/end of the string
• outside-in: opposite of inside-out
• none(default): this is the resolve algorithm we have now (resolve randomly)
  • alternative naming: 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! 😉

The reveal method is pretty tangled up right now and needs some attention.

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.

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)

2

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:

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.

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?

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?

http://codepen.io/martyLauders/pen/VjgAyA

I've tried import baffle from 'baffle'; let b = baffle('#baffled'); b.start(); but it doesn't do anything at all.

The second param of the reveal function isn't documented on the website.

There's quite a few functions and methods right now that need some documentation. Mostly the interface methods.

If the scrambler isn't running and the text method is called, text isn't replaced again until run is called again.