karasiq / scalajs-bootstrap Goto Github PK

View Code? Open in Web Editor NEW

61.0 5.0 19.0 2.86 MB

Scala.js bootstrap components

License: MIT License

Scala 99.25% JavaScript 0.27% PowerShell 0.03% Shell 0.45%

scalajs bootstrap scala html5 reactive components scalatags javascript web-app dom

scalajs-bootstrap's Introduction

scalajs-bootstrap

Reactive Scala.js bootstrap components

How to use

Add line to your build.sbt (also requires bootstrap.css and bootstrap.js at runtime):

// Bootstrap 3
libraryDependencies += "com.github.karasiq" %%% "scalajs-bootstrap" % "%version%"

// Bootstrap 4
libraryDependencies += "com.github.karasiq" %%% "scalajs-bootstrap-v4" % "%version%"

Import bootstrap context:

import com.karasiq.bootstrap.Bootstrap.default._, scalaTags.all._

Examples

Separate bootstrap examples project: https://github.com/dportabella/scalajs-bootstrap4-examples
Project test page
- Use https://karasiq.github.io/scalajs-bootstrap/ (https://karasiq.github.io/scalajs-bootstrap/index-v4)
- Or run server with sbt testServer/run, then open http://127.0.0.1:9000 in your browser

License

The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

scalajs-bootstrap's People

Contributors

Stargazers

Watchers

Forkers

aniketlad16 coconutpalm bobbych wngr khernyo karimak123 matthewk olafurpg zoosky lxy-kyb fbaierl dportabella skisel kevin-lee scala-steward capesepias

scalajs-bootstrap's Issues

At least some widgets/elements do not work with Selenium IDE

I was trying to run scalajs-bootstrap demo https://karasiq.github.io/scalajs-bootstrap/ using Selenium IDE firefox add-on (http://www.seleniumhq.org/projects/ide/)

I started Selenium IDE recording and tried various things with the demo. Then I stopped recording and tried to rerun the recorded macro step by step.

Buttons and links seem to work same way when comparing original recording run and macro step by step rerun.
Text inputs, radio buttons, list selections (plain selection, multiple selection in demo) do not work as they shoud when running macro step by step.

From another app using scalajs-bootstrap I also noticed that password fields and email fields also do not work when running the macro. In this app during the record phase oninput event is fired but during macro rerun oninput event is not fired for some reason although the text changed on the input field also when running macro. onchange event is fired in both cases (recording / macro run).

Is this problem in scalajs-bootstrap or in Selenium IDE?

Here are couple of macros I recorded with Selenium IDE:

ToDo button macro

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="https://karasiq.github.io/" />
<title>New Test</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">New Test</td></tr>
</thead><tbody>
<tr>
	<td>open</td>
	<td>/scalajs-bootstrap/</td>
	<td></td>
</tr>
<tr>
	<td>click</td>
	<td>css=span.glyphicon.glyphicon-plus</td>
	<td></td>
</tr>
<tr>
	<td>type</td>
	<td>id=bs-auto-a397c7bb-ce0c-490f-b0d2-d48da41478d5</td>
	<td>a</td>
</tr>
<tr>
	<td>click</td>
	<td>css=button.btn.btn-primary</td>
	<td></td>
</tr>
<tr>
	<td>click</td>
	<td>css=span.glyphicon.glyphicon-plus</td>
	<td></td>
</tr>
<tr>
	<td>type</td>
	<td>id=bs-auto-c6982873-408e-4bcc-84ff-795f3828d839</td>
	<td>b</td>
</tr>
<tr>
	<td>select</td>
	<td>id=bs-auto-56f4009c-06ad-4080-aa68-8920c75098b9-form-select-input</td>
	<td>label=High</td>
</tr>
<tr>
	<td>click</td>
	<td>css=div.modal-footer &gt; button.btn.btn-primary</td>
	<td></td>
</tr>
<tr>
	<td>click</td>
	<td>css=span.glyphicon.glyphicon-plus</td>
	<td></td>
