问:
How can i get the DD/MM/YYYY formar in my datepicker?
im from spain and i need to put the DD/MM/YYYY format in my datepicker, here is the code

Inicio de castigo

  <input type='text' id="from" name="from" class="form-control" readonly />

Final de castigo

  <input type='text' name="to" id="to" class="form-control" readonly />

```
</div>
</div>
</p>

<p>I put in the script the MM-DD-YYYY fromat but when i pick the calendar he gives me the MM-DD-YYYY format, that is the uk hour. Today is 07 of June of 2017, and when i open it, it says that is 6 of July 2017. How can i solve that? It can be a problem of the datetimepicker.es.js files? . Thanks for the help guys :)</p>

<p>I have more information in that file, there are all the scripts i use</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><script type="text/javascript" src="<?=$base_url?>js/es-ES.js"></script>
<script src="<?=$base_url?>js/jquery.min.js"></script>
<script src="<?=$base_url?>js/moment.js"></script>
<script src="<?=$base_url?>js/bootstrap.min.js"></script>
<script src="<?=$base_url?>js/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="<?=$base_url?>css/bootstrap-datetimepicker.min.css" />
<script src="<?=$base_url?>js/bootstrap-datetimepicker.es.js"></script></code>```

答:
```<code><br>
<label for="from">Inicio de castigo </label>
<div class='input-group date' id='from'>
    <input type='text' id="from" name="from" class="form-control datepicker" readonly  />
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</div>

<br>

<label for="to">Final de castigo </label>
<div class='input-group date' id='to'>
    <input type='text' name="to" id="to" class="form-control datepicker" readonly />
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</div>

<br>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script></p>

<script>
  $( function() {
    $( ".datepicker" ).datepicker({
        format: 'DD-MM-YYYY',
        maxViewMode: 0,
        language: 'es',
        daysOfWeekDisabled: '0,6',
        todayHighlight: true,
        minDate: new Date(1, 1, 2017),
        pickTime: false
    });
  } );
</script>
</code>```

Body:
im from spain and i need to put the DD/MM/YYYY format in my datepicker, here is the code

Inicio de castigo

  <input type='text' id="from" name="from" class="form-control" readonly />

Final de castigo

  <input type='text' name="to" id="to" class="form-control" readonly />

I put in the script the MM-DD-YYYY fromat but when i pick the calendar he gives me the MM-DD-YYYY format, that is the uk hour. Today is 07 of June of 2017, and when i open it, it says that is 6 of July 2017. How can i solve that? It can be a problem of the datetimepicker.es.js files? . Thanks for the help guys :)

I have more information in that file, there are all the scripts i use

<link rel="stylesheet" href="<?=$base_url?>css/bootstrap-datetimepicker.min.css" />


来源: stackexchange

问:
Paypal donate button ionic
i have been strugling a bit with getting this to work, as i prefer not to use the PayPal plugin since it look like much work for the simple thing im trying to achieve.

I have basically followed the PayPal guide to create a donate button which works in a browser, but when i click it inside a ionic project it wont work and i cant get it to open.

I have tried with just the form (which doesnt open the browser with the callback):

```<code><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_system"> [...] </form>
</code>```

After that i tried to first open a window and then do the post in that window, but that just closed the window at once.

```<code>$scope.donate = function() {
    var win = window.open( "about:blank", "_blank" );
    document.getElementById('theForm').submit();
}
</code>```

I dont really know what can be done from here so any help would be appreciated.

Edit:
On a sidenote, is it possible to use https://www.paypal.com/no/webapps/mpp/send-money-online and then add for example a default receiver email like sendt@me.com somehow?

答:
I have a same problem and I solved it, with "ngNoForm". ngNoForm turn off ngSubmit behavior (which prevent default submit on form).

So the code is:

```<code><form ngNoForm action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_system"> [...] </form>
</code>```

ContentLicense: CC BY-SA 3.0

Title: Paypal donate button ionic

Body:
i have been strugling a bit with getting this to work, as i prefer not to use the PayPal plugin since it look like much work for the simple thing im trying to achieve.

I have basically followed the PayPal guide to create a donate button which works in a browser, but when i click it inside a ionic project it wont work and i cant get it to open.

I have tried with just the form (which doesnt open the browser with the callback):

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_system"> [...] </form>

After that i tried to first open a window and then do the post in that window, but that just closed the window at once.

$scope.donate = function() {
    var win = window.open( "about:blank", "_blank" );
    document.getElementById('theForm').submit();
}

I dont really know what can be done from here so any help would be appreciated.

Edit:
On a sidenote, is it possible to use https://www.paypal.com/no/webapps/mpp/send-money-online and then add for example a default receiver email like sendt@me.com somehow?

Body:
I have a same problem and I solved it, with "ngNoForm". ngNoForm turn off ngSubmit behavior (which prevent default submit on form).

So the code is:

<form ngNoForm action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_system"> [...] </form>


问:
Use the same IDB2 connection between forms
Either this is so simple that no one is asking about it, or not many people are trying to do this so I am unable to find any kind of good results in a google query.  Basically, my main form is creating an IDB2 connection to an i-series (AS400) mainframe:

```<code>Connection con = new Connection();
con.Open(connectionString, userName, userPassword, 0);
</code>```

The main form can use this connection fine.  I have another form that displays records in an internal SQL database on the PC, but this form also needs to access the AS400.  I added an entry parameter of IDB2connection, and when the form first initializes the connection state is open.  However, when I click on a button on the form and enter into that new subroutine, the connection is null.  In order to keep the connection open at all times, do I need to make it public or something?  I could put all the code to re-open a new connection in this form, but it seems kind of clunky.  Any ideas of how to share the open connection between forms?

New form:

```<code>private iDB2Connection conn;

public frmFileDatabase(iDB2Connection conn)
    {
        InitializeComponent();
    }

private void btnUpload_Click(object sender, EventArgs e)
    {
        // conn is null at this point
    }
</code>```

答:
```<code>private iDB2Connection conn;

public frmFileDatabase(iDB2Connection _conn)
    {
        InitializeComponent();
        conn = _conn;
    }

private void btnUpload_Click(object sender, EventArgs e)
    {
        // you can use the connection
    }
</code>```

you need to assign the parameter to your private variable,
this might help you

Body:
Either this is so simple that no one is asking about it, or not many people are trying to do this so I am unable to find any kind of good results in a google query.  Basically, my main form is creating an IDB2 connection to an i-series (AS400) mainframe:

Connection con = new Connection();
con.Open(connectionString, userName, userPassword, 0);

The main form can use this connection fine.  I have another form that displays records in an internal SQL database on the PC, but this form also needs to access the AS400.  I added an entry parameter of IDB2connection, and when the form first initializes the connection state is open.  However, when I click on a button on the form and enter into that new subroutine, the connection is null.  In order to keep the connection open at all times, do I need to make it public or something?  I could put all the code to re-open a new connection in this form, but it seems kind of clunky.  Any ideas of how to share the open connection between forms?

New form:

private iDB2Connection conn;

public frmFileDatabase(iDB2Connection conn)
    {
        InitializeComponent();
    }

private void btnUpload_Click(object sender, EventArgs e)
    {
        // conn is null at this point
    }

Body:
private iDB2Connection conn;

public frmFileDatabase(iDB2Connection _conn)
    {
        InitializeComponent();
        conn = _conn;
    }

private void btnUpload_Click(object sender, EventArgs e)
    {
        // you can use the connection
    }

you need to assign the parameter to your private variable,
this might help you


问:
How do you make tooltip show up for longer in IE
i got the following

```<code><span id="pageLink" style="cursor:pointer;" onClick="...." title="<%=pHelper.getNameToolTip()%>">
</code>```

in firefox the tooltip stays there until the mouse is moved, but in IE it only stays there for about 5seconds and disappears.

is there a way to make it last longer?

答:
As mentioned by others, you can't change the default way that browsers display tooltips. You are also very limited in your display capabilities. (e.g. Text only, no control of layout, wrapping, or styling, no images, ...) I used jQuery Tooltip on project and it worked out extremely well. It provides you a high degree of control over your tooltips, including display of arbitrary content. Highly recommended.

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

ContentLicense: CC BY-SA 2.5

Body:
i got the following

<span id="pageLink" style="cursor:pointer;" onClick="...." title="<%=pHelper.getNameToolTip()%>">

in firefox the tooltip stays there until the mouse is moved, but in IE it only stays there for about 5seconds and disappears.

is there a way to make it last longer?


问:
Angular 4 pass data between 2 not related components
I have a questions about passing data in Angular.

First, I don't have a structure as <parent><child [data]=parent.data></child></parent>

My structure is

```<code><container>
  <navbar>
    <summary></summary>
    <child-summary><child-summary>
  </navbar>
  <content></content>
</container>
</code>```

So, in  I have a select that do send value to <child-summary /> and <content />.

OnSelect method is well fired with (change) inside  component.

So, I tried with @Input, @Output and @EventEmitter directives, but I don't see how retrieve the event as @Input of the component, unless to go on parent/child pattern. All examples I've founded has a relation between component.

EDIT : Example with BehaviorSubject not working (all connected service to API works well, only observable is fired at start but not when select has value changed)

shared service = company.service.ts (used to retrieve company data)

```<code>import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class SrvCompany {

    private accountsNumber = new BehaviorSubject<string[]>([]);
    currentAccountsNumber = this.accountsNumber.asObservable();

    changeMessage(accountsNumber: string[]) {
        this.accountsNumber.next(accountsNumber);
    }

    private _companyUrl = 'api/tiers/';

    constructor(private http: Http) { }

    getSociete(): Promise<Response> {
        let url = this._companyUrl;
        return this.http.get(url).toPromise();
    }
}
</code>```

invoice.component.ts (the "child")

```<code>import { Component, OnInit, Input } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';

import { SrvInvoice } from './invoice.service';
import { SrvCompany } from '../company/company.service';

@Component({
    selector: 'invoice',
    templateUrl: 'tsScripts/invoice/invoice.html',
    providers: [SrvInvoice, SrvCompany]
})

export class InvoiceComponent implements OnInit  {

    invoice: any;

    constructor(private srvInvoice: SrvInvoice, private srvCompany: SrvCompany)
    {

    }

    ngOnInit(): void {
        //this.getInvoice("F001");

        // Invoice data is linked to accounts number from company.
        this.srvCompany.currentAccountsNumber.subscribe(accountsNumber => {
            console.log(accountsNumber);
            if (accountsNumber.length > 0) {
                this.srvInvoice.getInvoice(accountsNumber).then(data => this.invoice = data.json());
            }
        });
    }

    //getInvoice(id: any) {
    //    this.srvInvoice.getInvoice(id).then(data => this.invoice = data.json());
    //}
}
</code>```

company.component.ts (the trigerring "parent")

