rikulo / bootjack Goto Github PK

View Code? Open in Web Editor NEW

88.0 15.0 15.0 508 KB

Twitter Bootstrap ported in Dart.

Home Page: https://quire.io

License: Apache License 2.0

Dart 63.94% CSS 0.16% HTML 31.06% Shell 3.56% sed 1.28%

bootstrap dart

bootjack's Introduction

Bootjack

Bootjack is a porting of Twitter Bootstrap 3.0.x in Dart.

Install from Dart Pub Repository

Include the following in your pubspec.yaml:

dependencies:
  bootjack: any

Then run the Pub Package Manager in Dart Editor (Tool > Pub Install). If you are using a different editor, run the command (comes with the Dart SDK):

pub install

Usage

First of all in your HTML file, you need to include the CSS resource:

<head>
	...
	<link rel="stylesheet" href="packages/bootjack/css/bootstrap.min.css">
</head>

Most of the functions in Bootjack components are automatic -- you only need to give the right CSS class on DOM elements and call a global function to register.

For example, a Dropdown button component is prepared by giving the following HTML snippet:

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
	Button
	<span class="caret"></span>
</button>
<ul class="dropdown-menu">
	<li><a href="#">Menu Item #1</a></li>
	<li><a href="#">Menu Item #2</a></li>
	<li><a href="#">Menu Item #3</a></li>
</ul>

With the following global registration in Dart:

void main() {
	Dropdown.use();
}

That's right. All you need to do in Dart is to tell Bootjack you are using Dropdown components. You can also progammatically access and manipulate the Dropdown:

Dropdown dd = Dropdown.wire(element);
dd.toggle();

Check more examples and the API reference for more features. Also, you can read the reference of Bootstrap.

Notes to Contributors

Test and Debug

You are welcome to submit bugs and feature requests. Or even better if you can fix or implement them!

Fork Bootjack

If you'd like to contribute back to the core, you can fork this repository and send us a pull request, when it is ready.

Please be aware that one of Rikulo's design goals is to keep the sphere of API as neat and consistency as possible. Strong enhancement always demands greater consensus.

If you are new to Git or GitHub, please read this guide first.

Who Uses

Quire - a simple, collaborative, multi-level task management tool.
Keikai - a sophisticated spreadsheet for big data

bootjack's People

Contributors

Stargazers

Watchers

Forkers

tmillsclare jordan-carl nawafnaim ronlobo slambour clamoriniere signtheta joserfjuniorllms m8e bijuab76 frankswu nagyist whiterzi

bootjack's Issues

Not using Bootstrap 4+

Just a request for Bootstrap 4+ support. (Bootstrap 4 was released in 18 Jan 2018).

Thanks for the lib!
Best regards.

Dropdown should fire events.

Check & compare with Bootstrap source code. Also go over javascript/event sections in Bootstrap docs and make sure we have covered them all.

Modal example generates exception: "Class 'TransitionEvent' has no instance getter 'relatedTarget'"

I download github.com/rikulo/bootjack/archive/master.zip (v0.6.5+3) and run example/modal.html in the DartEditor-1.10.1 (Win7 and Linux) with the Preferences: Run and Debug: Break on exceptions: all. During the modal window opening and closing DartEditor breaks on the exception: "Class 'TransitionEvent' has no instance getter 'relatedTarget'" many times. How can I remove the reason of exception without changing of DartEditor preferences?

Modal does not work in IE9

I've tried the widgets on http://static.rikulo.org/blogs/general/bootjack-dquery/demo.html in IE9 on Windows 7. The Modal dialog does not work. The page turns dark but there is no dialog.

Popovers do not work when run as JavaScript from Dart Editor

I've tested this on Firefox (version 26) and Chromium (version 31.0.1650.63). Popovers do not work when run as JavaScript from Dart Editor.

Typeahead source should support functions

According to the bootstrap documentation the source option can be a list or function, but the bootjack version appears to only support lists.

http://getbootstrap.com/2.3.2/javascript.html#typeahead

Initializr - HTML5 Boiler Plate with Bootjack

Using http://www.initializr.com/ makes me feel comfortable about my starting point.

