jyoungblood / smoke.js Goto Github PK

Really loving this library, really nice.

But - there seems to be an issue with touch functions (touchstart, touchend, etc) in mobile safari.

Check the modified demo.html I've put up at http://mima.x.se/nils/smoke/demo.html

Apart from demo.html I've used the original package from github.

The confirm link has been modified to activate on "touchend" which screws up the confirm (it disappears within a fraction of a second). Binding it to a click event works fine.

User String on the iPad used:

Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B176 Safari/7534.48.3

When I try to use it in the html I got this error, in the browser console works.

Browser Chrome 12

Is it possible to update "ok" and "cancel" labels avoiding to specify this in all Smoke calls?

Sorry if I've duplicated the issue that I've already open some days ago but I don't know if you receive notifications if I add a comment on a closed issue.

You can see the comment here:
#37 (comment)

Is there anyway to access the destroy method globally using the smoke object? For example, if you are using the smoke library in Backbone and wanted to destroy the smoke object when navigating from one route to the other

The quiz function is useless for me because I cannot display more than 3 options.
The list of options should be customizable. For instance, the quiz function could receive a parameter options = [{value: 1, label: "Option 1"}, {value: 2, "Option 2"}]

How can I keep smoke.signal on the screen regardless of click or keypress? In other words, it stays until duration expires. Thanks.

I'm having this error when trying to display a smoke.alert when DOM is ready. It's working tho on a click event... Any ideas?

Wrong behavior when press Enter or Space in FF and Chrome:

• Alert doesn't close in both browsers.
• Confirm doesn't close in FF pressing Enter or Space.
• When press Enter in Chrome prompt canceled. In FF it's OK.

I am using smoke.js for a long time. I already wrote about this library on my blog: #manejandodatos Smoke.Js for showing alerts and messages - http://www.manejandodatos.es/2013/10/smoke-js-showing-alerts-messages

In a previous version of this library I code something like this:

smoke.signal('Message', 1000);

where 1000 is the time that the funcion is working!

A few days ago, I updated smoke.js to the new version and I have noticed that the previous function is not working anymore!

Although I can notice the improvement is the new "smoke.signal" allowing callbacks, is there any chance to have a "smoke.signal2" function like in the previous version?

Hi
I am planning to integrate this library.
Some of my users still uses IE8.
what is the plan and when you are adding the support for IE8 ?

Thanks
-Divagar

The readme should include a list of browsers this script is intended to work with; this way we'll if a incompatibility issue found is a bug or not a feature.

Hi,

the minified version is missing a semicolon at the end.

You fixed that once by a0cce74 but the semicolon is missing again in release 0.1.3 and master branch. I dont know how you are generating the minified version cause there is no script so you have to fix that.

It can cause errors if you concat multiple js scripts and smoke.js is followed by another one.

18133Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value)(...) is not a function

hi
can you mention about this library license ?

thanks
-Divagar

I have a smoke.confirm dialog with ok and cancel buttons. I would like to force users to click on ok or cancel buttons only - not allow them to click on the background or anywhere else on the page.

Is this possible?

The Line Break ('\n') functionality is not working. Is there a work around to implement the same?

IE6/7/8 are still browsers that are used today. (Unfortunately)
Alerts and user messages are important, even a simple 'alert()'
will suffice here :)

What do you think?

I use smoke.js in a web app (with no page reload in a full day time). Each time smoke is used, it adds a new element to the body. This kind of element :

<div id="smoke-out-1428659028629.3865" class="smoke-base" style="z-index: 1000;"></div>

To keep a clean DOM and for performance reasons I would like to get read of these elements. Could this be done automatically each time the alert is closed ?

In the android explorer it doesn't slides with the scroll, only stays at the top of the document, I've used smok.js on a responsive design project but on my phone stays at the top of the document.

When trying this:
smoke.signal('this goes away after a few seconds');

I get this:
ReferenceError: f is not defined

When using smoke.quiz with Internet Explorer the function does not return anything. 'e' is blank.
Seems ok in Chrome.

Is it possible to create the TypeScript definition file, in order to use Smoke with TypeScript?