```<code>import { Component, Inject, OnInit, Input } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';

import { SrvCompany } from './company.service';

@Component({
    selector: 'company',
    templateUrl: 'tsScripts/company/company.html',
    providers: [SrvCompany]
})

export class CompanyComponent implements OnInit {

    societes: any[];
    soc: Response[]; // debug purpose
    selectedSociete: any;

    ville: any;
    ref: any;
    cp: any;
    accountNumber: any[];

    constructor(private srvSociete: SrvCompany)
    {

    }

    ngOnInit(): void {
        this.getSocietes();
    }

    getSocietes(): void {

        this.srvSociete.getSociete()
            .then(data => this.societes = data.json())
            .then(data => this.selectItem(this.societes[0].Id));
    }

    selectItem(value: any) {
        this.selectedSociete = this.societes.filter((item: any) => item.Id === value)[0];
        this.cp = this.selectedSociete.CodePostal;
        this.ville = this.selectedSociete.Ville;
        this.ref = this.selectedSociete.Id;
        this.accountNumber = this.selectedSociete.Accounts;
        console.log(this.accountNumber);
        this.srvSociete.changeMessage(this.accountNumber);
    }
}
</code>```

答:
This is a case where you want to use a shared service, as your components are structured as siblings and grandchildren. Here's an example from a video I created a video about sharing data between components that solves this exact problem.

Start by creating a BehaviorSubject in the service

```<code>import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject("default message");
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}
</code>```

Then inject this service into each component and subscribe to the observable.

```<code>import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
  selector: 'app-parent',
  template: `
    {{message}}
  `,
  styleUrls: ['./sibling.component.css']
})
export class ParentComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

}
</code>```

You can change the value from either component and the value will be updated, even if you don't have the parent/child relationship.

```<code>import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
  selector: 'app-sibling',
  template: `
    {{message}}
    <button (click)="newMessage()">New Message</button>
  `,
  styleUrls: ['./sibling.component.css']
})
export class SiblingComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

  newMessage() {
    this.data.changeMessage("Hello from Sibling")
  }

}
</code>```

ContentLicense: CC BY-SA 4.0

Body:
I have a questions about passing data in Angular.

First, I don't have a structure as <parent><child [data]=parent.data></child></parent>

My structure is

<container>
  <navbar>

    <child-summary><child-summary>
  </navbar>
  <content></content>
</container>

So, in  I have a select that do send value to <child-summary /> and <content />.

OnSelect method is well fired with (change) inside  component.

So, I tried with @Input, @Output and @EventEmitter directives, but I don't see how retrieve the event as @Input of the component, unless to go on parent/child pattern. All examples I've founded has a relation between component.

EDIT : Example with BehaviorSubject not working (all connected service to API works well, only observable is fired at start but not when select has value changed)

shared service = company.service.ts (used to retrieve company data)

import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class SrvCompany {

    private accountsNumber = new BehaviorSubject<string[]>([]);
    currentAccountsNumber = this.accountsNumber.asObservable();

    changeMessage(accountsNumber: string[]) {
        this.accountsNumber.next(accountsNumber);
    }

    private _companyUrl = 'api/tiers/';

    constructor(private http: Http) { }

    getSociete(): Promise<Response> {
        let url = this._companyUrl;
        return this.http.get(url).toPromise();
    }
}

invoice.component.ts (the "child")

import { Component, OnInit, Input } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';

import { SrvInvoice } from './invoice.service';
import { SrvCompany } from '../company/company.service';

@Component({
    selector: 'invoice',
    templateUrl: 'tsScripts/invoice/invoice.html',
    providers: [SrvInvoice, SrvCompany]
})

export class InvoiceComponent implements OnInit  {

    invoice: any;

    constructor(private srvInvoice: SrvInvoice, private srvCompany: SrvCompany)
    {

    }

    ngOnInit(): void {
        //this.getInvoice("F001");

        // Invoice data is linked to accounts number from company.
        this.srvCompany.currentAccountsNumber.subscribe(accountsNumber => {
            console.log(accountsNumber);
            if (accountsNumber.length > 0) {
                this.srvInvoice.getInvoice(accountsNumber).then(data => this.invoice = data.json());
            }
        });
    }

    //getInvoice(id: any) {
    //    this.srvInvoice.getInvoice(id).then(data => this.invoice = data.json());
    //}
}

company.component.ts (the trigerring "parent")

import { Component, Inject, OnInit, Input } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';

import { SrvCompany } from './company.service';

@Component({
    selector: 'company',
    templateUrl: 'tsScripts/company/company.html',
    providers: [SrvCompany]
})

export class CompanyComponent implements OnInit {

    societes: any[];
    soc: Response[]; // debug purpose
    selectedSociete: any;

    ville: any;
    ref: any;
    cp: any;
    accountNumber: any[];

    constructor(private srvSociete: SrvCompany)
    {

    }

    ngOnInit(): void {
        this.getSocietes();
    }

    getSocietes(): void {

        this.srvSociete.getSociete()
            .then(data => this.societes = data.json())
            .then(data => this.selectItem(this.societes[0].Id));
    }

    selectItem(value: any) {
        this.selectedSociete = this.societes.filter((item: any) => item.Id === value)[0];
        this.cp = this.selectedSociete.CodePostal;
        this.ville = this.selectedSociete.Ville;
        this.ref = this.selectedSociete.Id;
        this.accountNumber = this.selectedSociete.Accounts;
        console.log(this.accountNumber);
        this.srvSociete.changeMessage(this.accountNumber);
    }
}

Body:
This is a case where you want to use a shared service, as your components are structured as siblings and grandchildren. Here's an example from a video I created a video about sharing data between components that solves this exact problem.

Start by creating a BehaviorSubject in the service

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject("default message");
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}

Then inject this service into each component and subscribe to the observable.

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
  selector: 'app-parent',
  template: `
    {{message}}
  `,
  styleUrls: ['./sibling.component.css']
})
export class ParentComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

}

You can change the value from either component and the value will be updated, even if you don't have the parent/child relationship.

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
  selector: 'app-sibling',
  template: `
    {{message}}
    <button (click)="newMessage()">New Message</button>
  `,
  styleUrls: ['./sibling.component.css']
})
export class SiblingComponent implements OnInit {

  message:string;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

  newMessage() {
    this.data.changeMessage("Hello from Sibling")
  }

}


问:
Editor controls for iText on double-click
How would I achieve displaying text editing controls on-click, like here for example (see: Add Text)? I've managed to incorporate some menu text editing controls before but would like to give this a go. I tried posting the code here but the JS/HTML/CSS snippet tool was breaking for me.

Thanks in advance!

Edited with answer:

// Add image from local
var canvas = new fabric.Canvas('c');

// display/hide controls on double click
fabric.util.addListener(canvas.upperCanvasEl, 'dblclick', function(e) {
   if (canvas.findTarget(e)) {
      let objType = canvas.findTarget(e).type;
      if (objType === 'i-text') {
         document.getElementById('textControls').hidden = false;
      }
   }
});
canvas.on('before:selection:cleared', function(e) {
   document.getElementById('trash').hidden = true;
   document.getElementById('forward').hidden = true;
   document.getElementById('back').hidden = true;
   if (e.target.type === 'i-text') {
      document.getElementById('textControls').hidden = true;
   }
});

document.getElementById('file').addEventListener("change", function(e) {
   var file = e.target.files[0];
   var reader = new FileReader();
   reader.onload = function(f) {
      var data = f.target.result;
      fabric.Image.fromURL(data, function(img) {
         var oImg = img.set({
            left: 0,
            top: 0,
            angle: 00,
            stroke: '#F0F0F0', //<-- set this
            strokeWidth: 40 //<-- set this
         }).scale(0.2);
         canvas.add(oImg).renderAll();
         //var a = canvas.setActiveObject(oImg);
         var dataURL = canvas.toDataURL({
            format: 'png',
            quality: 1
         });
      });
   };
   reader.readAsDataURL(file);
});
// Delete selected object
window.deleteObject = function() {
      canvas.getActiveObject().remove();
   }
   // Refresh page
function refresh() {
   setTimeout(function() {
      location.reload()
   }, 100);
}
// Add text
function Addtext() {
   canvas.add(new fabric.IText('Tap and Type', {
      left: 50,
      top: 100,
      fontFamily: 'helvetica neue',
      fill: '#333',
      stroke: '#F0F0F0',
      strokeWidth: 1,
      fontSize: 45
   }));
}
document.getElementById('text-color').onchange = function() {
   canvas.getActiveObject().setFill(this.value);
   canvas.renderAll();
};
document.getElementById('text-color').onchange = function() {
   canvas.getActiveObject().setFill(this.value);
   canvas.renderAll();
};
document.getElementById('text-bg-color').onchange = function() {
   canvas.getActiveObject().setBackgroundColor(this.value);
   canvas.renderAll();
};
document.getElementById('text-lines-bg-color').onchange = function() {
   canvas.getActiveObject().setTextBackgroundColor(this.value);
   canvas.renderAll();
};
document.getElementById('text-stroke-color').onchange = function() {
   canvas.getActiveObject().setStroke(this.value);
   canvas.renderAll();
};
document.getElementById('text-stroke-width').onchange = function() {
   canvas.getActiveObject().setStrokeWidth(this.value);
   canvas.renderAll();
};
document.getElementById('font-family').onchange = function() {
   canvas.getActiveObject().setFontFamily(this.value);
   canvas.renderAll();
};
document.getElementById('text-font-size').onchange = function() {
   canvas.getActiveObject().setFontSize(this.value);
   canvas.renderAll();
};
document.getElementById('text-line-height').onchange = function() {
   canvas.getActiveObject().setLineHeight(this.value);
   canvas.renderAll();
};
document.getElementById('text-align').onchange = function() {
   canvas.getActiveObject().setTextAlign(this.value);
   canvas.renderAll();
};
radios5 = document.getElementsByName("fonttype"); // wijzig naar button
for (var i = 0, max = radios5.length; i < max; i++) {
   radios5[i].onclick = function() {
      if (document.getElementById(this.id).checked == true) {
         if (this.id == "text-cmd-bold") {
            canvas.getActiveObject().set("fontWeight", "bold");
         }
         if (this.id == "text-cmd-italic") {
            canvas.getActiveObject().set("fontStyle", "italic");
         }
         if (this.id == "text-cmd-underline") {
            canvas.getActiveObject().set("textDecoration", "underline");
         }
         if (this.id == "text-cmd-linethrough") {
            canvas.getActiveObject().set("textDecoration", "line-through");
         }
         if (this.id == "text-cmd-overline") {
            canvas.getActiveObject().set("textDecoration", "overline");
         }
      } else {
         if (this.id == "text-cmd-bold") {
            canvas.getActiveObject().set("fontWeight", "");
         }
         if (this.id == "text-cmd-italic") {
            canvas.getActiveObject().set("fontStyle", "");
         }
         if (this.id == "text-cmd-underline") {
            canvas.getActiveObject().set("textDecoration", "");
         }
         if (this.id == "text-cmd-linethrough") {
            canvas.getActiveObject().set("textDecoration", "");
         }
         if (this.id == "text-cmd-overline") {
            canvas.getActiveObject().set("textDecoration", "");
         }
      }
      canvas.renderAll();
   }
}
// Send selected object to front or back
var selectedObject;
canvas.on('object:selected', function(event) {
   selectedObject = event.target;
});
var sendSelectedObjectBack = function() {
   canvas.sendToBack(selectedObject);
}
var sendSelectedObjectToFront = function() {
   canvas.bringToFront(selectedObject);
}```
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
   padding: 10px 10px 10px 10px;
   font-family: "HelveticaNeue";
}

canvas {
   border: 1px solid grey;
   margin: 10px 0px 0px 0px;
}

.myFile {
   position: relative;
   overflow: hidden;
   float: left;
   clear: left;
}

.myFile input[type="file"] {
   display: block;
   position: absolute;
   top: 0;
   right: 0;
   opacity: 0;
   font-size: 30px;
   filter: alpha(opacity=0);
}

.footerheader {
   margin-top: 10px;
   font-weight: bold;
}</code>```