Are there any notable efforts involved in getting a standard H5BP template to work with Bootjack?

Thanks.

Duplicate library name when compiling via dart2js

I'm getting the following errors when compiling my dart code to js using dart2js.

--- Dec 14, 2013 8:08:05 AM Running dart2js... -
.../web/packages/bootjack/bootjack.dart:1:9: Warning: Duplicated library name 'bootjack'.
library bootjack;
^^^^^^^^
.../web/packages/bootjack/bootjack.dart:1:9: Warning: Duplicated library name 'bootjack'.
library bootjack;
^^^^^^^^
.../web/packages/bootjack/bootjack_plugin.dart:1:9: Warning: Duplicated library name 'bootjack_plugin'.
library bootjack_plugin;
^^^^^^^^^^^^^^^
.../web/packages/bootjack/bootjack_plugin.dart:1:9: Warning: Duplicated library name 'bootjack_plugin'.
library bootjack_plugin;
^^^^^^^^^^^^^^^
.../web/packages/dquery/src/dquery_impl.dart:165:15: Warning: '(EventTarget) -> dynamic' is not assignable to '(T) -> void'.
forEach((EventTarget t) => _EventUtil.triggerEvent(event.._target = t));
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
lib/core/iterable.dart:99:8: Info: This is the method declaration.
void forEach(void f(E element));
^^^^^^^
../web/packages/dquery/src/dquery_impl.dart:161:15: Warning: '(EventTarget) -> dynamic' is not assignable to '(T) -> void'.
forEach((EventTarget t) => _EventUtil.trigger(type, data, t));
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
lib/core/iterable.dart:99:8: Info: This is the method declaration.
void forEach(void f(E element));
^^^^^^^
.../web/packages/dquery/src/dquery_impl.dart:143:13: Warning: '(EventTarget) -> dynamic' is not assignable to '(T) -> void'.
forEach((EventTarget t) => _EventUtil.add(t, types, h, selector));
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
lib/core/iterable.dart:99:8: Info: This is the method declaration.
void forEach(void f(E element));
^^^^^^^
.../web/packages/dquery/src/dquery_impl.dart:148:15: Warning: '(EventTarget) -> dynamic' is not assignable to '(T) -> void'.
forEach((EventTarget t) => _EventUtil.remove(t, types, handler, selector));
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
lib/core/iterable.dart:99:8: Info: This is the method declaration.
void forEach(void f(E element));
^^^^^^^

Can't close modal window by clicking outside modal dialog

Now handler is listen clicks from backdrop element, but modal element is above and backdrop element never receive clicks.

type 'Tab' is not a subtype of type 'Tab' of 'function result'.

My tabs are added and work correctly but I keep receiving this error with each tab added.