</tr>
<tr>
	<td>type</td>
	<td>id=bs-auto-00e8704f-cb43-407a-9276-e88c1842ee36</td>
	<td>c</td>
</tr>
<tr>
	<td>select</td>
	<td>id=bs-auto-4be00929-55f3-459a-840f-5d1e8f3a3abb-form-select-input</td>
	<td>label=Low</td>
</tr>
<tr>
	<td>click</td>
	<td>css=div.modal-footer &gt; button.btn.btn-primary</td>
	<td></td>
</tr>

</tbody></table>
</body>
</html>

Buttons macro

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="https://karasiq.github.io/" />
<title>New Test</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">New Test</td></tr>
</thead><tbody>
<tr>
	<td>open</td>
	<td>/scalajs-bootstrap/</td>
	<td></td>
</tr>
<tr>
	<td>click</td>
	<td>link=Buttons</td>
	<td></td>
</tr>
<tr>
	<td>click</td>
	<td>css=button.btn.btn-success</td>
	<td></td>
</tr>
<tr>
	<td>type</td>
	<td>id=bs-auto-956922b1-7c2a-4e7f-aa83-b7d6ca44b056</td>
	<td>100</td>
</tr>
<tr>
	<td>click</td>
	<td>id=bs-auto-56e850a5-ae11-49a7-9d8a-0775043625f6</td>
	<td></td>
</tr>
<tr>
	<td>select</td>
	<td>id=bs-auto-db5565a4-a280-40bd-a42e-ba244f5e17e5-form-select-input</td>
	<td>label=Option 3</td>
</tr>
<tr>
	<td>addSelection</td>
	<td>id=bs-auto-5aec1164-7576-4127-b244-8f033d310d36-form-select-input</td>
	<td>label=Option 3</td>
</tr>
<tr>
	<td>type</td>
	<td>id=bs-auto-e06a1eba-b111-49d4-afa7-3f3950ff2fb0-form-textarea-input</td>
	<td>aaa</td>
</tr>
<tr>
	<td>click</td>
	<td>css=button.btn.btn-primary</td>
	<td></td>
</tr>

</tbody></table>
</body>
</html>

Readme Imports Don't Allow JQuery Use

I can't seem to figure out what combination of imports I need to have in order to pull in the proper implicits to let me do something like $("#shortLinkModel").modal("blah")

Click event in popover.

In popover there is on button and onclick of that button alert Dialog should come. I have written the code for the same but it is not working. Can anyone please help me out?

Here I have written code.
Popover("Boom",button("plus", onclick := Bootstrap.jsClick(_ ⇒ window.alert("Clicked on button")) ) , TooltipPlacement.top)

Add Bootstrap 5 support

Enhancement proposal: Support for changing component's visible text after component creation

Certain components in this library do not support changing labels, titles or other visible texts after component creation.

This makes it difficult to write an app that supports locale/ui language swap on the fly without restarting the app or recreating the components.

These components are those which take a String type label/title text.

Popover title:

def apply(title: String,
          content: JsDom.all.Frag,
          placement: TooltipPlacement = TooltipPlacement.aut...)

Collapse button title:

def apply(btnTitle: String)
(content: JsDom.all.Modifier*): JsDom.all.Modifier

Navigation tab name:

case class NavigationTab(name: String, id: String, icon: IconModifier, content: Modifier, 
modifiers: Modifier*)

FormRadio title

def radio(title: String,
          radioName: String,
          radioValue: String,
          radioId: String = Bootstrap.newId): FormRadio

FormInput select options:

def select(title: JsDom.all.Modifier,
           options: String*)
(implicit ctx: Ctx.Owner): FormSelect

FormInput multipleselect options:

def multipleSelect(title: JsDom.all.Modifier,
                   options: String*)
(implicit ctx: Ctx.Owner): FormSelect

In some cases it might be possible to change the text by using jQuery if component id attribute is known (navigation tab name?), but e.g. in case of multipleselect we dont have a way to set id attribute values for the multiselect or its options.

Question: Is it possible to further develop these components so that they better support changing labels, titles or other visible texts after component creation?