Testing

   <button>+ Photo</button>
   <input type="file" id="file" />

<button onclick="Addtext()">+ Text</button> / Selected Object:
<button id="trash" onClick="deleteObject()">Trash</button>
<button id="forward" onclick="sendSelectedObjectToFront()">Forward</button>
<button id="back" onclick="sendSelectedObjectBack()">Back</button> /
<button onclick="refresh()">Clear All</button>
<canvas id="c" width="800" height="600"></canvas>

Test Text Controls

         <input type="color" id="text-color" size="10">
         Font family:
         <select id="font-family">
            <option value="arial">Arial</option>
            <option value="helvetica" selected>Helvetica</option>
            <option value="myriad pro">Myriad Pro</option>
            <option value="delicious">Delicious</option>
            <option value="verdana">Verdana</option>
            <option value="georgia">Georgia</option>
            <option value="courier">Courier</option>
            <option value="comic sans ms">Comic Sans MS</option>
            <option value="impact">Impact</option>
            <option value="monaco">Monaco</option>
            <option value="optima">Optima</option>
            <option value="hoefler text">Hoefler Text</option>
            <option value="plaster">Plaster</option>
            <option value="engagement">Engagement</option>
         </select>

         Text align:
         <select id="text-align">
            <option value="left">Left</option>
            <option value="center">Center</option>
            <option value="right">Right</option>
            <option value="justify">Justify</option>
         </select>

            Background color:
            <input type="color" id="text-bg-color" size="10">

            Background text color:
            <input type="color" id="text-lines-bg-color" size="10">

            Stroke color:
            <input type="color" id="text-stroke-color">

            Stroke width:
            <input type="range" value="1" min="1" max="5" id="text-stroke-width">

            Font size:
            <input type="range" min="1" max="120" step="1" id="text-font-size">

            Line height:
            <input type="range" min="0" max="10" step="0.1" id="text-line-height">

         <input type='checkbox' name='fonttype' id="text-cmd-bold"> Bold
         <input type='checkbox' name='fonttype' id="text-cmd-italic"> Italic
         <input type='checkbox' name='fonttype' id="text-cmd-underline"> Underline
         <input type='checkbox' name='fonttype' id="text-cmd-linethrough"> Linethrough
         <input type='checkbox' name='fonttype' id="text-cmd-overline"> Overline

asdasd

1

1

1

```

答:
You could use fabric.util.addListener method to detect double click event on fabricjs canvas and upon double click you'd have to check whether you clicked on a text object (iText) or not, henceforth display the text editing controls accordingly.

```<code>fabric.util.addListener(canvas.upperCanvasEl, 'dblclick', function(e) {
   if (canvas.findTarget(e)) {
      let objType = canvas.findTarget(e).type;
      if (objType === 'i-text') {
         document.getElementById('textControls').hidden = false; //show controls
      }
   }
});
</code>```

ᴅᴇᴍᴏ ⧩

// Add image from local
var canvas = new fabric.Canvas('c');

// display/hide controls on double click
fabric.util.addListener(canvas.upperCanvasEl, 'dblclick', function(e) {
   if (canvas.findTarget(e)) {
      let objType = canvas.findTarget(e).type;
      if (objType === 'i-text') {
         document.getElementById('textControls').hidden = false;
      }
   }
});
canvas.on('before:selection:cleared', function(e) {
   document.getElementById('trash').hidden = true;
   document.getElementById('forward').hidden = true;
   document.getElementById('back').hidden = true;
   if (e.target.type === 'i-text') {
      document.getElementById('textControls').hidden = true;
   }
});

document.getElementById('file').addEventListener("change", function(e) {
   var file = e.target.files[0];
   var reader = new FileReader();
   reader.onload = function(f) {
      var data = f.target.result;
      fabric.Image.fromURL(data, function(img) {
         var oImg = img.set({
            left: 0,
            top: 0,
            angle: 00,
            stroke: '#F0F0F0', //<-- set this
            strokeWidth: 40 //<-- set this
         }).scale(0.2);
         canvas.add(oImg).renderAll();
         //var a = canvas.setActiveObject(oImg);
         var dataURL = canvas.toDataURL({
            format: 'png',
            quality: 1
         });
      });
   };
   reader.readAsDataURL(file);
});
// Delete selected object
window.deleteObject = function() {
      canvas.getActiveObject().remove();
   }
   // Refresh page
function refresh() {
   setTimeout(function() {
      location.reload()
   }, 100);
}
// Add text
function Addtext() {
   canvas.add(new fabric.IText('Tap and Type', {
      left: 50,
      top: 100,
      fontFamily: 'helvetica neue',
      fill: '#333',
      stroke: '#F0F0F0',
      strokeWidth: 1,
      fontSize: 45
   }));
}
document.getElementById('text-color').onchange = function() {
   canvas.getActiveObject().setFill(this.value);
   canvas.renderAll();
};
document.getElementById('text-color').onchange = function() {
   canvas.getActiveObject().setFill(this.value);
   canvas.renderAll();
};
document.getElementById('text-bg-color').onchange = function() {
   canvas.getActiveObject().setBackgroundColor(this.value);
   canvas.renderAll();
};
document.getElementById('text-lines-bg-color').onchange = function() {
   canvas.getActiveObject().setTextBackgroundColor(this.value);
   canvas.renderAll();
};
document.getElementById('text-stroke-color').onchange = function() {
   canvas.getActiveObject().setStroke(this.value);
   canvas.renderAll();
};
document.getElementById('text-stroke-width').onchange = function() {
   canvas.getActiveObject().setStrokeWidth(this.value);
   canvas.renderAll();
};
document.getElementById('font-family').onchange = function() {
   canvas.getActiveObject().setFontFamily(this.value);
   canvas.renderAll();
};
document.getElementById('text-font-size').onchange = function() {
   canvas.getActiveObject().setFontSize(this.value);
   canvas.renderAll();
};
document.getElementById('text-line-height').onchange = function() {
   canvas.getActiveObject().setLineHeight(this.value);
   canvas.renderAll();
};
document.getElementById('text-align').onchange = function() {
   canvas.getActiveObject().setTextAlign(this.value);
   canvas.renderAll();
};
radios5 = document.getElementsByName("fonttype"); // wijzig naar button
for (var i = 0, max = radios5.length; i < max; i++) {
   radios5[i].onclick = function() {
      if (document.getElementById(this.id).checked == true) {
         if (this.id == "text-cmd-bold") {
            canvas.getActiveObject().set("fontWeight", "bold");
         }
         if (this.id == "text-cmd-italic") {
            canvas.getActiveObject().set("fontStyle", "italic");
         }
         if (this.id == "text-cmd-underline") {
            canvas.getActiveObject().set("textDecoration", "underline");
         }
         if (this.id == "text-cmd-linethrough") {
            canvas.getActiveObject().set("textDecoration", "line-through");
         }
         if (this.id == "text-cmd-overline") {
            canvas.getActiveObject().set("textDecoration", "overline");
         }
      } else {
         if (this.id == "text-cmd-bold") {
            canvas.getActiveObject().set("fontWeight", "");
         }
         if (this.id == "text-cmd-italic") {
            canvas.getActiveObject().set("fontStyle", "");
         }
         if (this.id == "text-cmd-underline") {
            canvas.getActiveObject().set("textDecoration", "");
         }
         if (this.id == "text-cmd-linethrough") {
            canvas.getActiveObject().set("textDecoration", "");
         }
         if (this.id == "text-cmd-overline") {
            canvas.getActiveObject().set("textDecoration", "");
         }
      }
      canvas.renderAll();
   }
}
// Send selected object to front or back
var selectedObject;
canvas.on('object:selected', function(event) {
   selectedObject = event.target;
});
var sendSelectedObjectBack = function() {
   canvas.sendToBack(selectedObject);
}
var sendSelectedObjectToFront = function() {
   canvas.bringToFront(selectedObject);
}```
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
   padding: 10px 10px 10px 10px;
   font-family: "HelveticaNeue";
}

canvas {
   border: 1px solid grey;
   margin: 10px 0px 0px 0px;
}

.myFile {
   position: relative;
   overflow: hidden;
   float: left;
   clear: left;
}

.myFile input[type="file"] {
   display: block;
   position: absolute;
   top: 0;
   right: 0;
   opacity: 0;
   font-size: 30px;
   filter: alpha(opacity=0);
}

.footerheader {
   margin-top: 10px;
   font-weight: bold;
}</code>```

Testing

   <button>+ Photo</button>
   <input type="file" id="file" />

<button onclick="Addtext()">+ Text</button> / Selected Object:
<button id="trash" onClick="deleteObject()">Trash</button>
<button id="forward" onclick="sendSelectedObjectToFront()">Forward</button>
<button id="back" onclick="sendSelectedObjectBack()">Back</button> /
<button onclick="refresh()">Clear All</button>
<canvas id="c" width="800" height="600"></canvas>

Test Text Controls

         <input type="color" id="text-color" size="10">
         Font family:
         <select id="font-family">
            <option value="arial">Arial</option>
            <option value="helvetica" selected>Helvetica</option>
            <option value="myriad pro">Myriad Pro</option>
            <option value="delicious">Delicious</option>
            <option value="verdana">Verdana</option>
            <option value="georgia">Georgia</option>
            <option value="courier">Courier</option>
            <option value="comic sans ms">Comic Sans MS</option>
            <option value="impact">Impact</option>
            <option value="monaco">Monaco</option>
            <option value="optima">Optima</option>
            <option value="hoefler text">Hoefler Text</option>
            <option value="plaster">Plaster</option>
            <option value="engagement">Engagement</option>
         </select>

         Text align:
         <select id="text-align">
            <option value="left">Left</option>
            <option value="center">Center</option>
            <option value="right">Right</option>
            <option value="justify">Justify</option>
         </select>

            Background color:
            <input type="color" id="text-bg-color" size="10">

            Background text color:
            <input type="color" id="text-lines-bg-color" size="10">

            Stroke color:
            <input type="color" id="text-stroke-color">

            Stroke width:
            <input type="range" value="1" min="1" max="5" id="text-stroke-width">

            Font size:
            <input type="range" min="1" max="120" step="1" id="text-font-size">

            Line height:
            <input type="range" min="0" max="10" step="0.1" id="text-line-height">

         <input type='checkbox' name='fonttype' id="text-cmd-bold"> Bold
         <input type='checkbox' name='fonttype' id="text-cmd-italic"> Italic
         <input type='checkbox' name='fonttype' id="text-cmd-underline"> Underline
         <input type='checkbox' name='fonttype' id="text-cmd-linethrough"> Linethrough
         <input type='checkbox' name='fonttype' id="text-cmd-overline"> Overline

asdasd

1

1

1

```