Exception: type 'Tab' is not a subtype of type 'Tab' of 'function result'.
Tab.wire (http://127.0.0.1:3030/wTutor/web/packages/bootjack/src/tab.dart:23:13)
use. (http://127.0.0.1:3030/wTutor/web/packages/bootjack/src/tab.dart:102:11)
_EventUtil.dispatch (package:dquery/src/event.dart:320:28)
_EventUtil.add.. (package:dquery/src/event.dart:53:17)

What is the bootjack support in browsers? show() function doesn't work in Android 2.3

Today, I switched between old and discontinued widget.dart bootstrap implementation and bootjack bootstrap implementation. Everything is working better, than discontinued widget.dart library, but there are two problems (this and #22 ):

With widget.dart the function for showing modal - show() worked even in Android 2.3. With bootjack It doesn't work there.

setting focus() on element inside modal after showing modal doesn't work

I show modal using function show() (identically with widget.dart library) and after that I just set focus() on input element inside modal. Although it worked as expected in widget.dart, in bootjack it doesn't work.

Refine the widget registration to allow JS minifying and 3rd plugins

The design of use is not right:

3rd party widget can't be plugged in
minifier can not eliminate unused widgets.

One possible solution:

rename _register() to use()
remove Bootjack.use()
use Widget.use() instead.

For example,

Dropdown.use();
Tab.use();

The drawback: too wordy if you're going to use a lot of widgets.

Bootjack.useDefault() can be used for registering all default widgets.

Is there any way for us to set a DOM as content of a Popover and Tooltip?

Is there any way for us to set a DOM as content?
Instead of string, it would be powerful to assign a DOM as a content of a Popover or Tooltip.

Modal.show() gives error 'HtmlDocument' is not a subtype of type 'Element' of 'elem'

If I create a simple Bootstrap modal like this:

Modal modal = new Modal(querySelector("#modal");
modal.show();

it fails on the second line with the following error:

'HtmlDocument' is not a subtype of type 'Element' of 'elem' (package:dquery/src/event.dart:672)

The same error occurs when I try to close the modal afterwards:

'HtmlDocument' is not a subtype of type 'Element' of 'elem' (package:dquery/src/event.dart:678)

What could be the problem here? Am I missing something?

Tooltip/Popover will be closed if open, close, then open in 500ms

bootjack/lib/src/tooltip.dart

Lines 297 to 301 in 28cb180

 Timer(const Duration(milliseconds: 500), () { 

 $tip.off(Transition.end); 

 if (tip.parent != null) 

 tip.remove(); 

 });

The delayed 500ms callback will hide the tooltip/popover.

Screencast.from.2022.07.14.15.56.18.mp4

Keep LESS Sources

I'd like to compile the stylesheets on my own, right now i have to download them seperatly from the bootstrap repo... would be much nicer if they were shipped alongside the dart code

Dart editor css validator and bootjack

I'm getting this error when trying bootjack and the dropdown doesn't render proparly

Invalid CSS property value: progress-bar-stripes 2s linear infinite
Invalid CSS property value: transform 0.3s ease-out

Radio buttons styling problem

For for <input type="radio"> elements within a button group, data-toggle="buttons-radio" breaks CSS styling and data-toggle="buttons" (official bootstrap styling) does not provide toggle functionality.

Styling screenshot (the latter does not provide toggle functionality).

To recreate this issue, use the radio button example from bootstrap.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option1"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

Modal Class uses deprecated methods

Class Modal uses method isDefaultPrevented (https://github.com/rikulo/bootjack/blob/master/lib/src/modal.dart#L54) which is deprecated in dquery (see rikulo/dquery@bd0b770#diff-045912301e58a414d7dc48dc3d034877)

Bootjack with AngularDart and/or Polymer

Hi, I'm very excited about this project and just started learning AngularDart and Polymer.
Looks like AngularDart now integrates with Polymer templates and shadowDOM.
Can I use Bootjack for AngularDart components or Polymer templates?
Could you please include an example for this in the README or add some wiki pages with different usage scenarios ;) Thanks.

Collaspe and navbar appear to be buggy

Was having issues with collapse not working properly so tried the one of the examples from Bootstrap 3.0 site. If you reduce the width of the browser the collapse button shows up but does not have proper click behavior (none at the moment). Also the navbar element is overlapping the container div below it; not sure if its related. Below is my modified version to work with bootjack/dart.

<!DOCTYPE html>
    <html>
      <head>
        <title>testCollaspe</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="packages/bootjack/css/bootstrap.css">
      </head>

      <body>   
        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Project name</a>
            </div>
            <div class="collapse navbar-collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </div>

        <div class="container">
          <div class="starter-template">
            <h1>Bootstrap starter template</h1>
            <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
          </div>
        </div><!-- /.container -->
        <script type="application/dart">
          import 'package:bootjack/bootjack.dart';
          main(){
            Bootjack.useDefault();
          }
        </script>
        <script src="packages/browser/dart.js"></script>
      </body>
    </html>

Alerts do not close correctly on IE9

I've tried the widgets on http://static.rikulo.org/blogs/general/bootjack-dquery/demo.html in IE9 on Windows 7. The Alerts display correctly and push down the other elements on the page (like it should). When closed, the Alerts disappear but the elements that were pushed down on the page stay so there is an empty gap where the Alerts were.

	Timer(const Duration(milliseconds: 500), () {
	$tip.off(Transition.end);
	if (tip.parent != null)
	tip.remove();
	});