litElement use class variable in static style - styles

I need to calculate same popover position in my litElement class. And next use it as style value. eg.:
export const defaultProps = {
wrapperTop: 0,
}
export class Popover extends ScopedElementsMixin(LitElement) {
...
static get properties() {
return {
wrapperTop: { type: String || Number, reflect: true},
}
}
...
constructor() {
super();
this.wrapperTop = this.defaultProps.wrapperTop
}
static get styles() {
return css`
.popover-wrapper {
top: ${this.wrapperTop} //this.wrapperTop is undefined
}`
}
calculateY () {
//calculate Y depend on some element position
}
update() {
calculateY()
}
...
return html`<div class="popoverWrapper"> ... </div>`
}
And I can't find some way to use this.wrapperTop in get static styles. It's undefined. There are some way to do this, or I have to use just style="" in render?

Add unsafeCSS to your imports:
import { html, css, LitElement, unsafeCSS } from 'lit-element';
To use
static get styles() {
return css`
.popover-wrapper {
top: ${unsafeCSS(this.wrapperTop)} //this.wrapperTop is undefined
}`
}

Related

Electron BrowserWindow not properly inherited from abstract class

I have created an abstract wrapper class around Electron's native BrowserWindow.
It defines two abstract accessors for the BrowserWindow. But whenever I inherit from BaseWindow, the window turns out to be undefined (note comments)!
import { BrowserWindow, BrowserWindowConstructorOptions } from "electron";
abstract class BaseWindow {
public constructor(options?: BrowserWindowConstructorOptions) {
this.setWindow(new BrowserWindow(options));
console.log("From Base", this.getWindow()); // > From Base BrowserWindow { ... }
}
public abstract getWindow(): BrowserWindow;
protected abstract setWindow(newWindow: BrowserWindow): void;
}
class MainWindow extends BaseWindow{
private window!: BrowserWindow;
public override getWindow(): BrowserWindow {
return this.window;
}
protected override setWindow(newWindow: BrowserWindow): void {
this.window = newWindow;
}
public constructor() {
super({
//...
});
console.log("From Main", this.getWindow()); // > From Main undefined
}
}
// Inside ready event
const window = new MainWindow();
console.log("From App", window.getWindow()) // > From App undefined
Am I doing something wrong? Are there any ways of fixing it?

Access Values From Model In Flutter

Im not able to fetch these values and Display.
This is my Model Class
enum ConnectionStatus {
connected,
addNewProduct,
failed;
}
enum IsOnlineOfflineStatus {
online,
offline;
}
class ConnectionStatusY {
String statusTitle;
IsOnlineOfflineStatus statusIndicatorDot;
IsOnlineOfflineStatus status;
String dateTime;
ConnectionStatus notificationBackgroundColor;
ConnectionStatusY({
required this.statusTitle,
required this.statusIndicatorDot,
required this.status,
required this.dateTime,
required this.notificationBackgroundColor,
});
Color getNotificationBarStatus() {
ConnectionStatus connectionStatus = ConnectionStatus.connected;
switch (connectionStatus) {
case ConnectionStatus.connected:
return Colors.white;
case ConnectionStatus.addNewProduct:
return Colors.blue;
case ConnectionStatus.failed:
return Colors.red;
}
}
String getOnlineOfflineIndicator() {
IsOnlineOfflineStatus isOnlineOfflineStatus = IsOnlineOfflineStatus.offline;
switch (isOnlineOfflineStatus) {
case IsOnlineOfflineStatus.online:
return 'Online';
case IsOnlineOfflineStatus.offline:
return 'Offline';
}
}
Color getNotificationDotStatusDot() {
IsOnlineOfflineStatus isOnlineOfflineStatus = IsOnlineOfflineStatus.offline;
switch (isOnlineOfflineStatus) {
case IsOnlineOfflineStatus.online:
return AppColors.statusColor;
case IsOnlineOfflineStatus.offline:
return Colors.red;
}
}
}
So in this StatefulWidget
class NotificationBar extends StatefulWidget {
const NotificationBar({Key? key}) : super(key: key);
#override
State<NotificationBar> createState() => _NotificationBarState();
}
class _NotificationBarState extends State<NotificationBar> {
ConnectionStatusY connectionStatusY = ConnectionStatusY(
statusTitle: StringConstants.statusTitle,
statusIndicatorDot: IsOnlineOfflineStatus.online,
status: IsOnlineOfflineStatus.online,
dateTime: AppDateAndTime().getDateAndTime(),
notificationBackgroundColor: ConnectionStatus.connected,
);
}
So, how can I access those values from my Model Class to this StatefulWidget
For example
status: IsOnlineOfflineStatus.online,
Like I want to change to Offline and Online Status, which is present in getOnlineOfflineIndicator() String, To Display in Text Widget.