Body:
How would I achieve displaying text editing controls on-click, like here for example (see: Add Text)? I've managed to incorporate some menu text editing controls before but would like to give this a go. I tried posting the code here but the JS/HTML/CSS snippet tool was breaking for me.

Thanks in advance!

Edited with answer:

// Add image from local
var canvas = new fabric.Canvas('c');

// display/hide controls on double click
fabric.util.addListener(canvas.upperCanvasEl, 'dblclick', function(e) {
   if (canvas.findTarget(e)) {
      let objType = canvas.findTarget(e).type;
      if (objType === 'i-text') {
         document.getElementById('textControls').hidden = false;
      }
   }
});
canvas.on('before:selection:cleared', function(e) {
   document.getElementById('trash').hidden = true;
   document.getElementById('forward').hidden = true;
   document.getElementById('back').hidden = true;
   if (e.target.type === 'i-text') {
      document.getElementById('textControls').hidden = true;
   }
});

document.getElementById('file').addEventListener("change", function(e) {
   var file = e.target.files[0];
   var reader = new FileReader();
   reader.onload = function(f) {
      var data = f.target.result;
      fabric.Image.fromURL(data, function(img) {
         var oImg = img.set({
            left: 0,
            top: 0,
            angle: 00,
            stroke: '#F0F0F0', //<-- set this
            strokeWidth: 40 //<-- set this
         }).scale(0.2);
         canvas.add(oImg).renderAll();
         //var a = canvas.setActiveObject(oImg);
         var dataURL = canvas.toDataURL({
            format: 'png',
            quality: 1
         });
      });
   };
   reader.readAsDataURL(file);
});
// Delete selected object
window.deleteObject = function() {
      canvas.getActiveObject().remove();
   }
   // Refresh page
function refresh() {
   setTimeout(function() {
      location.reload()
   }, 100);
}
// Add text
function Addtext() {
   canvas.add(new fabric.IText('Tap and Type', {
      left: 50,
      top: 100,
      fontFamily: 'helvetica neue',
      fill: '#333',
      stroke: '#F0F0F0',
      strokeWidth: 1,
      fontSize: 45
   }));
}
document.getElementById('text-color').onchange = function() {
   canvas.getActiveObject().setFill(this.value);
   canvas.renderAll();
};
document.getElementById('text-color').onchange = function() {
   canvas.getActiveObject().setFill(this.value);
   canvas.renderAll();
};
document.getElementById('text-bg-color').onchange = function() {
   canvas.getActiveObject().setBackgroundColor(this.value);
   canvas.renderAll();
};
document.getElementById('text-lines-bg-color').onchange = function() {
   canvas.getActiveObject().setTextBackgroundColor(this.value);
   canvas.renderAll();
};
document.getElementById('text-stroke-color').onchange = function() {
   canvas.getActiveObject().setStroke(this.value);
   canvas.renderAll();
};
document.getElementById('text-stroke-width').onchange = function() {
   canvas.getActiveObject().setStrokeWidth(this.value);
   canvas.renderAll();
};
document.getElementById('font-family').onchange = function() {
   canvas.getActiveObject().setFontFamily(this.value);
   canvas.renderAll();
};
document.getElementById('text-font-size').onchange = function() {
   canvas.getActiveObject().setFontSize(this.value);
   canvas.renderAll();
};
document.getElementById('text-line-height').onchange = function() {
   canvas.getActiveObject().setLineHeight(this.value);
   canvas.renderAll();
};
document.getElementById('text-align').onchange = function() {
   canvas.getActiveObject().setTextAlign(this.value);
   canvas.renderAll();
};
radios5 = document.getElementsByName("fonttype"); // wijzig naar button
for (var i = 0, max = radios5.length; i < max; i++) {
   radios5[i].onclick = function() {
      if (document.getElementById(this.id).checked == true) {
         if (this.id == "text-cmd-bold") {
            canvas.getActiveObject().set("fontWeight", "bold");
         }
         if (this.id == "text-cmd-italic") {
            canvas.getActiveObject().set("fontStyle", "italic");
         }
         if (this.id == "text-cmd-underline") {
            canvas.getActiveObject().set("textDecoration", "underline");
         }
         if (this.id == "text-cmd-linethrough") {
            canvas.getActiveObject().set("textDecoration", "line-through");
         }
         if (this.id == "text-cmd-overline") {
            canvas.getActiveObject().set("textDecoration", "overline");
         }
      } else {
         if (this.id == "text-cmd-bold") {
            canvas.getActiveObject().set("fontWeight", "");
         }
         if (this.id == "text-cmd-italic") {
            canvas.getActiveObject().set("fontStyle", "");
         }
         if (this.id == "text-cmd-underline") {
            canvas.getActiveObject().set("textDecoration", "");
         }
         if (this.id == "text-cmd-linethrough") {
            canvas.getActiveObject().set("textDecoration", "");
         }
         if (this.id == "text-cmd-overline") {
            canvas.getActiveObject().set("textDecoration", "");
         }
      }
      canvas.renderAll();
   }
}
// Send selected object to front or back
var selectedObject;
canvas.on('object:selected', function(event) {
   selectedObject = event.target;
});
var sendSelectedObjectBack = function() {
   canvas.sendToBack(selectedObject);
}
var sendSelectedObjectToFront = function() {
   canvas.bringToFront(selectedObject);
}

body {
   padding: 10px 10px 10px 10px;
   font-family: "HelveticaNeue";
}

canvas {
   border: 1px solid grey;
   margin: 10px 0px 0px 0px;
}

.myFile {
   position: relative;
   overflow: hidden;
   float: left;
   clear: left;
}

.myFile input[type="file"] {
   display: block;
   position: absolute;
   top: 0;
   right: 0;
   opacity: 0;
   font-size: 30px;
   filter: alpha(opacity=0);
}

.footerheader {
   margin-top: 10px;
   font-weight: bold;
}

Testing

   <button>+ Photo</button>
   <input type="file" id="file" />

<button onclick="Addtext()">+ Text</button> / Selected Object:
<button id="trash" onClick="deleteObject()">Trash</button>
<button id="forward" onclick="sendSelectedObjectToFront()">Forward</button>
<button id="back" onclick="sendSelectedObjectBack()">Back</button> /
<button onclick="refresh()">Clear All</button>
<canvas id="c" width="800" height="600"></canvas>

Test Text Controls

         <input type="color" id="text-color" size="10">
         Font family:
         <select id="font-family">
            <option value="arial">Arial</option>
            <option value="helvetica" selected>Helvetica</option>
            <option value="myriad pro">Myriad Pro</option>
            <option value="delicious">Delicious</option>
            <option value="verdana">Verdana</option>
            <option value="georgia">Georgia</option>
            <option value="courier">Courier</option>
            <option value="comic sans ms">Comic Sans MS</option>
            <option value="impact">Impact</option>
            <option value="monaco">Monaco</option>
            <option value="optima">Optima</option>
            <option value="hoefler text">Hoefler Text</option>
            <option value="plaster">Plaster</option>
            <option value="engagement">Engagement</option>
         </select>

         Text align:
         <select id="text-align">
            <option value="left">Left</option>
            <option value="center">Center</option>
            <option value="right">Right</option>
            <option value="justify">Justify</option>
         </select>

            Background color:
            <input type="color" id="text-bg-color" size="10">

            Background text color:
            <input type="color" id="text-lines-bg-color" size="10">

            Stroke color:
            <input type="color" id="text-stroke-color">

            Stroke width:
            <input type="range" value="1" min="1" max="5" id="text-stroke-width">

            Font size:
            <input type="range" min="1" max="120" step="1" id="text-font-size">

            Line height:
            <input type="range" min="0" max="10" step="0.1" id="text-line-height">

         <input type='checkbox' name='fonttype' id="text-cmd-bold"> Bold
         <input type='checkbox' name='fonttype' id="text-cmd-italic"> Italic
         <input type='checkbox' name='fonttype' id="text-cmd-underline"> Underline
         <input type='checkbox' name='fonttype' id="text-cmd-linethrough"> Linethrough
         <input type='checkbox' name='fonttype' id="text-cmd-overline"> Overline

asdasd

1

1

1

Body:
You could use fabric.util.addListener method to detect double click event on fabricjs canvas and upon double click you'd have to check whether you clicked on a text object (iText) or not, henceforth display the text editing controls accordingly.

fabric.util.addListener(canvas.upperCanvasEl, 'dblclick', function(e) {
   if (canvas.findTarget(e)) {
      let objType = canvas.findTarget(e).type;
      if (objType === 'i-text') {
         document.getElementById('textControls').hidden = false; //show controls
      }
   }
});

ᴅᴇᴍᴏ ⧩

// Add image from local
var canvas = new fabric.Canvas('c');

// display/hide controls on double click
fabric.util.addListener(canvas.upperCanvasEl, 'dblclick', function(e) {
   if (canvas.findTarget(e)) {
      let objType = canvas.findTarget(e).type;
      if (objType === 'i-text') {
         document.getElementById('textControls').hidden = false;
      }
   }
});
canvas.on('before:selection:cleared', function(e) {
   document.getElementById('trash').hidden = true;
   document.getElementById('forward').hidden = true;
   document.getElementById('back').hidden = true;
   if (e.target.type === 'i-text') {
      document.getElementById('textControls').hidden = true;
   }
});

document.getElementById('file').addEventListener("change", function(e) {
   var file = e.target.files[0];
   var reader = new FileReader();
   reader.onload = function(f) {
      var data = f.target.result;
      fabric.Image.fromURL(data, function(img) {
         var oImg = img.set({
            left: 0,
            top: 0,
            angle: 00,
            stroke: '#F0F0F0', //<-- set this
            strokeWidth: 40 //<-- set this
         }).scale(0.2);
         canvas.add(oImg).renderAll();
         //var a = canvas.setActiveObject(oImg);
         var dataURL = canvas.toDataURL({
            format: 'png',
            quality: 1
         });
      });
   };
   reader.readAsDataURL(file);
});
// Delete selected object
window.deleteObject = function() {
      canvas.getActiveObject().remove();
   }
   // Refresh page