Hi. Any plans to include support for Bold & Italics? :D

Okay so not really an issue, just a public service announcement from The Curator, David Higgins (@Higgo)

-- This repo has been included in The Github Pirates' Chest.

What is this about?
The Github Pirates is a constantly updated resource for those interested in HTML5, CSS3, and JavaScript.

You should find out more about this project below:

http://codepirat.es/

OR, Download The Chest:

http://isharefil.es/E9Co

Would it be possible to give as parameters custom class names? Thanks by advance

Given that the name is singular, it seems to indicate that it takes a single class as a string, However, in my testing it will take more than one, space delimited class name. You should consider updating the docs to reflect that.

Dear all
I would like to use smoke.js for my site, unfortunately I do not have much knowledge of javascript, neither on php but OK I trying to learn.
What I have and I need to change is when I submit for something (e.g for contact) if is successful or not returns an output a simple link like this

$title = $error == 0 ? l(completed_ok') : ($error !== 0? l('error') : l('warning'));
$note = (!$note || empty($note)) ? '' : '<p>'.$note.'</p>';
$goto = '<p><a href="'._URL.'">'.l('home').'</a></p>';
$output = '<h3>'.$title.'</h3>'.$note.$goto;

My question is can I use smoke.js to have an notification without a click
and If I am not asking too much, is it possible to give me any example!
Thank in advance.

https://developer.mozilla.org/en/DOM/window.prompt

When running the script

smoke.alert('this is #1 alert');
smoke.alert('this is #2 alert');

we only get 1 alert instead of 2, it could be great to have these alert stacked one under the other

i realized it'd be better if the callback functions behaved like, you know, actual callback functions.

for instance, on the demo site there are nested smoke dialogs that should get written right after the previous dialog finishes, but it's getting written before and being destroyed when the parent is. this concept seemed to work before, but something (outside this lib) changed and exposed this bug.

anyway, i'm going to change this when i have time. or someone else can. any volunteers?

That's right, we're breathing some new life into this little library.

I've been wanting to do this for several years, but resources are limited and I have a job and a family and a life. No idea when I'll actually be able to make this happen but I'm putting my list of potential and planned improvements here.

• repackage as ES module

  • rewrite w/ m o d e r n 21st century vanilla js

• add modal options (like dw.js modal abstractions) **

• Smoke install from Cdn (unpkg/cdnjs - how to set up?)

  • publish smoke on npm / jsdelivr?

• smoke.confirm - { cancel: false } should remove 'cancel' button

  • api evolution - inspo from this html dialog element? https://css-tricks.com/replace-javascript-dialogs-html-dialog-element/

  • i like the concept of the dialog element, but what they describe in the article sounds way too complicated

  • ?? if you're on mobile, option to show a native alert somehow ? https://medium.com/samsung-internet-dev/making-input-type-date-complicated-a544fd27c45a

  • html dialog integration? - https://twitter.com/flaviocopes/status/1746134004963651616?

  • or html popover? - https://davidwalsh.name/html-popover-attribute

    • “So much stuff you get for free when using for your modals:

      • esc key closes it
      • can blur the background items easily
      • first input field gets autofocus bonus points works great with htmx as we can put a showModal() method in the HTML response 💫

    • ?? dialog element customizations (adding a close button) - https://frontendmasters.com/blog/basic-dialog-usage-and-gotchas-to-watch-for/

• better (easier) styling options and default style (nicer default theme)

  • make it easier to extend/edit the theme (more thoughtful theme support, as easy as adding a few custom classes, anything can be easily overwritten … it’s a cascade!)

  • maybe do a 'brutalist' version - that has minimal (& inline) styles, no css dependencies but you can extend and make your own theme if you want

  • inspo - modal design considerations - https://css-tricks.com/considerations-styling-modal/

  • inspo - cool style for dialogs - https://shepherdjs.dev/

  • inspo - this is cute https://oncebot.github.io/popbox.js/

  • inspo - a11y - https://github.com/KittyGiraudel/a11y-dialog

    • https://humanwhocodes.com/blog/2013/02/12/making-an-accessible-dialog-box/

  • inspo - cool animations - https://sweetalert.js.org/

  • inspo simple default animations - https://zurb.com/playground/reveal-modal-plugin

  • inspo - all kinds of dialog/alert types - https://ably.com/blog/react-notification-libraries

  • inspo - ebay react modal - https://github.com/eBay/nice-modal-react

• ?? any current issues we can keep?

  • ??
  • #53​
  • #54​
  • #55​
  • #56​
  • #51
  • maybe check through the old issues for things (that have been closed by others) that could be fixed in the new version - https://github.com/hxgf/smoke.js/issues?q=is%3Aissue+is%3Aclosed

• ?? outline build process? (minify + test, build pipeline for PRs?)

• refreshed design for docs site (i don’t like the fonts or layout or the photo, but i like the functionality)

  • single-page docs & cool demos, nice intro in readme
  • streamlined structure w/ scratch & tachyons

• ?? making framework-specific components? (react, vue, svelte, webcomponents, etc)

• (old) animation support

  • solid base design w/ sensible animation defaults/options
  • (fade, slide, etc)
  • classes you can add to get animations (or js params whatev)

• (old) optional icons in buttons?

• (old) change ok/cancel selection w/ arrow/tab keys

• (old) mods for modal support (photos, videos, iframes, custom html, form container)

  • smoke.html()
  • smoke.photo()
  • smoke.iframe()
  • etc

• docs - note ALL the options for ALL the methods (make sure it’s complete)

• (ref for potential new architecture) example "modern" js lib starter - https://advancedweb.hu/modern-javascript-library-starter

  • ?? also - does this concept work with declarative web components structure? (prob not, want to keep it super simple)

• also want to make an updated demo/docs site, ofc (smoke.js.org)
• respond to all the open issues (and any relevant closed ones) if there's anything relevant / fixed in the new version.
  • sorry if anyone feels neglected, not trying to hurt anyones feelings 🥺

• need to update the url for smoke.js.org (url update?)

• moved gh hxgf --> jyoungblood

  • need to change the reference for the repo it's pointing to?
  • new stuff still resolves, but...

• https://github.com/jyoungblood/smoke.js.org

• https://js.org/

• https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site#creating-and-committing-a-cname-file

• https://github.com/js-org/js.org/wiki

• https://github.com/js-org/js.org/tree/master

Unlike real alerts, smoke does not respond to keyboard control. I think space and enter should activate the ok button. In any case it should behave the same way as the native dialogs.

Is it possibile to set a default value for "ok" and "cancel" buttons?

I notice that in your code ( https://github.com/hxgf/smoke.js/blob/master/smoke.js#L52 ) you have "OK" and "Cancel" labels, is it possible to overwrite this?

smoke-base keeps multiplying on every alert.

currently:

• the dialogs are not modal for keyboard users
• the examples cannot be activated with the keyboard.
• the semantics of the pseduo dialogs are not provided to assitive tech users

Suggest checking out the follwoing design patterns:
http://www.w3.org/WAI/PF/aria-practices/#alert
http://www.w3.org/WAI/PF/aria-practices/#alertdialog
http://www.w3.org/WAI/PF/aria-practices/#dialog_modal
this may also be helpful:
http://www.w3.org/WAI/PF/aria-practices/#kbd_focus
and example of an accessibel dialog:
http://hanshillen.github.com/jqtest/#goto_dialog

I tried to use smoke.js in my project but hit problems where it would silently fail if I tried to show a smoke.alert immediately.
I was triggering from document.ready(), but it seems I need to wait for window.load() before using smoke.js.

It might help others if this were documented somewhere.
Thanks.

just nothing ;)

When I submit a form using return key, server processes, sends back result, browser parses, throws up smoke confirm window - the keyup from the return key seems to 'Ok' that dialog.. as much as I like the speed of these boxes and the internal network, is there a fix or workaround for this?

Hi,

the bower.json file contains the main field which should not be used as desciption.
Instead of a description it should list the main files (once per type)
See:
https://github.com/bower/spec/blob/master/json.md

Pull request: #60