Dynamic typing of child of abstract class

I have an abstract class defined statically and an implementation of it retrieved dynamically
Ie
export abstract class Foo {
abstract get();
}
const dynamicClass: typeof Foo = ( function() {
return class Bar {
get: function() {
console.log('get');
}
constructor() {
super();
console.log('cons');
}
}
}();
This is working fine exept one thing : I cannot call the constructor without "cheating"
IE
new Bar() output cannot instantiate abstract class
I have resolved that by doing
// #ts-ignore
new Bar();
But I feel i could do better.
The whole usecase for that is that the funciton that create the class at runtime will act differently based on the system it is (dynamiccally loading extra libraries that i removed for the sake of simplicity)
The easiest thing you can do is to not use an explicit type annotation, let the compiler infer what it will for dynamicClass:
export abstract class Foo {
abstract get(): void;
}
const dynamicClass = (function() {
return class Bar extends Foo {
get() {
console.log('get');
}
constructor() {
super();
console.log('cons');
}
}
})();
new dynamicClass();
Playground Link
If you want to go the explicit route you can use a constructor signature that returns Foo, this should mostly remove the abstarctness of the constructor:
export abstract class Foo {
abstract get(): void;
}
const dynamicClass: new () => Foo = (function() {
return class Bar extends Foo {
get() {
console.log('get');
}
constructor() {
super();
console.log('cons');
}
}
})();
new dynamicClass();
Playground Link

How to adjust renderer from default Phaser.Auto to Phaser.Canvas

Where can I change the renderer in this code?
import { WINDOW_WIDTH, WINDOW_HEIGHT } from './config'
import Game from './state/Game'
class App extends Phaser.Game {
constructor () {
super(WINDOW_WIDTH, WINDOW_HEIGHT, Phaser.AUTO)
this.state.add('Game', Game)
this.state.start('Game')
}
}
const SimpleGame = new App()
and game is
class Game extends Phaser.State {
constructor() {
super()
this.player = {}
}
}
In the constructor, more specifically in the super call to Phaser.Game's constructor:
class App extends Phaser.Game {
constructor () {
super(WINDOW_WIDTH, WINDOW_HEIGHT, Phaser.CANVAS);
// ...
}
}
Reference: https://photonstorm.github.io/phaser-ce/Phaser.Game.html

Loading overlay never disappears in config of Jenkins plugin

I want to add repeatable properties to the Jenkins plugin I'm developing, and created a test plugin to make make sure I was using them correctly. My plugin seems to work fine, I can add as many properties as I want when I originally edit the config, and it saves and builds. However, when I try to edit the config a second time, the config screen shows the loading overlay endlessly. If I scroll down, I can see the properties I saved earlier are still there, but I can't edit anything.
My class looks like this:
public class RepeatableTest extends Builder {
private List<Prop> property = new ArrayList<Prop>();
#DataBoundConstructor
public RepeatableTest(List<Prop> property) {
this.property = property;
}
public List<Prop> getProperty() {
return property;
}
#Override
public boolean perform(AbstractBuild build, Launcher launcher, BuildListener listener) throws IOException {
listener.getLogger().println(property.get(0).name);
listener.getLogger().println(property.size());
return true;
}
#Override
public DescriptorImpl getDescriptor() {
return (DescriptorImpl)super.getDescriptor();
}
public static class Prop extends AbstractDescribableImpl<Prop> {
public String name;
public String getName(){
return name;
}
#DataBoundConstructor
public Prop(String name) {
this.name = name;
}
#Extension
public static class DescriptorImpl extends Descriptor<Prop> {
#Override
public String getDisplayName() {
return "";
}
}
}
#Extension // This indicates to Jenkins that this is an implementation of an extension point.
public static final class DescriptorImpl extends BuildStepDescriptor<Builder> {
private String phpLoc;
public DescriptorImpl() {
load();
}
public boolean isApplicable(Class<? extends AbstractProject> aClass) {
// Indicates that this builder can be used with all kinds of project types
return true;
}
public String getDisplayName() {
return "Repeatable Test";
}
#Override
public boolean configure(StaplerRequest req, JSONObject formData) throws FormException {
phpLoc = formData.getString("phpLoc");
save();
return super.configure(req,formData);
}
public String getPhpLoc() {
return phpLoc;
}
}
}
My config.groovy looks like this:
package uitestplugin.uitest.RepeatableTest;
import lib.JenkinsTagLib
import lib.FormTagLib
def f = namespace(lib.FormTagLib)
t=namespace(JenkinsTagLib.class)
f.form{
f.entry(title:"Properties"){
f.repeatableProperty(field:"property")
}
}
and my prop/config.groovy looks like this:
package uitestplugin.uitest.RepeatableTest.Prop;
def f = namespace(lib.FormTagLib)
f.entry(title:"Name", field:"name") {
f.textbox()
}
The config.xml:
<?xml version='1.0' encoding='UTF-8'?>
<project>
<actions/>
<description></description>
<keepDependencies>false</keepDependencies>
<properties/>
<scm class="hudson.scm.NullSCM"/>
<canRoam>true</canRoam>
<disabled>false</disabled>
<blockBuildWhenDownstreamBuilding>false</blockBuildWhenDownstreamBuilding>
<blockBuildWhenUpstreamBuilding>false</blockBuildWhenUpstreamBuilding>
<triggers/>
<concurrentBuild>false</concurrentBuild>
<builders>
<uitestplugin.uitest.RepeatableTest plugin="ui-test#1.0-SNAPSHOT">
<property>
<uitestplugin.uitest.RepeatableTest_-Prop>
<name>Prop1</name>
</uitestplugin.uitest.RepeatableTest_-Prop>
<uitestplugin.uitest.RepeatableTest_-Prop>
<name>Prop2</name>
</uitestplugin.uitest.RepeatableTest_-Prop>
</property>
</uitestplugin.uitest.RepeatableTest>
</builders>
<publishers/>
<buildWrappers/>
</project>
Any ideas as to what could cause this? I based a lot of the code from the ui-samples plugin (https://wiki.jenkins-ci.org/display/JENKINS/UI+Samples+Plugin).
EDIT: The current status of this is, well, I still haven't figured it out. I've done more research and tried tons of different examples, but the farthest I ever get is what I described above. It almost seems like you can't use repeatable through groovy. Anyways, I have one more piece of information to add. Using the web developer toolbar for Firefox, I can see that there is a Javascript error on the page. The error is:
Timestamp: 10/3/2014 12:58:49 PM
Error: TypeError: prototypes is undefined
Source File: http://localhost:8080/adjuncts/e58fb488/lib/form/hetero-list/hetero-list.js
Line: 16
And the code this relates to is(I've marked line 16 with a comment at the end of the line):
// #include lib.form.dragdrop.dragdrop
// do the ones that extract innerHTML so that they can get their original HTML before
// other behavior rules change them (like YUI buttons.)
Behaviour.specify("DIV.hetero-list-container", 'hetero-list', -100, function(e) {
e=$(e);
if(isInsideRemovable(e)) return;
// components for the add button
var menu = document.createElement("SELECT");
var btns = findElementsBySelector(e,"INPUT.hetero-list-add"),
btn = btns[btns.length-1]; // In case nested content also uses hetero-list
YAHOO.util.Dom.insertAfter(menu,btn);
var prototypes = $(e.lastChild);
while(!prototypes.hasClassName("prototypes")) //LINE 16, ERROR IS HERE
prototypes = prototypes.previous();
var insertionPoint = prototypes.previous(); // this is where the new item is inserted.
// extract templates
var templates = []; var i=0;
$(prototypes).childElements().each(function (n) {
var name = n.getAttribute("name");
var tooltip = n.getAttribute("tooltip");
var descriptorId = n.getAttribute("descriptorId");
menu.options[i] = new Option(n.getAttribute("title"),""+i);
templates.push({html:n.innerHTML, name:name, tooltip:tooltip,descriptorId:descriptorId});
i++;
});
Element.remove(prototypes);
var withDragDrop = initContainerDD(e);
var menuAlign = (btn.getAttribute("menualign")||"tl-bl");
var menuButton = new YAHOO.widget.Button(btn, { type: "menu", menu: menu, menualignment: menuAlign.split("-") });
$(menuButton._button).addClassName(btn.className); // copy class names
$(menuButton._button).setAttribute("suffix",btn.getAttribute("suffix"));
menuButton.getMenu().clickEvent.subscribe(function(type,args,value) {
var item = args[1];
if (item.cfg.getProperty("disabled")) return;
var t = templates[parseInt(item.value)];
var nc = document.createElement("div");
nc.className = "repeated-chunk";
nc.setAttribute("name",t.name);
nc.setAttribute("descriptorId",t.descriptorId);
nc.innerHTML = t.html;
$(nc).setOpacity(0);
var scroll = document.body.scrollTop;
renderOnDemand(findElementsBySelector(nc,"TR.config-page")[0],function() {
function findInsertionPoint() {
// given the element to be inserted 'prospect',
// and the array of existing items 'current',
// and preferred ordering function, return the position in the array
// the prospect should be inserted.
// (for example 0 if it should be the first item)
function findBestPosition(prospect,current,order) {
function desirability(pos) {
var count=0;
for (var i=0; i<current.length; i++) {
if ((i<pos) == (order(current[i])<=order(prospect)))
count++;
}
return count;
}
var bestScore = -1;
var bestPos = 0;
for (var i=0; i<=current.length; i++) {
var d = desirability(i);
if (bestScore<=d) {// prefer to insert them toward the end
bestScore = d;
bestPos = i;
}
}
return bestPos;
}
var current = e.childElements().findAll(function(e) {return e.match("DIV.repeated-chunk")});
function o(did) {
if (Object.isElement(did))
did = did.getAttribute("descriptorId");
for (var i=0; i<templates.length; i++)
if (templates[i].descriptorId==did)
return i;
return 0; // can't happen
}
var bestPos = findBestPosition(t.descriptorId, current, o);
if (bestPos<current.length)
return current[bestPos];
else
return insertionPoint;
}
(e.hasClassName("honor-order") ? findInsertionPoint() : insertionPoint).insert({before:nc});
if(withDragDrop) prepareDD(nc);
new YAHOO.util.Anim(nc, {
opacity: { to:1 }
}, 0.2, YAHOO.util.Easing.easeIn).animate();
Behaviour.applySubtree(nc,true);
ensureVisible(nc);
layoutUpdateCallback.call();
},true);
});
menuButton.getMenu().renderEvent.subscribe(function() {
// hook up tooltip for menu items
var items = menuButton.getMenu().getItems();
for(i=0; i<items.length; i++) {
var t = templates[i].tooltip;
if(t!=null)
applyTooltip(items[i].element,t);
}
});
if (e.hasClassName("one-each")) {
// does this container already has a ocnfigured instance of the specified descriptor ID?
function has(id) {
return Prototype.Selector.find(e.childElements(),"DIV.repeated-chunk[descriptorId=\""+id+"\"]")!=null;
}
menuButton.getMenu().showEvent.subscribe(function() {
var items = menuButton.getMenu().getItems();
for(i=0; i<items.length; i++) {
items[i].cfg.setProperty("disabled",has(templates[i].descriptorId));
}
});
}
});
Behaviour.specify("DIV.dd-handle", 'hetero-list', -100, function(e) {
e=$(e);
e.on("mouseover",function() {
$(this).up(".repeated-chunk").addClassName("hover");
});
e.on("mouseout",function() {
$(this).up(".repeated-chunk").removeClassName("hover");
});
});
I hope this is enough information to solve the problem. Any suggestions (even if they aren't complete answers) are really appreciated.
While not an exact answer, I did find a way to get this working. For some reason, putting the repeatableProperty in an advanced block stopped the javascript error from happening, so everything loaded fine.
So, my config.groovy for RepeatableTest looked like this:
package uitestplugin.uitest.RepeatableTest;
f = namespace(lib.FormTagLib)
f.advanced{
f.entry(title:"Properties"){
f.repeatableProperty(field:"property", minimum:"1"){
}
}
}
My config.groovy for Prop1 looked like this:
package uitestplugin.uitest.Prop1;
def f = namespace(lib.FormTagLib)
f.entry(title:"Name",field:"name") {
f.textbox()
}
f.entry {
div(align:"left") {
input(type:"button",value:"Delete",class:"repeatable-delete")
}
}
My prop 1 looked like this:
public class Prop1 extends AbstractDescribableImpl<Prop1> {
private final String name;
public String getName(){
return name;
}
#DataBoundConstructor
public Prop1( String name) {
this.name = name;
}
#Extension
public static class DescriptorImpl extends Descriptor<Prop1> {
#Override
public String getDisplayName() {
return "";
}
}
}
And my RepeatableTest.java looked like this:
public class RepeatableTest extends Builder {
private final List<Prop1> property;
// Fields in config.jelly must match the parameter names in the "DataBoundConstructor"
#DataBoundConstructor
public RepeatableTest(List<Prop1> property) {
this.property = property;
}
public List<Prop1> getProperty() {
return property;
}
#Override
public boolean perform(AbstractBuild build, Launcher launcher, BuildListener listener) throws IOException {
//Doesn't matter
}
#Override
public DescriptorImpl getDescriptor() {
return (DescriptorImpl)super.getDescriptor();
}
#Extension // This indicates to Jenkins that this is an implementation of an extension point.
public static final class DescriptorImpl extends BuildStepDescriptor<Builder> {
private String phpLoc;
public DescriptorImpl() {
load();
}
public boolean isApplicable(Class<? extends AbstractProject> aClass) {
// Indicates that this builder can be used with all kinds of project types
return true;
}
public String getDisplayName() {
return "Repeatable Test";
}
#Override
public boolean configure(StaplerRequest req, JSONObject formData) throws FormException {
phpLoc = formData.getString("phpLoc");
save();
return super.configure(req,formData);
}
public String getPhpLoc() {
return phpLoc;
}
}
}

Resources