function refresh() {
   setTimeout(function() {
      location.reload()
   }, 100);
}
// Add text
function Addtext() {
   canvas.add(new fabric.IText('Tap and Type', {
      left: 50,
      top: 100,
      fontFamily: 'helvetica neue',
      fill: '#333',
      stroke: '#F0F0F0',
      strokeWidth: 1,
      fontSize: 45
   }));
}
document.getElementById('text-color').onchange = function() {
   canvas.getActiveObject().setFill(this.value);
   canvas.renderAll();
};
document.getElementById('text-color').onchange = function() {
   canvas.getActiveObject().setFill(this.value);
   canvas.renderAll();
};
document.getElementById('text-bg-color').onchange = function() {
   canvas.getActiveObject().setBackgroundColor(this.value);
   canvas.renderAll();
};
document.getElementById('text-lines-bg-color').onchange = function() {
   canvas.getActiveObject().setTextBackgroundColor(this.value);
   canvas.renderAll();
};
document.getElementById('text-stroke-color').onchange = function() {
   canvas.getActiveObject().setStroke(this.value);
   canvas.renderAll();
};
document.getElementById('text-stroke-width').onchange = function() {
   canvas.getActiveObject().setStrokeWidth(this.value);
   canvas.renderAll();
};
document.getElementById('font-family').onchange = function() {
   canvas.getActiveObject().setFontFamily(this.value);
   canvas.renderAll();
};
document.getElementById('text-font-size').onchange = function() {
   canvas.getActiveObject().setFontSize(this.value);
   canvas.renderAll();
};
document.getElementById('text-line-height').onchange = function() {
   canvas.getActiveObject().setLineHeight(this.value);
   canvas.renderAll();
};
document.getElementById('text-align').onchange = function() {
   canvas.getActiveObject().setTextAlign(this.value);
   canvas.renderAll();
};
radios5 = document.getElementsByName("fonttype"); // wijzig naar button
for (var i = 0, max = radios5.length; i < max; i++) {
   radios5[i].onclick = function() {
      if (document.getElementById(this.id).checked == true) {
         if (this.id == "text-cmd-bold") {
            canvas.getActiveObject().set("fontWeight", "bold");
         }
         if (this.id == "text-cmd-italic") {
            canvas.getActiveObject().set("fontStyle", "italic");
         }
         if (this.id == "text-cmd-underline") {
            canvas.getActiveObject().set("textDecoration", "underline");
         }
         if (this.id == "text-cmd-linethrough") {
            canvas.getActiveObject().set("textDecoration", "line-through");
         }
         if (this.id == "text-cmd-overline") {
            canvas.getActiveObject().set("textDecoration", "overline");
         }
      } else {
         if (this.id == "text-cmd-bold") {
            canvas.getActiveObject().set("fontWeight", "");
         }
         if (this.id == "text-cmd-italic") {
            canvas.getActiveObject().set("fontStyle", "");
         }
         if (this.id == "text-cmd-underline") {
            canvas.getActiveObject().set("textDecoration", "");
         }
         if (this.id == "text-cmd-linethrough") {
            canvas.getActiveObject().set("textDecoration", "");
         }
         if (this.id == "text-cmd-overline") {
            canvas.getActiveObject().set("textDecoration", "");
         }
      }
      canvas.renderAll();
   }
}
// Send selected object to front or back
var selectedObject;
canvas.on('object:selected', function(event) {
   selectedObject = event.target;
});
var sendSelectedObjectBack = function() {
   canvas.sendToBack(selectedObject);
}
var sendSelectedObjectToFront = function() {
   canvas.bringToFront(selectedObject);
}

body {
   padding: 10px 10px 10px 10px;
   font-family: "HelveticaNeue";
}

canvas {
   border: 1px solid grey;
   margin: 10px 0px 0px 0px;
}

.myFile {
   position: relative;
   overflow: hidden;
   float: left;
   clear: left;
}

.myFile input[type="file"] {
   display: block;
   position: absolute;
   top: 0;
   right: 0;
   opacity: 0;
   font-size: 30px;
   filter: alpha(opacity=0);
}

.footerheader {
   margin-top: 10px;
   font-weight: bold;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<a href="index.html">Testing</a>
<br>
<br>
<label class="myFile">
   <button>+ Photo</button>&nbsp;
   <input type="file" id="file" />
</label>
<button onclick="Addtext()">+ Text</button> / Selected Object:
<button id="trash" onClick="deleteObject()">Trash</button>
<button id="forward" onclick="sendSelectedObjectToFront()">Forward</button>
<button id="back" onclick="sendSelectedObjectBack()">Back</button> /
<button onclick="refresh()">Clear All</button>
<canvas id="c" width="800" height="600"></canvas>

<div id="textControls" hidden>
   <h2>Test Text Controls</h2>
   <div id="text-wrapper" style="margin-top: 10px" ng-show="getText()">
      <div id="text-controls">
         <input type="color" id="text-color" size="10">
         <label for="font-family" style="display:inline-block">Font family:</label>
         <select id="font-family">
            <option value="arial">Arial</option>
            <option value="helvetica" selected>Helvetica</option>
            <option value="myriad pro">Myriad Pro</option>
            <option value="delicious">Delicious</option>
            <option value="verdana">Verdana</option>
            <option value="georgia">Georgia</option>
            <option value="courier">Courier</option>
            <option value="comic sans ms">Comic Sans MS</option>
            <option value="impact">Impact</option>
            <option value="monaco">Monaco</option>
            <option value="optima">Optima</option>
            <option value="hoefler text">Hoefler Text</option>
            <option value="plaster">Plaster</option>
            <option value="engagement">Engagement</option>
         </select>
         <br>
         <label for="text-align" style="display:inline-block">Text align:</label>
         <select id="text-align">
            <option value="left">Left</option>
            <option value="center">Center</option>
            <option value="right">Right</option>
            <option value="justify">Justify</option>
         </select>
         <div>
            <label for="text-bg-color">Background color:</label>
            <input type="color" id="text-bg-color" size="10">
         </div>
         <div>
            <label for="text-lines-bg-color">Background text color:</label>
            <input type="color" id="text-lines-bg-color" size="10">
         </div>
         <div>
            <label for="text-stroke-color">Stroke color:</label>
            <input type="color" id="text-stroke-color">
         </div>
         <div>
            <label for="text-stroke-width">Stroke width:</label>
            <input type="range" value="1" min="1" max="5" id="text-stroke-width">
         </div>
         <div>
            <label for="text-font-size">Font size:</label>
            <input type="range" min="1" max="120" step="1" id="text-font-size">
         </div>
         <div>
            <label for="text-line-height">Line height:</label>
            <input type="range" min="0" max="10" step="0.1" id="text-line-height">
         </div>
      </div>
      <div id="text-controls-additional">
         <input type='checkbox' name='fonttype' id="text-cmd-bold"> Bold
         <input type='checkbox' name='fonttype' id="text-cmd-italic"> Italic
         <input type='checkbox' name='fonttype' id="text-cmd-underline"> Underline
         <input type='checkbox' name='fonttype' id="text-cmd-linethrough"> Linethrough
         <input type='checkbox' name='fonttype' id="text-cmd-overline"> Overline
      </div>
      <div class="footer">
         <div class="footerheader">asdasd</div>

         <ul>
            <li>1</li>
            <li>1</li>
            <li>1</li>
         </ul>

      </div>
   </div>
</div>


问:
Android "Cannot resolve symbol" for setOnCheckedChangeListener and buttonView
I'm trying to create a switch which when enabled hides a button called button but it returns an error for SetOnCheckedChangeListener and buttonView which says Cannot resolve symbol

```<code>package com.jordthedev.firstapplication;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.CompoundButton;
import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity {
    int count = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    }

    public void switchActivity(View v){
        startActivity(new Intent(MainActivity.this, SecondActivity.class));
    }

    ToggleButton toggle = (ToggleButton) findViewById(R.id.toggleButton);
    toggle.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            if (isChecked) {
                toggle.setVisibility(toggle.INVISIBLE);
            } else {
                toggle.setVisibility(toggle.VISIBLE);
            }
        }
    });

}
</code>```

答:
Replace your OnCheckedChangeListener Code with this

```<code>ToggleButton toggle =(ToggleButton) findViewById(R.id.toggleButton);
        toggle.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    toggle.setVisibility(toggle.INVISIBLE);
                } else {
                    toggle.setVisibility(toggle.VISIBLE);
                }
            }
        });
</code>```

Body:
I'm trying to create a switch which when enabled hides a button called button but it returns an error for SetOnCheckedChangeListener and buttonView which says Cannot resolve symbol

package com.jordthedev.firstapplication;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.CompoundButton;
import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity {
    int count = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    }

    public void switchActivity(View v){
        startActivity(new Intent(MainActivity.this, SecondActivity.class));
    }

    ToggleButton toggle = (ToggleButton) findViewById(R.id.toggleButton);
    toggle.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            if (isChecked) {
                toggle.setVisibility(toggle.INVISIBLE);
            } else {
                toggle.setVisibility(toggle.VISIBLE);
            }
        }
    });

}

Body:
Replace your OnCheckedChangeListener Code with this

ToggleButton toggle =(ToggleButton) findViewById(R.id.toggleButton);
        toggle.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    toggle.setVisibility(toggle.INVISIBLE);
                } else {
                    toggle.setVisibility(toggle.VISIBLE);
                }
            }
        });


问:
ClearCase Snapshot View Not Updating
I am using ClearCase for the first time, and am having a little trouble understanding snapshot views. I have a view with the config spec

```<code>element * CHECKEDOUT
element * /main/dev/LATEST
load "\project\dir1"
load "\project\dir2"
load "\project\dir3"
</code>```

I am using the same config spec with a dynamic view without the load rules. I have checked in a file called "configSpecTest.txt" into "\project\dir1\subdir", and this shows up in my dynamic view.

However, after calling

```<code>cleartool update
</code>```

and being told it successfully updated, the file is not there in my snapshot view. I feel like I have a fundamental misunderstanding as to how snapshot views work. Could anyone please explain to me where I'm going wrong?

答:
Try with a config spec like:

```<code>element * CHECKEDOUT
element * .../dev/LATEST
element * /main/LATEST -mkbranch dev
load "\project\dir1"
load "\project\dir2"
load "\project\dir3"
</code>```

You should always need the last selection rule element * /main/LATEST because to load/access an element, you need to load/access its parent element, and it is possible that /project does not have any version in the dev branch.

