vizuaalog / bulmajs Goto Github PK

Versions
BulmaJS: master-dev
Browser: Chrome
Operating system: Windows

Describe the bug
See the bug on the Bulma Docs

The modal has no 'proper' way to create it within Javascript. There should be a way to create a modal with a title, content, confirm button and cancel button. Along with the relevant callbacks (#8).

• Fix a bug where the closeButton event is not removed when the modal is destroyed.
• Ability to close a modal with the escape key
• Ability to close a modal when clicking outside the modal
• Add an is-clipped class to the html/body element when the modal is visible
• Javascript creation API
• Callbacks for close, open, confirm, cancel
• Documentation

Versions
BulmaJS: 0.5.0
Browser: Chrome 71
Operating system: Windows 10

Describe the bug
When trying to create a Modal dynamically with JavaScript, it does not work and shows the following error:
Uncaught TypeError: this.root.querySelector is not a function
at Modal.findCloseButton (modal.js:74)
at new Modal (modal.js:37)
at Function.create (modal.js:50)
at Object.create (core.js:26)
at deleteEval (evaluations:210)
at HTMLAnchorElement.onclick (VM12126 evaluations:173)

Creating a Modal via HTML works fine.

To Reproduce
Steps to reproduce the behavior:

1. Create HTML Document with Bulma.js included (pre-compiled master file)
2. Copy sample code for creating a Modal from doc
3. Run
4. See error

Expected behavior
Modal should be shown

If you will create a global Bulma js, that's job will be setting up everything. Shouldn't this should go there, instead hard coding it here ?

Versions
BulmaJS: 0.10.0
Browser: Chrome Latest
Operating system: Windows

Describe the bug
When import bulmaJS with ES6 method i got a syntax error:

import Bulma from './core' -> Unexpected Identifier

To Reproduce
Steps to reproduce the behavior:

1. Checkout https://github.com/prismicio/nextjs-website
2. Setup Project
3. Install and import bulma and sass
4. Install and import bulmaJS in layouts/index.js

Expected behavior
A directly working navbar.

Can you help me with this?

Hi,

I think the alert plugin is a little too opiniated. It would be great if we could customize it a little bit more.

For instance :

• Being able not to have a header
• Being able to add extra classes to the elements of the modal (buttons, etc)
• Being able to prevent the modal from closing on onConfirm() and onCancel() events
• Being able to target the button that was clicked on onConfirm() and onCancel() events

What I suggest is adding a few more options. Maybe an object for the buttons ?

confirm: {
  'text': 'Confirm',
  'classes': 'is-link'
}

cancel: {
  'text': 'Cancel',
  'classes': 'is-danger'
}

To prevent the modal from being destroyed on onConfirm() and onCancel(), I suggest adding two more options :

destroyOnCancel: true|false // defaulted to true
destroyOnConfirm: true|false // defaulted to true

To target the button that was clicked on onConfirm() and onCancel() events, I suggest adding the event as a parameter on the 'click' event listener callback of the cancel and confim buttons.
Like so:

confirmButton.addEventListener('click', e => {
  this.onConfirm(e);
  this.destroyOnConfirm && this.destroy(); // related to previous suggestion
});

cancelButton.addEventListener('click', e => {
  this.onCancel(e);
  this.destroyOnCancel && this.destroy(); // related to previous suggestion
});

I have some of these features already coded, I can submit a PR if you're OK with the suggestions.

Waiting for your feedback, thanks !

These are some ideas for additional plugins. These ideas are inspired from other similar libraries/frameworks.

• Tag input Would provide an input field that users can use to type in 'tags'. Would make use of the Bulma input and tag components. (thanks to @chistel)

If anyone has other ideas for plugins, please leave a comment. If it would suit this project well then I'll include it in the above list.

In some situations, it'd be nice to customise how some of the functionality works. One way to do this has a global variable defined before the main BulmaJS files are initialised.

For example, have a bulmaOptions line before everything else is loaded, the core can then check for this and merge it in with the other options once all the plugins have initialised.

The exact approach to this will need some thought as I don't want it to be too difficult or confusing to use but feel easy and simple.

For some situations, such as the callbacks. I think it'd be best to implement some kind of internal Bulma buffer of the plugin instances created. These can then be accessed in a querySelector style. For example, this will return the Dropdown instance allowing us to then call methods on the plugin or set the callback functions mentioned in #8.

Bulma.get('#myDropdown');

Currently, the helpers are using a string manipulation method of adding/removing classes. Due to Bulmas requirement on Flexbox, we can actually use classList instead as everywhere Flexbox is, classList is also.

The CSS fails to load in Chrome due to a MIME mismatch, expected due to GitHub's way of handling raw files.

The solution here is to instead have a local copy of the CSS, and updating as necessary if any major changes are added.

Versions
BulmaJS:
Browser: IE11
Operating system: windows 10

Describe the bug
Object doesn't support property or method 'forEach'
check screen shot

Screenshots
If applicable, add screenshots to help explain your problem.

Versions
BulmaJS: 0.11.0
Browser: 74.0.3729.169
Operating system: Window 10

Describe the bug
alert.js and modal.js do not work properly.

To Reproduce
Steps to reproduce the behavior:

1. Include alert.js or modal.js like a plugin
2. Try make someting

Expected behavior
Creating alert or modal popup as shown in documentation examples.

Screenshots
https://codepen.io/ubaid-dev/pen/RmevwO

Is your feature request related to a problem? Please describe.
I want to create a retractable menu, so basically you would click on the hamburger icon and the menu will appear on the left pushing the content on the right. Right now I am using the component sidenav of @angular/material (link) but I don't want to use bulma and @angular/material together as I heard it's bad practice and it could result in css bugs.

Describe the solution you'd like
The solution would be to have a component sidenav integrated in the bulma css framework.

Describe alternatives you've considered
Many alternatives are available but as I said I don't want to mix multiple css frameworks

• @angular/material

Additional context
I am requesting this because I have a bulma-style navigation bar component at the top of my page and below it an @angular/material sidenav and I have a CSS problem where the sidenav content overlaps the navigation bar by few pixels.

In order to create an easy and simple Javascript API there needs be a unified naming convention among the official plugins. Some kind of interface to follow.

Some ideas for these interface 'rules' could be:

• All plugins will have a static create method, this is used by the Bulma.create method and if not required can simply return false
• All plugins will have a static parse method, this is used by the BulmaJS core when parsing the HTML DOM and if no data API is provided can simply return false
• All plugins will have a static rootClass method, this is used by the BulmaJS core when parsing the HTML DOM and is used to identify the primary class the plugin is responsible for. E.g. notification
• All plugins will have a parent method/option, this is the HTML element the plugin is being placed into. A notification may have a div as it's parent whereas a modal may use the body element
• All plugins will provide a static defaultOptions object that will be responsible for holding the default options for the plugin. This will be required for an update to the core that will merge the provided options, either via JS or data attributes, with the default options

A format option for when using the calendar with an input field will be useful. I do not want to rely on a third party such as Moment.js (even though they are great) so this will have a basic implementation.

While not always required, callback functions for each component could be a useful thing to have. For example onReady, onDismiss, onOpen etc.

• All
  • onInit - once the plugin instance is ready
  • onDestroy - when the plugin instance is destroyed (may not be useful or required)
• Dropdown
  • onOpen - called when the dropdown is opened
  • onClose - called when the dropdown is closed
• File
  • onChange - called when the file is changed
• Message
  • onDismissed - called when the message is dismissed (this is called before the message has closed)
  • onClose - called after the message has closed
• Modal
  • onClose - called when the modal is closed
  • onOpen - called when the modal is opened
• Navbar
  • Don't think this needs any callbacks as there isn't a JS api for it.
• Notification
  • onDismissed - called when the notification is dismissed (this is called before the notification has closed)
  • onClose - called after the notification has closed
• Documentation updates

• Clean up the code, feels a bit icky in my optional atm.
• Add the docblocks to the code
• Add the documentation for the calendar

Versions
BulmaJS: 0.7.0
Browser: Chrome
Operating system: Mac

Describe the bug
After npm install, I cannot get the ES6 import to work. I get:

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

I'm using browserify, babel and gulp:

        .transform('babelify')
        .bundle()
        .pipe(source('app.js')) // Readable Stream -> Stream Of Vinyl Files
        .pipe(buffer()) // Vinyl Files -> Buffered Vinyl Files
        .pipe(sourcemaps.init())
        .pipe(uglify().on('error', function (e) {
            console.log(e);
        }))
        .pipe(rename({extname: '.min.js'}))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist/'));

with the following config:

"babelify",
        {
          "presets": [
            [
              "@babel/preset-env",
              {
                "modules": "commonjs",
                "targets": {
                  "browsers": [
                    "last 2 versions",
                    "safari >= 7"
                  ]
                }
              }
            ]
          ],
          "plugins": [
            "transform-class-properties",
            "@babel/plugin-proposal-object-rest-spread"
          ],
          "sourceMaps": true
        }

Note: import * as _ from 'underscore' does not throw this error, which led me to believe there may be an error with the package exports?

For the 1.0.0 release, I would like to rewrite the documentation. Having it as a detailed resource for using the library along with as many examples and code snippets as possible.

Being a Laravel user I'm a huge fan of the documentation Taylor provides. And so that is the sort of style I would like to go for. Although, being a small library rather than a monster awesome framework the use-cases are completely different.

Wikiki's extension allows for a modal version of the calendar to be used. This should be added as an option as it is very useful!

https://vizuaalog.github.io/BulmaJS/documentation/modal.html

open modal example doesn't seem to work as expected.

Hello, your NPM package seems to be out of sync and does not contain the 0.4.0 version. Found this out when I tried to include tabs but tabs key could not be found.

https://www.npmjs.com/package/@vizuaalog/bulmajs

Is your feature request related to a problem? Please describe.
Current plugin loading calls only first registered plugin by same root class name.
I try to create [file drag and drop plugin] using .file class name but it has not called from core.js::traverseDOM() when using file.js together.

Describe the solution you'd like
Return target plugins array from core.js::findCompatiblePlugin().

Describe alternatives you've considered
How about this?
master...apecell:feature/multi-plugins

Thanks 👍

While working on the updated docs, I realised there is no Tab plugin. Whoops :(

• Create the plugin logic
• Add the documentation
• Test the functionality
• Push to master

To help keep things consistent the core plugins should have consistent naming and functionality. The tasks for this include:

• Any plugins that have a parent will have a property called parent.
• The root plugin container, i.e. the .notification element will be called root
• The plugin instance will be saved to the root element
• The create method will be removed in favour of using the primary constructor (it is currently used for the new Bulma(selector).plugin API, but the Bulma.create API has already been migrated to using the constructor.
• All plugins will have API methods to help adjust the configuration after a plugin has been initialised, these will also be used internally when configuring everything.

This list may continue to expand as issues with consistency etc. are discovered. These are currently planned for the next release of BulmaJS (0.11) and are needed to help with the new changes in the 0.11 release.

hi

could you make tabs to switch on mouse hover?

Automated tests would be super useful! Although the complexity involved due to DOM manipulation may limit what is possible with this.

Hello,

I think there are some errors in the Usage page of the documentation.
On the Using Javascript section, shouldn't it be :

import Modal from '@vizuaalog/bulmajs/src/plugins/Modal';

// instead of
import Modal from '@vizuaalog/bulma/src/plugins/Modal';

and

var modal = Modal.create({
    element: document.querySelector('#myModal')
});

// instead of
var modal = Bulma.create('modal', {
    element: document.querySelector('#myModal')
});

Thank you!

I think that moving forward using the Bulma classes to grab elements is better than using the data-* attributes.

• Accordion
• Calendar
• Dropdown
• File
• Message
• Modal
• Navbar
• Notification
• Tabs
• Update documentation

I think ESLint would be useful to ensure there is a consistent style among the JS code. It would also be good to integrate this into the automated CI.

Versions
BulmaJS: 0.11 dev
Browser: Google Chrome
Operating system: Mac OS

Describe the bug
The individual file is still automatically registering itself as Bulma within the browser. For example using dist/alert.js means you have to call new Bulma(options) to create an Alert instance. Instead this should register itself as Alert.

Versions
BulmaJS: 0.6.0
Browser: Firefox 63.0b12 (64-bit)
Operating system: Windows 10 Pro

Describe the bug
If there is a list inside of a .tabs-content > ul > li, tab switching stops working. Clicking the first tab works correctly, but clicking on consecutive tabs does not reveal their content.

To reproduce
Click the second tab with the below HTML—it will not reveal the second tab's assigned content.

<div class="tab-wrapper">
	<div class="tabs">
		<ul>
			<li class="is-active">
				<a>Tab 1</a>
			</li>
			<li>
				<a>Tab 2</a>
			</li>
		</ul>
	</div>

	<div class="tabs-content">
		<ul>
			<li class="is-active">
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</li>

			<li>
				Sample text
			</li>
		</ul>
	</div>
</div>

Expected behavior
When a ol or ul with li children is a child of .tabs-content > ul > li, clicking a tab should reveal its content.

Potential fix
This may be as simple as changing the Tabs component's findNavItems and findContentItems queries to > ul > li (instead of just li), so that only the immediate child list items of .tabs and .tabs-content are selected.

I don't see this lib on npm, how do we install it?

thanks

I would like to have the option to display the full selected file path or just the filename
maybe a second field so that both could be collected even though only 1 option shown?
consider a form where the file is selected but when a run button is pressed we need to know the full path to import the contents etc, or that some people just prefer to see the full path
thanks

The code that handles switching the version needs to include the absolute path.

Versions
BulmaJS: master
Browser: Google Chrome
Operating system: Mac OS

Describe the bug
The new trigger/on system is conflicting with some plugins that have trigger as a property. The Dropdown is plugin is one example.

To Reproduce
Steps to reproduce the behavior:

1. Use the latest version in the master branch, and include a dropdown.

Expected behavior
There should be no errors in the console, and the trigger method should work as expected.

Versions
BulmaJS: "@vizuaalog/bulmajs": "^0.10.0",
Browser: Chromium
Operating system: MacOS

I am with Ruby on Rails and using webpacker to serve JS.

Describe the bug
I'm getting error when trying to use this library. Can't get any example to work so I guess I am doing something very stupid...

To Reproduce
HTML:

    <div id="example-notification"></div>

JS:

import Bulma from '@vizuaalog/bulmajs'

Bulma.create('notification', {
  body: 'I am always visible until you close me manually.',
  parent: document.getElementById('dismissable-notification'),
  isDismissable: true
}).show()

Uncaught TypeError: Cannot read property 'appendChild' of null
   at Notification.DismissableComponent (dismissableComponent.js:106)
    at new Notification (notification.js:94)
    at Function.create (notification.js:42)
    at Object.create (core.js:25)
    at Module../app/javascript/packs/application.js (application.js:18)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

Bulma: 0.7.4
BulmaJS: 0.8.0

Hello,

I noticed that that when opening a modal, an is-clipped class is added to the body.
Unfortunately, this does not clip the document.

The class should be added to the html tag instead.
Maybe this was changed in newer versions of Bulma?

Solution
On line 187 of modal.js, replace:

document.body.classList.add('is-clipped');

with

document.documentElement.classList.add('is-clipped');

And on line 200, replace :

document.body.classList.remove('is-clipped');
with
document.documentElement.classList.remove('is-clipped');

I can submit a PR if needed.

Thanks in advance.

I'm trying to integrate this library with the Drupal Javascript system in the following project
https://www.drupal.org/project/drulma
and I want to avoid unnecessary calls to traverseDOM. The dom is traversed on the loading of Bulmajs, then when I load this concept of "Drupal behaviors" and then after every ajax call that modifies markup.

Solution that I'd like
I am not very experienced with javascript modules but maybe separate this piece

document.addEventListener('DOMContentLoaded', () => {
    Bulma.traverseDOM();
});

from the core to a BulmajsInit file.

I think this will also benefit people who only use the library to make JS calls and do not want the markup inspected.

Another cool addition to the traverseDOM function (or separate it to a different method) would be the possibility to start traversing from a different element instead of document in case you know what parts need to be traversed (again, when drupal load a new piece of markup with ajax).

What do think?

Great work with the project :)

Is your feature request related to a problem? Please describe.
Following the introduction of the Fixed Navbar feature by issue #326, would it be possible to include a sticky navbar which affixes to the top/bottom of its container upon reaching a certain scroll threshold? Optionally, it could be expanded upon to hide the navbar on scroll down and reveal upon scrolling up?

Describe the solution you'd like

• Tuts+ - Sticky Positioning with Nothing but CSS
  It's a few years out-of-date... which works to our benefit since the adoption of position: sticky has increased significantly (CanIUse) across a number of browsers since then.
• CSS-Tricks - position: sticky;
• CodePen - All CSS for sticky elements

Describe alternatives you've considered

• Mini.css - Landing Page
  Nav bar sticks to the top of the viewport on both desktop and mobile devices alike.
• Ant Design - Affix
  A more granular breakdown and demonstration of the sticky navbar behaviour.
• Headroom.js (optional)
  Admittedly, this is a script but the implementation of the "smart" sticky navbar is very smooth and would be ideal to target, if at all possible. More than happy for this to be offloaded to a separate issue/request if that makes feature management easier.

Thanks for your time and I really appreciate your suggestion to create this ticket from the original issue #2051. Hope you have a great day!

The icons in the examples are out of place.

Examples:

or

On Chrome 62.0.3202.94 with MacOS 10.13.1

Versions
BulmaJS: 0.7.0 (unreleased) and prior
Browser: Chrome (latest version)
Operating system: Mac OS (Latest version)

Describe the bug
If a plugin is initialised through javascript and it creates and inserts HTML straight away (i.e. creating a message and showing it immediately) when the traverseDOM method is called within the core. It will still create a new plugin instance for the element, even though it already has an instance associated with it.

To Reproduce
Steps to reproduce the behaviour:

1. Create a message element right after loading in the JS file and show the message immediately
2. In debug tools, the events are registered twice, and closing the modal will cause the second event listener to throw an error (as the first instance has already dealt with the event and deleted the HTML)

Expected behavior
The traverseDOM method should be able to identify an element that has already been initialised with a plugin.

I think it would be an improvement to add the is-active class to the burger button - currently, it only applies the is-active class to the navbar-menu. If you would like I can work on a merge request.

https://bulma.io/documentation/components/navbar/#navbar-burger

Versions
Browser: Google Chrome 68.0.3440.75
Operating system: MacOS High Sierra

Describe the bug
The documentation's Javascript is trying to initialise the docs menu on the home page, this errors due to the element not existing. Would be better to add a check to prevent this.

To Reproduce
Steps to reproduce the behavior:

1. Go to the documentation home page
2. Look at the dev console

Expected behavior
There should be no errors in the console due to the menu element not existing

Nice to see that you are moving forward with the idea ....
I can add a comment .. not to pollute the global Object space. Rather .. wrap as function and return.
Let the users to decide how they want implement it.

I would say put that into an example or documentation ....

It would be nice if we could pass an html file url for a modal to use as template.

Versions
BulmaJS: 0.7.0
Browser: irrelevant
Operating system: irrelevant

Describe the bug
Hello, I think there's a problem in the way you export the module. When I follow the documentation, I get the following error:

Uncaught TypeError: _bulmajs2.default.create is not a function

I think it's because you don't export the module properly on bulma.js.

Also, I think you should remove window.Bulma = Bulma; from the same file. This should be left to the user to decide. And, if you import the library this way import '@vizuaalog/bulmajs', it will work thanks to the windows assignment thus adding to the confusion.

I can submit a PR if needed.

Thank you!

To Reproduce

import Bulma from '@vizuaalog/bulmajs'

const modalTwo = Bulma.create('modal', {
  element: document.querySelector('#modal-example-2')
})

Produces

Uncaught TypeError: _bulmajs2.default.create is not a function

Fix

On bulma.js add the following line:

export default Bulma

and remove the following line:

window.Bulma = Bulma;

Versions
BulmaJS: 0.10
Browser: Chrome 76.0.3809.132
Operating system: Windows 10

Describe the issue
dashboard:193 Uncaught ReferenceError: Bulma is not defined
at HTMLButtonElement. (dashboard:193)

I'm using laravel mix to import this plugin. Component using DOM/standard Bulma works as expected. However, those that require Javascript intervention cannot work with above error message (modal. message, alert)

Thx,

<aside class="menu" data-bulma="menu">
  <p class="menu-label">Label</p>
  <ul class="menu-list">
     <li>
       <a class="is-active" data-trigger data-target="menuDropdown" href="#">Link</a>
       <ul id="menuDropdown">
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
       </ul>
     </li>
  </ul>
</aside>

Please & Thank You
@VizuaaLOG