E.g. instead of String type text use Var(String) or JsDom.all.Modifier/Tag if the underlying component supports it.

Another option: Change radio buttons and select/ multipleselect to support Rx[Seq[Modifier]] like table heading. Then it could be possible to change the text and even the number of options / available selections on the fly without recreating the component.

Using reactiveReadWrite in bootstrap 4

I'm trying to bump up from scalajs-bootstrap 1.2.0 to "calajs-bootstrap-v4 2.3.2, and I have this method of reactiveReadWrite which is now requires some implicits:

implicit rb: ReactiveRead[Element, EventListener[Element, T]],
wb: ReactiveWrite[Element, Modify[Element, T]]

How do I get those implicits?

In my example I'm using Var[Seq[String]]
And I'm getting this error:
could not find implicit value for parameter rb: com.karasiq.bootstrap.context.ReactiveRead[BetterFormSelect.this.Element,com.karasiq.bootstrap.context.ReactiveBinds.EventListener[BetterFormSelect.this.Element,Seq[String]]]

BetterFormSelect is a class I've created which extends BootstrapHtmlComponent

move the examples to a new project with a minimal build.sbt

I try to make a simple scalajs + scalaks-bootstrap application, but there is few documentation on how to set up the skeleton. This project has examples, but the build.sbt file is very big, and it contains both the source code of the scalajs-bootstrap and the examples itself.
Would it be possible to create a new project with only the bootstrap4 examples and a minimal build.sbt file?

My current build.sbt file is:

enablePlugins(ScalaJSPlugin)
scalaVersion := "2.12.8"
libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "0.9.7"
libraryDependencies += "com.github.karasiq" %%% "scalajs-bootstrap-v4" % "2.3.5"
scalaJSUseMainModuleInitializer := true

I try adding the following line, and it works a bit better:

scalaJSModuleKind := ModuleKind.CommonJSModule

it still fails with Uncaught ReferenceError: exports is not defined at scalajsenv.js:29

Why you use webpack instead of jsDependencies?

Fix Rx[Int].reactiveInput and add for Rx[Double]

Popover code

Not really an issue but cannot find an example to trigger a popover
The code starts with an element (on which I want to trigger a popover)
The following code produces nothing

val anElement = e.element
anElement.attr("data-toggle","popover")
PopoverOptions(animation=false,container="body",html=true,trigger="hover",content="Hello")
Popover("Sometitle",anElement.asInstanceOf[org.scalajs.dom.raw.Element],TooltipPlacement.right)

... anElement.popover() does not work either

Thanks for any hint

running test page locally produces: net::ERR_CONTENT_DECODING_FAILED

Hello,

attempted to build the test example as per the instructions. The build completes (with many warnings) and server starts but doing a GET on the server produces a 161k binary file.

GET http://localhost:9000/ net::ERR_CONTENT_DECODING_FAILED

Here is the sbt output: https://gist.github.com/evan-wehi/1405907ab3dff6c10067ae86a0a5c13c

Scala 2.13 plans

Hi,

Are there any plans to introduce scala 2.13 ?

Example could use some code showing how to get data from the Modal

I've asked on stack overflow here: http://stackoverflow.com/q/39484920/924597

But basically, I can't figure out how to use the Bootstrap facade to get data back out of a modal after I use it to collect data from the user.
Maybe it's really obvious, but I'm new to all this client side stuff.

I'm hoping this tutorial here can help me, but that will involve not using the bootstrap facade:
https://github.com/ochrons/scalajs-spa-tutorial/blob/master/doc/en/integrating-javascript-components.md

D3 chart inside bootstrap card

Hello,
I am trying to incorporate a D3 bar chart inside a Card but it doesn't work.
What i am trying to do is the following

val panel = Card(panelId)
      .withBody(p(id:="d3Container1","This is a paragraph"),div(id:="d3Container2",`class`:="d3cont"))
      .renderTag(Bootstrap.borderStyle.warning, Bootstrap.textStyle.info)