While your element is visible in your dynamic view, try and see if it is visible in another dynamic view with your original config spec mentioned in your question.

Try and create again your element with your dynamic view and the config spec mentioned above: that is how you create new branches for element.

See more at "ClearCase Branching using configspec"

Title: ClearCase Snapshot View Not Updating

Body:
I am using ClearCase for the first time, and am having a little trouble understanding snapshot views. I have a view with the config spec

element * CHECKEDOUT
element * /main/dev/LATEST
load "\project\dir1"
load "\project\dir2"
load "\project\dir3"

I am using the same config spec with a dynamic view without the load rules. I have checked in a file called "configSpecTest.txt" into "\project\dir1\subdir", and this shows up in my dynamic view.

However, after calling

cleartool update

and being told it successfully updated, the file is not there in my snapshot view. I feel like I have a fundamental misunderstanding as to how snapshot views work. Could anyone please explain to me where I'm going wrong?

Body:
Try with a config spec like:

element * CHECKEDOUT
element * .../dev/LATEST
element * /main/LATEST -mkbranch dev
load "\project\dir1"
load "\project\dir2"
load "\project\dir3"

You should always need the last selection rule element * /main/LATEST because to load/access an element, you need to load/access its parent element, and it is possible that /project does not have any version in the dev branch.

While your element is visible in your dynamic view, try and see if it is visible in another dynamic view with your original config spec mentioned in your question.

Try and create again your element with your dynamic view and the config spec mentioned above: that is how you create new branches for element.

See more at "ClearCase Branching using configspec"


问:
Execute jQuery code after all CSS rules have been applied
$(document).ready() executes the code when all HTML elements have been loaded.

How to execute jQuery code after all of the CSS rules have been applied?

I have few stylesheets linked to the page and it takes some time to load the page. Element layout changes during the time of the loading.

For usability purposes I need to correct the element layout after all of them have target sizes. Otherwise I get wrong sizes of those elements.

Now I do it on focus or after some timeout, but need this after the page loads.

答:
```<code>$(window).load(function() {

 // executes when complete page is fully loaded, including all frames, objects and images

 alert("window is loaded");

});
</code>```


问:
I need to add a DataGridView to the form dynamically
```<code>private void btnShowCausali_Click(object sender, EventArgs e)
{
    DataGridView Dati = new DataGridView();
    Dati.ColumnHeadersHeightSizeMode = System.Windows.Forms.DataGridViewColumnHeadersHeightSizeMode.AutoSize;
    Dati.Location = new System.Drawing.Point(120, 40);
    Dati.Name = "Dati";
    Dati.RowTemplate.Height = 24;
    Dati.Size = new System.Drawing.Size(979, 458);
    Dati.TabIndex = 1;
    Dati.Visible = true;
    Dati.Columns.Add("id", "ID");
    Dati.Columns.Add("causaliname", "Nome Causale");
    Dati.Columns.Add("Identificationcode", "Codice Identificativo");
    Dati.Columns.Add("expired", "Data di Scadenza");
    grpDatore.Controls.Add(Dati);
}
</code>```

When I run this code the DataGridView does not appear on the form. Just in case it could create problem, the button btnShowCausali get created on the form load.

```<code>public void Form1_Load(object sender, EventArgs e)
{
    Button btnShowCausali = new Button();
    btnShowCausali.Text = "Causali";
    btnShowCausali.Location = new Point(20, 20);
    btnShowCausali.Size = new Size(120, 40);
}
</code>```

By the way, I don't know why the button actually gets created but the DataGridView does not.

答:
Your event handler btnShowCausali_Click is not attached to the button in Form1_Load. Are you sure it is called?
I also do not see adding this button to any container (Form, Panel, ...)
Your DataGridView will be added to grpDatore control (not form) so have that in mind when you set Location.

Attach event:

```<code>btnShowCausali.Click += btnShowCausali_Click;
</code>```

Body:
private void btnShowCausali_Click(object sender, EventArgs e)
{
    DataGridView Dati = new DataGridView();
    Dati.ColumnHeadersHeightSizeMode = System.Windows.Forms.DataGridViewColumnHeadersHeightSizeMode.AutoSize;
    Dati.Location = new System.Drawing.Point(120, 40);
    Dati.Name = "Dati";
    Dati.RowTemplate.Height = 24;
    Dati.Size = new System.Drawing.Size(979, 458);
    Dati.TabIndex = 1;
    Dati.Visible = true;
    Dati.Columns.Add("id", "ID");
    Dati.Columns.Add("causaliname", "Nome Causale");
    Dati.Columns.Add("Identificationcode", "Codice Identificativo");
    Dati.Columns.Add("expired", "Data di Scadenza");
    grpDatore.Controls.Add(Dati);
}

When I run this code the DataGridView does not appear on the form. Just in case it could create problem, the button btnShowCausali get created on the form load.

public void Form1_Load(object sender, EventArgs e)
{
    Button btnShowCausali = new Button();
    btnShowCausali.Text = "Causali";
    btnShowCausali.Location = new Point(20, 20);
    btnShowCausali.Size = new Size(120, 40);
}

By the way, I don't know why the button actually gets created but the DataGridView does not.

Body:
Your event handler btnShowCausali_Click is not attached to the button in Form1_Load. Are you sure it is called?
I also do not see adding this button to any container (Form, Panel, ...)
Your DataGridView will be added to grpDatore control (not form) so have that in mind when you set Location.

Attach event:

btnShowCausali.Click += btnShowCausali_Click;


问:
Deploy from Maven to JFrog Artifactory WITH properties
I have a Jenkins job, that has REPOSITORY and BRANCH input variables and uses
Invoke top-level Maven targets plugin. It makes maven clean deploy to jfrog artifactory.

But there is a problem: I don't know, how to send properties to the artifacts, that were deployed. I mean properties like these, that we have in JFROG ARTIFACTORY:

I know, that there is Maven3-Artifactory Integration plugin that makes a deploy with properties, but it doesn't work in my case, because my job should be general for different artifactory servers.

I also found a parameter Properties in Invoke top-level Maven targets

but it does nothing (the list of properties of deployed artifacts is still empty)

How can I send properties to JFROG ARTIFACTORY by maven Invoke top-level Maven targets plugin? Thanks in advance.

答:
You can assign JFrog Artifactory Properties on deployment using Matrix Properties.

You just need to append ';property1=value1;property2=value2' on your distribution URL, like this:

```<code><distributionManagement>
    <repository>
        <id>myrepo</id>
        <url>http://localhost:8080/artifactory/libs-release-local;property1=value1;property2=value2</url>
    </repository>
</distributionManagement>
</code>```

Body:
You can assign JFrog Artifactory Properties on deployment using Matrix Properties.

You just need to append ';property1=value1;property2=value2' on your distribution URL, like this:

<distributionManagement>
    <repository>
        <id>myrepo</id>
        <url>http://localhost:8080/artifactory/libs-release-local;property1=value1;property2=value2</url>
    </repository>
</distributionManagement>


问:
How to return a cell value if the date in a range of cells is today in google sheets
I currently have a Google Sheet, with numerous sheets in it, to track contract deadlines for different clients. One of these sheets shows me all of the deadlines in Columns E:M for every contract. Each row is a separate contract.

I'm trying to create a separate sheet that will show me the client's name, found in column A, if a date in columns E:M is Today. That way I can look at one page and see all the clients that have a deadline today. Here is what I tried with no success:

```<code>=if('U/C(Dont Edit)'E2:M2=TODAY(),'U/C(Dont Edit)'A2,"")
</code>```

"U/C(Dont Edit)" is the sheet that shows all of the contracts.

I believe the problem lies when I try to apply "=Today()" to a range(E:M). It seems to work fine if I just use E2=Today(). It looks like I could accomplish my goal using If statements within If statements, but that gets very messy very quickly and I'm hoping there is a better way.

Thanks in advance for your help.

答:
I suggest @dePatinkin's solution (for and additional column, say N, containing the COUNTIF formula from Row2 downwards) in combination with a query (in another sheet):

```<code>=query('U/C(Dont Edit)'!A:N,"select * where N is not NULL")
</code>```

This assumes your existing sheet has the columns labelled.

You might combine the above with Conditional formatting to indicate which column has the date in it (today) that triggered the row selection.

Body:
I currently have a Google Sheet, with numerous sheets in it, to track contract deadlines for different clients. One of these sheets shows me all of the deadlines in Columns E:M for every contract. Each row is a separate contract.

I'm trying to create a separate sheet that will show me the client's name, found in column A, if a date in columns E:M is Today. That way I can look at one page and see all the clients that have a deadline today. Here is what I tried with no success:

=if('U/C(Dont Edit)'E2:M2=TODAY(),'U/C(Dont Edit)'A2,"")

"U/C(Dont Edit)" is the sheet that shows all of the contracts.

I believe the problem lies when I try to apply "=Today()" to a range(E:M). It seems to work fine if I just use E2=Today(). It looks like I could accomplish my goal using If statements within If statements, but that gets very messy very quickly and I'm hoping there is a better way.

Thanks in advance for your help.

Body:
I suggest @dePatinkin's solution (for and additional column, say N, containing the COUNTIF formula from Row2 downwards) in combination with a query (in another sheet):

=query('U/C(Dont Edit)'!A:N,"select * where N is not NULL")

This assumes your existing sheet has the columns labelled.

You might combine the above with Conditional formatting to indicate which column has the date in it (today) that triggered the row selection.


问:
vertex_ids table missing in cassandra under the janusgraph keyspace?
Titan graph when used with cassandra creates a table "vertex_ids" under the "titan" keyspace. But when working with janus , I can't seem to find the "vertex_ids" table under the 'janusgrpah' keyspace. Also I read the documentation where they describe how the values are stored but it doesn't tell under which tables.</p>

答:
JanusGraph started from TitanDB 1.0.0. Both are using these below cassandra tables :

edgestore : Store Vertex, Property and Edges as Adjacency List

graphindex : Builtin indexes for vertex and edge properties

titan_ids (TitanDB) janusgraph_ids (JanusGraph) : Store ID Block

txlog : Store Transaction Log

systemlog : Store System Log

system_properties : Store System Properties

edgestore_lock_ : Used to lock edgestore table

graphindex_lock_ : Used to lock graphindex table

system_properties_lock_ : Used to lock system_properties table


问:
ng-repeat with ng-click not working properly
i got some new issues in my spa with angularjs.

THIS ist my HTML:

                    {{friend.friend_username}} - {{friend.gamename}}
                ```
</div>
</div>
</p>

<p>This is my controller:</p>

```"use strict";

    app.controller("chatCtrl", ["userService", "socket" , "chatService", "$scope", function (userService, socket , chatService, $scope) {
        var self = this;

        self.friendlist = chatService.friendlist;

        chatService.init(userService.username);

        $scope.loadChat = function (username) {
            console.log(username); //console logs {{friend.friend_username}}
            chatService.chatWith(username);
        }

    }]);
