Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

obscure, blank, and yank styling option #101

Open
hgiesel opened this issue Nov 28, 2019 · 5 comments
Open

obscure, blank, and yank styling option #101

hgiesel opened this issue Nov 28, 2019 · 5 comments
Milestone
v2.3

Comments

@hgiesel
Copy link
Owner

hgiesel commented Nov 28, 2019 •
edited
Loading

Having sets or elements, which don't show their content yet, but rather only show it after clicking on it.

Options:
obscure: bool
obscurePlaceholder: placeholder text, iff empty, obscure actual text instead
@hgiesel hgiesel changed the title clickme feature clickme styling option Nov 28, 2019
@hgiesel
Copy link
Owner Author

hgiesel commented Nov 29, 2019

You could also do it blurring:

.clickme {
  filter: blur(0.3em);
}
// or
.click-alt {
  color: transparent;
  text-shadow: 0px 0px 5px #00;
  // needs to define the color, which is a hassle
  // -> take first option if possible
}

@hgiesel
Copy link
Owner Author

hgiesel commented Nov 29, 2019

filter option seems to work on all platforms except IE

@hgiesel
Copy link
Owner Author

hgiesel commented Nov 29, 2019 •
edited
Loading

obscureShortcut: add an event listenener that listens to a specific keyboard shortcut, and reveals one obscured text after another.
obscureShortcutAll: reveals all.

@hgiesel hgiesel changed the title clickme styling option obscure styling option Nov 29, 2019
@hgiesel
Copy link
Owner Author

hgiesel commented Nov 29, 2019 

<html>
  <head>
    <style>
.obscure::after {
  content: 'XXXXXX';
  filter: blur(0.35em);
}

.obscure > span {
  display: none;
}
    </style>
  </head>

  <body>
    <span class="obscure"><span>Hello World, I am obscured</span></span>, but I am not
  </body>

  <script text="javascript">
    const removeObscure = function(event) {
      const obscureTag = document.body.querySelector('.obscure')
      event.target.classList.remove('obscure')
    }

    document.body.querySelector('.obscure').addEventListener('click', removeObscure)
  </script>
</html>

@hgiesel hgiesel added this to the v2.3 milestone Dec 1, 2019
@hgiesel
Copy link
Owner Author

hgiesel commented Dec 3, 2019 •
edited
Loading 

obscure: bool
obscureHint: bool (obscure will take original text as template, otherwise fixed length defined by obscureLength)
obscureLength: number (defaults to 5)
obscureClick: bool
obscureShortcut: number
obscureShortcutAll: number

blank: bool
blankHint: bool (obscure will take original text as template, otherwise fixed length defined by obscureLength)
blankHintRegex: string
blankLength: number (defaults to 5)
blankClick: bool
blankShortcut: number
blankShortcutAll: number

yankClick: bool
yankShortcut: number
yankShortcutAll: number

@hgiesel hgiesel mentioned this issue Feb 16, 2020
Closed
@hgiesel hgiesel changed the title obscure styling option obscure, blank, and yank styling option Feb 16, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
v2.3
Development

No branches or pull requests
1 participant
@hgiesel