d3.select("#d3Container1").style("color", "blue");

val svg = d3.select("#d3Container2").append("svg").attr("width", "100%").attr("height", "450px")
    val sel = svg.selectAll("rect").data(js.Array(8, 22, 31, 36, 48, 17, 25))
    sel.enter()
      .append("rect")
      .attr("x", rectXFun)
      .attr("y", rectYFun)
      .attr("width", barWidth)
      .attr("height", rectHeightFun)
      .style("fill", rectColorFun)

I adapted the code from the example of the repository
Any idea why this fails?
It does not show any compile error or runtime errors.
It does not show any errors even if I use a non-existing id for the chart.
Thanks in advance.

Native support for scalajs-bundler

Currently, in order to use this facade with scalajs-bundler it is necessary to define a custom webpack config file that exposes jQuery as a global module. Also the bootstrap module needs to be exposed with a @JSImport.

I was able to accomplish this with the following:
(based on https://scalacenter.github.io/scalajs-bundler/cookbook.html#global-namespace)

In build.sbt:

    webpackBundlingMode := BundlingMode.LibraryOnly(),
    npmDependencies in Compile ++= Seq(
      "jquery" -> "2.1.4",
      "bootstrap" -> "3.3.7"
    ),
    npmDevDependencies in Compile ++= Seq(
      "webpack-merge" -> "4.1.0",
      "imports-loader" -> "0.7.0",
      "expose-loader" -> "0.7.1"
    ),
    webpackConfigFile := Some(baseDirectory.value / "webpack.config.js")

In webpack.config.js:

var merge = require('webpack-merge');

var commonConfig = require('./common.webpack.config');
var generatedConfig = require('./scalajs.webpack.config');

module.exports = merge(generatedConfig, commonConfig);

In common.webpack.config.js:

var globalModules = {
  jquery: "jQuery"
};

const importRule =
  {
    // Force require global modules
    test: /.*-(fast|full)opt\.js$/,
    loader: "imports-loader?" + Object.keys(globalModules).map(function(modName) {
      return modName + "=" + globalModules[modName];
    }).join(',')
  };


const exposeRules =
  Object.keys(globalModules).map(function(modName) {
    // Expose global modules
    return {
      test: require.resolve(modName),
      loader: "expose-loader?" + globalModules[modName]
    }
  });

const allRules = exposeRules.concat(importRule);

module.exports = {
  module: {
    rules: allRules
  }
};

Finally, in code:

object Bootstrap {
  // See: https://github.com/scala-js/scala-js-jquery#using-scalajs-bundler
  @native
  @JSImport("jquery", JSImport.Namespace)
  object jquery extends JQueryStatic

  @native
  @JSImport("bootstrap", JSImport.Namespace)
  private object Bootstrap extends Any

  // ensure 'bootstrap.js' is loaded if we use this object
  Bootstrap

  implicit def jq2bootstrap(jq: JQuery): BootstrapJQuery = jq.asInstanceOf[BootstrapJQuery]
}

... now with this implicit in scope I am finally able to use .tooltip(), .modal() and other methods that bootstrap adds to jQuery.

It would be great if this facade could be used with scalajs-bundler without a lot of custom configuration. I'm not exactly sure what it would take to accomplish this, but it seems the issues are that the facade requires that jQuery is exposed on global scope, and that there is no @JSImport for the bootstrap module (which is required by scalajs-bundler).

Bootstrap 4

Now that Bootstrap 4 is in beta and is the default download from http://getbootstrap.com/, are there any plans to migrate these bindings?

I see the bootstrap4 branch, but the latest commit to it was 2 years ago.

CSS Styling for scala js bootstrap Modal

I need to add some custom css to scala js bootstrap Modal like using a larger modal instead of medium and setting overflow: auto. But could not figure out an easy way to achieve it.

Here is the original Stack Overflow Question:
http://stackoverflow.com/questions/40746735/css-styling-for-scala-js-bootstrap-modal

Would like some inputs on how can we achieve this (in functional way).
@Karasiq @coconutpalm any suggestions here?