```

Everything is working properly except the username within the loadChat function.
The username console logs {{friend.friend_username}} and not the value of friend.friend_username as i want to do. Within the DOM everything looks fine. ng-click="loadChat('USERNAME')" is shown properly but in chat controller the username is set as {{friend.friend_username}}. I´ve no clue why this happens. I hope someone can help me to figure this out.

答:
Don't need interpolation </p>

```<code>ng-click="loadChat(friend.friend_username)"
</code>```

Body:
i got some new issues in my spa with angularjs.

THIS ist my HTML:

                    {{friend.friend_username}} - {{friend.gamename}}

This is my controller:

"use strict";

    app.controller("chatCtrl", ["userService", "socket" , "chatService", "$scope", function (userService, socket , chatService, $scope) {
        var self = this;

        self.friendlist = chatService.friendlist;

        chatService.init(userService.username);

        $scope.loadChat = function (username) {
            console.log(username); //console logs {{friend.friend_username}}
            chatService.chatWith(username);
        }

    }]);

Everything is working properly except the username within the loadChat function.
The username console logs {{friend.friend_username}} and not the value of friend.friend_username as i want to do. Within the DOM everything looks fine. ng-click="loadChat('USERNAME')" is shown properly but in chat controller the username is set as {{friend.friend_username}}. I´ve no clue why this happens. I hope someone can help me to figure this out.

Body:
Don't need interpolation

ng-click="loadChat(friend.friend_username)"


问:
Better workaround to search nested object in realm xamarin
I am trying to search nested object in realm but I get the following error

```<code>var contactList = realm.All<Contact>().Where( c => c.syncInfo.isSync == SyncStatus.NOT_SYNCED);
</code>```

System.NotSupportedException: The left-hand side of the Equal operator
  must be a direct access to a persisted property in Realm.

Unable to process 'c.syncInfo.isSync'.

I am aware that this feature does not exist in Realm Xamarin but I am looking for better workaround.

```<code>public class Contact : RealmObject
{
    [PrimaryKey]
    public Id {get;set;}

    public ContactName {get; set;}

    public SyncInfo syncInfo;
}

public class SyncInfo: RealmObject
{
    public int isSync { get; set; }
    public long timestamp {get;set;}
}
</code>```

so far I have tried using ToList() and foreach to find the record but I have 1000 contacts so using ToList() and foreach slows down the performance.

I tried to refer this thread but no luck

答:
Can you do something like this maybe. Store the contact in the sync info.

```<code>public class SyncInfo: RealmObject
{
    public Contact contact { get; set; }
    public int isSync { get; set; }
    public long timestamp { get;set; }
}
</code>```

Then query like this:

var unsyncedContacts = realm.All<SyncInfo>().Where(s.isSync == SyncStatus.NOT_SYNCED).Select(s => s.contact);

Body:
I am trying to search nested object in realm but I get the following error

var contactList = realm.All<Contact>().Where( c => c.syncInfo.isSync == SyncStatus.NOT_SYNCED);

System.NotSupportedException: The left-hand side of the Equal operator
  must be a direct access to a persisted property in Realm.

Unable to process 'c.syncInfo.isSync'.

I am aware that this feature does not exist in Realm Xamarin but I am looking for better workaround.

public class Contact : RealmObject
{
    [PrimaryKey]
    public Id {get;set;}

    public ContactName {get; set;}

    public SyncInfo syncInfo;
}

public class SyncInfo: RealmObject
{
    public int isSync { get; set; }
    public long timestamp {get;set;}
}

so far I have tried using ToList() and foreach to find the record but I have 1000 contacts so using ToList() and foreach slows down the performance.

I tried to refer this thread but no luck

Body:
Can you do something like this maybe. Store the contact in the sync info.

public class SyncInfo: RealmObject
{
    public Contact contact { get; set; }
    public int isSync { get; set; }
    public long timestamp { get;set; }
}

Then query like this:

var unsyncedContacts = realm.All<SyncInfo>().Where(s.isSync == SyncStatus.NOT_SYNCED).Select(s => s.contact);


问:
Join two tables with same rows in SQL
Suppose I have two table like this:

```<code>table 1:               table 2:
id      city           id      heading
1201     X             1201     A
1202     Y             1201     B
1203     Z             1202     C
1204     U             1202     D
                       1204     F
</code>```

I want Output like this:

```<code>id  city id  heading
1201 X   1201  A
*null*   1201  B
1202 Y   1202  C
*null*   1202  D
1203 Z   *null*
1204 U   1204 F
</code>```

Kindly Help me with this.

Python is also acceptable if possible.

答:
A FULL OUTER JOIN is the way to go, but you also need a sequence number:

```<code>select t1.*, t2.*
from (select t1.*,
             row_number() over (partition by id order by id) as seqnum
      from table1 t1
     ) t1 full outer join
     (select t2.*,
             row_number() over (partition by id order by id) as seqnum
      from table2 t2
     ) t2
     on t1.id = t2.id and t1.seqnum = t2.seqnum;
</code>```

Title: Join two tables with same rows in SQL

Body:
Suppose I have two table like this:

table 1:               table 2:
id      city           id      heading
1201     X             1201     A
1202     Y             1201     B
1203     Z             1202     C
1204     U             1202     D
                       1204     F

I want Output like this:

id  city id  heading
1201 X   1201  A
*null*   1201  B
1202 Y   1202  C
*null*   1202  D
1203 Z   *null*
1204 U   1204 F

Kindly Help me with this.

Python is also acceptable if possible.

Body:
A FULL OUTER JOIN is the way to go, but you also need a sequence number:

select t1.*, t2.*
from (select t1.*,
             row_number() over (partition by id order by id) as seqnum
      from table1 t1
     ) t1 full outer join
     (select t2.*,
             row_number() over (partition by id order by id) as seqnum
      from table2 t2
     ) t2
     on t1.id = t2.id and t1.seqnum = t2.seqnum;


问:
Fastest and most efficient way of converting **haml** and **scss** files? (Ruby on Windows)
I'm a ruby/haml/sass-beginner. I just installed ruby and rails for windows, haml, and sass (stand alone and plugin for rails).

I know how to convert and haml file into a html file (and vice versa):

```<code>haml index.haml > output.html
</code>```

and how to convert a scss fiel into a css file (and vice versa):

```<code>sass --watch style.scss:style.css
</code>```

I save more time converting scss files because every time I save a scss file the corresponding css file is automatically updated (i think that's the suppose of the watch command)

but for the haml files, I'm still doing it manually (haml index.haml > output.html).

I believe there's other ways to save time converting haml and scss files.

Any suggestions?

答: Oh, there's also dynamicmatic now too which might be good as well to look into.  Basically similar to staticmatic but with some obvious differences that might be useful. I've used SM quite a lot recently and really like it. Very easy to use, very simple to set up and really does most things I need it to.</p>

Body:
I'm a ruby/haml/sass-beginner. I just installed ruby and rails for windows, haml, and sass (stand alone and plugin for rails).

I know how to convert and haml file into a html file (and vice versa):

haml index.haml > output.html

and how to convert a scss fiel into a css file (and vice versa):

sass --watch style.scss:style.css

I save more time converting scss files because every time I save a scss file the corresponding css file is automatically updated (i think that's the suppose of the watch command)

but for the haml files, I'm still doing it manually (haml index.haml > output.html).

I believe there's other ways to save time converting haml and scss files.

Any suggestions?


问:
How to fetch form parameters while using multipart/form-data in Spring?
I am trying to fetch a file using html form. When I use enctype=multipart/form-data, I am unable to fetch form parameters and file upload.

Do I need to do any special configuration while using enctype=multipart/form-data in Spring?

JSP code:

```<code><form  method="POST" enctype="multipart/form-data" action="/bucket">
      <input type="file" name="file" id="file"/>
      <input type = "submit"  value="Upload" />
</form>
</code>```

Controller Code:

```<code>@RequestMapping(method = RequestMethod.POST, value = "/bucket")

    public ModelAndView exec(HttpServletRequest request) throws IOException {

           String fileString = request.getParameter("file");//this is NULL.

    }
</code>```

When I remove multipart/form-data from form, I am able to fetch the file but it gets corrupted.

Any lead on what is happening would be appreciated.

答:
try using a @RequestParam to extract the file from your request

```<code>@RequestMapping(method = RequestMethod.POST, value = "/bucket")
public ModelAndView exec(@RequestParam(value = "file") MultipartFile file) throws IOException {

       InputStream fileStream = file.getInputStream(); //Return an InputStream to read the contents of the file from.

}
</code>```

Body:
I am trying to fetch a file using html form. When I use enctype=multipart/form-data, I am unable to fetch form parameters and file upload.

Do I need to do any special configuration while using enctype=multipart/form-data in Spring?

JSP code:

<form  method="POST" enctype="multipart/form-data" action="/bucket">
      <input type="file" name="file" id="file"/>
      <input type = "submit"  value="Upload" />
</form>

Controller Code:

@RequestMapping(method = RequestMethod.POST, value = "/bucket")

    public ModelAndView exec(HttpServletRequest request) throws IOException {

           String fileString = request.getParameter("file");//this is NULL.

    }

When I remove multipart/form-data from form, I am able to fetch the file but it gets corrupted.

Any lead on what is happening would be appreciated.

Body:
try using a @RequestParam to extract the file from your request

@RequestMapping(method = RequestMethod.POST, value = "/bucket")
public ModelAndView exec(@RequestParam(value = "file") MultipartFile file) throws IOException {

       InputStream fileStream = file.getInputStream(); //Return an InputStream to read the contents of the file from.

}


问:
How to get all links on a page that start with a https in link - PHP
I'm trying to get all the links on a page. So for example if a user types in https://laravel.com/ in the input field they will see all the links on that page.

I already got the concept working. Here is part of the code I have:

```<code>$website = request('website_url');

$pureURL = 'http://www.'.$website.'/';
$doc = new \DOMDocument;
@$doc->loadHTMLFile($pureURL);

foreach ($doc->getElementsByTagName('a') as $link){
    $linkDetail[] = array('url' => $link->getAttribute('href'));
}

$pageLinks = $linkDetail;

return view('api.index', compact('result'));
</code>```

My frontend code:

```<code>@foreach($pageLinks as $key => $link)
        {{ $link['url'] }}<br />
