karasiq / scalajs-bootstrap Goto Github PK
View Code? Open in Web Editor NEWScala.js bootstrap components
License: MIT License
Scala.js bootstrap components
License: MIT License
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
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
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:
<?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 > 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 > button.btn.btn-primary</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>
<?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>
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).
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?
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.
Hi,
Are there any plans to introduce scala 2.13 ?
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.
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.
def apply(title: String,
content: JsDom.all.Frag,
placement: TooltipPlacement = TooltipPlacement.aut...)
def apply(btnTitle: String)
(content: JsDom.all.Modifier*): JsDom.all.Modifier
case class NavigationTab(name: String, id: String, icon: IconModifier, content: Modifier,
modifiers: Modifier*)
def radio(title: String,
radioName: String,
radioValue: String,
radioId: String = Bootstrap.newId): FormRadio
def select(title: JsDom.all.Modifier,
options: String*)
(implicit ctx: Ctx.Owner): FormSelect
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.
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")
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?
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
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
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.