@endforeach
</code>```

This is what I get:

The problem is, I just want to get all the links that start with https. I want to avoid the links that have a /doc in them and so on.
How would I go about doing that. Im not really good with regex, but I know there is a way you can use that.

答:
How about using parse_url() to check protocol?

```<code>foreach ($doc->getElementsByTagName('a') as $link){
    if (parse_url($link->getAttribute('href'), PHP_URL_SCHEME) === 'https') {
        $linkDetail[] = array('url' => $link->getAttribute('href'));
    }
}
</code>```

Body:
I'm trying to get all the links on a page. So for example if a user types in https://laravel.com/ in the input field they will see all the links on that page.

I already got the concept working. Here is part of the code I have:

$website = request('website_url');

$pureURL = 'http://www.'.$website.'/';
$doc = new \DOMDocument;
@$doc->loadHTMLFile($pureURL);

foreach ($doc->getElementsByTagName('a') as $link){
    $linkDetail[] = array('url' => $link->getAttribute('href'));
}

$pageLinks = $linkDetail;

return view('api.index', compact('result'));

My frontend code:

@foreach($pageLinks as $key => $link)
        {{ $link['url'] }}

@endforeach

This is what I get:

The problem is, I just want to get all the links that start with https. I want to avoid the links that have a /doc in them and so on.
How would I go about doing that. Im not really good with regex, but I know there is a way you can use that.

Body:
How about using parse_url() to check protocol?

foreach ($doc->getElementsByTagName('a') as $link){
    if (parse_url($link->getAttribute('href'), PHP_URL_SCHEME) === 'https') {
        $linkDetail[] = array('url' => $link->getAttribute('href'));
    }
}


问:
Bootstrap 4 checkbox changes size with background-color change
When I change the background of my checkbox, the size of the check icon resizes too for some reason. How can I stop that from happening?

Take a look at my code and see what I mean:

.custom-checkbox .custom-control-indicator {
  border-radius: 50%;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border: 1px solid #2c2b2c;
}
.custom-control-description {
  color: #2c2b2c;
  text-transform: uppercase;
  line-height: 2.7;
  font-size: 12px;
}
/* When I remove background the icon goes back to that default size */
.custom-control-input:checked~.custom-control-indicator {
  background: red;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="form-check">
  <label class="custom-control custom-checkbox">
     <input type="checkbox" class="custom-control-input">
     <span class="custom-control-indicator"></span>
     <span class="custom-control-description ml-4">Checkbox</span>
   </label>
</div> <!-- /.form-check --></code>```

答:
Instead of:

```<code>.custom-control-input:checked~.custom-control-indicator {background: red;}
</code>```

Do:

```<code>.custom-control-input:checked~.custom-control-indicator {background-color: red;}
</code>```

Body:
When I change the background of my checkbox, the size of the check icon resizes too for some reason. How can I stop that from happening?

Take a look at my code and see what I mean:

.custom-checkbox .custom-control-indicator {
  border-radius: 50%;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border: 1px solid #2c2b2c;
}
.custom-control-description {
  color: #2c2b2c;
  text-transform: uppercase;
  line-height: 2.7;
  font-size: 12px;
}
/* When I remove background the icon goes back to that default size */
.custom-control-input:checked~.custom-control-indicator {
  background: red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

     <input type="checkbox" class="custom-control-input">

     Checkbox

Body:
Instead of:

.custom-control-input:checked~.custom-control-indicator {background: red;}

Do:

.custom-control-input:checked~.custom-control-indicator {background-color: red;}


问:
Detection of ethernet cable in Linksys router in Android application
Is there any way we can detect Ethernet cable has been plugged in or out in Android app programmatically.

I tried the following code
https://ufile.io/4d78x

Is it correct or need to change.

Please recommend if possible

Thanks

答:
You can check this by using the ConnectivityManager:

```<code>ConnectivityManager mConnManager = (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE);

boolean isEthernetConnected = (mConnManager.getActiveNetworkInfo().getType() == ConnectivityManager.TYPE_ETHERNET);
</code>```

You will need to add this permission:

```<code> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
</code>```

Docs: https://developer.android.com/reference/android/net/ConnectivityManager.html

Detailed explanation: https://developer.android.com/training/basics/network-ops/managing.html#check-connection

Body:
You can check this by using the ConnectivityManager:

ConnectivityManager mConnManager = (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE);

boolean isEthernetConnected = (mConnManager.getActiveNetworkInfo().getType() == ConnectivityManager.TYPE_ETHERNET);

You will need to add this permission:

 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Docs: https://developer.android.com/reference/android/net/ConnectivityManager.html

Detailed explanation: https://developer.android.com/training/basics/network-ops/managing.html#check-connection


问:
How to run node in webhosting?
I'am creating 2d mmorpg game and I upload client and socket.io server on webhosting, but don't know how to start server.js, if i'am right then I have to run node with package.json but I don't know how to run it in webhosting...

My package.json:

```<code>{
  "name": "Example server",
  "version": "0.0.0",
  "main": "server.js",
  "author": "Aurelijus",
  "private": true,
  "license": "BSD",
  "dependencies": {
    "express": "4.13.4"
  },
  "scripts": {
    "start": "node server.js"
  }
}
</code>```

server example:

```<code>var http = require("http").createServer(), io = require("socket.io").listen(http);

http.listen(8080);

//================================  Connection stuff ================================//
io.sockets.on("connection", function(socket)
{
    socket.on('player connected', function(data)
    {
    };
});
console.log('Server listening on port %s', http.address().port);
</code>```

Thanks, I hope it's not out of topic :\

答:
To start a node on a webserver it is the same as locally.</p>

```<code>npm install
npm start
</code>```

Title: How to run node in webhosting?

Body:
I'am creating 2d mmorpg game and I upload client and socket.io server on webhosting, but don't know how to start server.js, if i'am right then I have to run node with package.json but I don't know how to run it in webhosting...

My package.json:

{
  "name": "Example server",
  "version": "0.0.0",
  "main": "server.js",
  "author": "Aurelijus",
  "private": true,
  "license": "BSD",
  "dependencies": {
    "express": "4.13.4"
  },
  "scripts": {
    "start": "node server.js"
  }
}

server example:

var http = require("http").createServer(), io = require("socket.io").listen(http);

http.listen(8080);

//================================  Connection stuff ================================//
io.sockets.on("connection", function(socket)
{
    socket.on('player connected', function(data)
    {
    };
});
console.log('Server listening on port %s', http.address().port);

Thanks, I hope it's not out of topic :\

Body:
To start a node on a webserver it is the same as locally.

npm install
npm start


问:
STM32F4 I2C without library
I have to wire a code for STM32F4 discovery and pcf8574 with I2C.

I can't use any library function. I try something I didn't do it. I did write after init code.

My init code

```<code>RCC->APB1ENR|=RCC_APB1ENR_I2C1EN ; // enable APB1 peripheral clock for I2C1
RCC->AHB1ENR|=RCC_AHB1ENR_GPIOBEN; // enable clock for SCL and SDA pins

//SCL on PB6 and SDA on PB7
GPIOB->MODER|=GPIO_MODER_MODER6; // set pin to alternate function
GPIOB->MODER|=GPIO_MODER_MODER7; // set pin to alternate function

GPIOB->OSPEEDR |=GPIO_OSPEEDER_OSPEEDR6; //set GPIO speed
GPIOB->OSPEEDR |=GPIO_OSPEEDER_OSPEEDR7; //set GPIO speed

GPIOB-> OTYPER |= GPIO_OTYPER_OT_6; // set output to open drain --> the line has to be only pulled low, not driven high
GPIOB-> OTYPER |= GPIO_OTYPER_OT_7; // set output to open drain --> the line has to be only pulled low, not driven high

GPIOB-> PUPDR  |=GPIO_PUPDR_PUPDR6_0; // enable pull up resistors
GPIOB-> PUPDR  |=GPIO_PUPDR_PUPDR7_0; // enable pull up resistors

GPIOB-> AFR[1] = 0x44000000; // Connect I2C1 pins to AF (af4)

// configure I2C1

I2C1-> CR2 = 8;  // set peripheral clock to 8mhz
I2C1-> CR2 = 40; // 100khz i2c clock
I2C1-> CR2 |= ~(I2C_CR1_SMBUS); // I2C mode
I2C1-> OAR2 = 0x00; // address not important
I2C1-> CR2 |= 1;    // i2c enable;
</code>```

答:
```<code>I2C1-> CR2 |= ~(I2C_CR1_SMBUS); // I2C mode
</code>```

This line does something different that you think. If the idea was to clear that bit it shuold be

```<code>I2C1-> CR2 &= ~(I2C_CR1_SMBUS); // I2C mode
</code>```

Otherwise you set all the bits in the CR2 register except I2C_CR1_SMBUS which is left unchanged.

Another problem is that you try to set CR2 using CR1 bit definitions.

Same is with the enable bit - wrong register.

I2C should be reset before first use on many STM32 micros.

Title: STM32F4 I2C without library

Body:
I have to wire a code for STM32F4 discovery and pcf8574 with I2C.

I can't use any library function. I try something I didn't do it. I did write after init code.

My init code

RCC->APB1ENR|=RCC_APB1ENR_I2C1EN ; // enable APB1 peripheral clock for I2C1
RCC->AHB1ENR|=RCC_AHB1ENR_GPIOBEN; // enable clock for SCL and SDA pins

//SCL on PB6 and SDA on PB7
GPIOB->MODER|=GPIO_MODER_MODER6; // set pin to alternate function
GPIOB->MODER|=GPIO_MODER_MODER7; // set pin to alternate function

GPIOB->OSPEEDR |=GPIO_OSPEEDER_OSPEEDR6; //set GPIO speed
GPIOB->OSPEEDR |=GPIO_OSPEEDER_OSPEEDR7; //set GPIO speed

GPIOB-> OTYPER |= GPIO_OTYPER_OT_6; // set output to open drain --> the line has to be only pulled low, not driven high
GPIOB-> OTYPER |= GPIO_OTYPER_OT_7; // set output to open drain --> the line has to be only pulled low, not driven high

GPIOB-> PUPDR  |=GPIO_PUPDR_PUPDR6_0; // enable pull up resistors
GPIOB-> PUPDR  |=GPIO_PUPDR_PUPDR7_0; // enable pull up resistors

GPIOB-> AFR[1] = 0x44000000; // Connect I2C1 pins to AF (af4)

// configure I2C1

I2C1-> CR2 = 8;  // set peripheral clock to 8mhz
I2C1-> CR2 = 40; // 100khz i2c clock
I2C1-> CR2 |= ~(I2C_CR1_SMBUS); // I2C mode
I2C1-> OAR2 = 0x00; // address not important
I2C1-> CR2 |= 1;    // i2c enable;

Body:
I2C1-> CR2 |= ~(I2C_CR1_SMBUS); // I2C mode

This line does something different that you think. If the idea was to clear that bit it shuold be

I2C1-> CR2 &= ~(I2C_CR1_SMBUS); // I2C mode

Otherwise you set all the bits in the CR2 register except I2C_CR1_SMBUS which is left unchanged.

Another problem is that you try to set CR2 using CR1 bit definitions.

Same is with the enable bit - wrong register.

I2C should be reset before first use on many STM32 micros.