Überlaufende Texte finden

Eine bessere ~~Übersetzung~~ Umschreibung für text-overflow ist mir nicht eingefallen 🙃

In jQuery ginge das so:

$.expr[':'].truncated = function (e) {
  // ggf. Style checken, bspw.
  // $(e).css('text-overflow') === 'ellipsis'
  return e.offsetWidth < e.scrollWidth;
};

// dann:
let items = $('.your-selector:truncated');

$.expr[':'].truncated = function (e) {

// ggf. Style checken, bspw.

// $(e).css('text-overflow') === 'ellipsis'

return e.offsetWidth < e.scrollWidth;

};

// dann:

let items = $('.your-selector:truncated');

Cross-post; basiert auf den Antworten hier. Bonus: In Selenium geht das so:

WebElement element = ...;

// element is truncated?
double offsetWidth = Double.parseDouble(element.getAttribute("offsetWidth"));
double scrollWidth = Double.parseDouble(element.getAttribute("scrollWidth"));
assertThat(offsetWidth < scrollWidth).isTrue();

// truncation style is ellipsis?
String overflowStyle = element.getCssValue("text-overflow");
assertThat(overflowStyle).isEqualTo("ellipsis");

WebElement element = ...;

// element is truncated?

double offsetWidth = Double.parseDouble(element.getAttribute("offsetWidth"));

double scrollWidth = Double.parseDouble(element.getAttribute("scrollWidth"));

assertThat(offsetWidth < scrollWidth).isTrue();

// truncation style is ellipsis?

String overflowStyle = element.getCssValue("text-overflow");

assertThat(overflowStyle).isEqualTo("ellipsis");

bäm.

Javascript: “Pull to refresh”

Pull-to-refresh in (mobilen!) Webseiten nachzubauen, ist jetzt keine Raketenwissenschaft, aber doch so viel Aufwand, dass sich ggf. eine Library lohnt. Viele (? einige? apeatling, ember-gestures, …) bauen aber auf hammer auf, und das hat einen Bug (Beispiel, es gibt weitere Tickets) im Zusammenspiel von Panning (also dem “Pull” in “Pull-to-refresh”) und Scrolling. Zusammengefasst: Es geht nur eines von beiden. Mit ein wenig Drumherumgehacke bekommt man das etwas näher zusammengeführt, aber entweder kommt PanEnd dann gar nicht (was das “refresh” schwierig macht), oder bspw. die PanMove-Events kommen nicht zuverlässig (wodurch man den “pull” nicht 1:1 an den Finger des Nutzers hängen kann).

Ein npm-Modul, das nicht auf hammer aufbaut, wäre pulltorefreshjs (getestet mit 0.1.11 und 0.1.13):

PullToRefresh.init({
  mainElement: '.myCssSelector',
  onRefresh: () => {
    console.log('hello moto')
  },
});

PullToRefresh.init({

mainElement: '.myCssSelector',

onRefresh: () => {

console.log('hello moto')

});

In Ember sieht das als Komponente so aus:

import Component from '@ember/component';
import PullToRefresh from 'npm:pulltorefreshjs';
import {get, set} from '@ember/object';
import {getOwner} from '@ember/application';
import {inject as service} from '@ember/service';

export default Component.extend({
  classNames: ['pull-to-refresh'],

  router: service(),
  currentRouteInstance: undefined,

  didInsertElement() {
    this._super(...arguments);

    const owner = getOwner(this);
    const currentPath = owner.lookup('controller:application').currentPath;
    set(this, 'currentRouteInstance', owner.lookup(`route:${currentPath}`));

    // TODO use unique identifier for mainElement, store result of init()
    PullToRefresh.init({
      mainElement: '.pull-to-refresh',
      onRefresh: () => {
        get(this, 'currentRouteInstance').refresh();
      },
    });
  },

  willDestroyElement() {
    this._super(...arguments);

    // TODO destroy current ptr only; id is returned by init()
    PullToRefresh.destroyAll();
  },
});

import Component from '@ember/component';

import PullToRefresh from 'npm:pulltorefreshjs';

import {get, set} from '@ember/object';

import {getOwner} from '@ember/application';

import {inject as service} from '@ember/service';

export default Component.extend({

classNames: ['pull-to-refresh'],

router: service(),

currentRouteInstance: undefined,

didInsertElement() {

this._super(...arguments);

const owner = getOwner(this);

const currentPath = owner.lookup('controller:application').currentPath;

set(this, 'currentRouteInstance', owner.lookup(`route:${currentPath}`));

// TODO use unique identifier for mainElement, store result of init()

PullToRefresh.init({

mainElement: '.pull-to-refresh',

onRefresh: () => {

get(this, 'currentRouteInstance').refresh();

});

willDestroyElement() {

this._super(...arguments);

// TODO destroy current ptr only; id is returned by init()

PullToRefresh.destroyAll();

});

Auf dem Handy sollte das so schon funktionieren. Auf dem Desktop hatte ich das Phänomen, dass Hochcrollen immer erst beim zweiten mal funktioniert hat (und auch dann nur, wenn zwischen Versuch 1 und 2 nicht zu viel Zeit lag). Weil: Die Lib immer beim Hochscrollen den Loader anzeigt, wenn man die Funktion shouldPullToRefresh nicht vom default !window.scrollY ummapt, bspw. auf

shouldPullToRefresh: () => {
  let scrollTop = this.$().parent()[0].scrollTop;
  return scrollTop === 0;
},

shouldPullToRefresh: () => {

let scrollTop = this.$().parent()[0].scrollTop;

return scrollTop === 0;

Hochscrollen geht sonst nur, so lange der Loader angezeigt wird 🙃

Generische npm Module in Ember

Wer, wie ich, die ~~verfilzte~~ komplexe Javascript-Umgebung etwas… “unübersichtlich” findet, und sich fragt, wie zur Hölle man ein nicht-Ember-spezifisches npm-Modul in Ember importiert, dem kann geholfen werden:

Erst Browserify:

npm install ember-browserify --save-dev

1	npm install ember-browserify --save-dev

dann, voilà:

import PullToRefresh from 'npm:pulltorefreshjs';

1	import PullToRefresh from 'npm:pulltorefreshjs';

AdBlock: Block inline scripts

Es gibt diese fantastischen Seiten, die einen im wenige-Sekunden-Takt mit JS-Alerts beglücken:

Wenn man das schuldige Skript kennt (auf unübersichtlichen Seiten so zu finden), dann kann uBlock Origin das sogar dann blocken, wenn es ein inline Skript ist:

example.com##script:contains(Please change your browser)

1	example.com##script:contains(Please change your browser)

UPDATE: Scheint jetzt so nötig zu sein (man beachte das “^”):

example.com##^script:has-text(Please change your browser)

1	example.com##^script:has-text(Please change your browser)

HTH

PS, Fun Fact am Rande: Obiger Alert kam sogar für Edge 😄

Ember.js: Helper erweitern

Angenommen, ich habe eine Ember-Anwendung mit Zielplattform Handy. Dann möchte ich zentral an einer Stelle für alle Inputfelder Autokorrektur usw. deaktivieren:

// bsplw. in app.js:
Ember.TextSupport.reopen({
  attributeBindings: ['autocomplete', 'autocorrect', 'autocapitalize', 'spellcheck'],
  init: function () {
    this._super.apply(this, arguments);
    this.set('autocomplete', 'off');
    this.set('autocorrect', 'off');
    this.set('autocapitalize', 'off');
    this.set('spellcheck', false); // WICHTIG: boolean
  }
});

// bsplw. in app.js:

Ember.TextSupport.reopen({

attributeBindings: ['autocomplete', 'autocorrect', 'autocapitalize', 'spellcheck'],

init: function () {

this._super.apply(this, arguments);

this.set('autocomplete', 'off');

this.set('autocorrect', 'off');

this.set('autocapitalize', 'off');

this.set('spellcheck', false); // WICHTIG: boolean

}

});

Mit, und.

Ember.js: Vererbung in Routen

Angenommen, ich möchte ein default Verhalten auf viele Routen vererben, bsplw. das Handling von 403ern:

// routes/restricted.js
import Ember from "ember";

export default Ember.Route.extend({
  actions: {
    error(result) {
      if (result.errors[0].status === '403') {
        this.transitionTo('login');
      } else {
        // Let the route above this handle the error.
        return true;
      }
    }
  }
});

// routes/restricted.js

import Ember from "ember";

export default Ember.Route.extend({

actions: {

error(result) {

if (result.errors[0].status === '403') {

this.transitionTo('login');

} else {

// Let the route above this handle the error.

return true;

}

});

Und dann in irgendeiner Route:

import Restricted from "../routes/restricted";

export default Restricted.extend({
  model() {
    return this.get('store').query(/* ... */);
  }
});

import Restricted from "../routes/restricted";

export default Restricted.extend({

model() {

return this.get('store').query(/* ... */);

}

});

Grundsätzlich kommt das von hier, ergänzt um die konkrete Implementierung des Error Handlings. Das findet sich hier in der Doku, wobei error.status nicht funktioniert, es muss result.errors[0].status sein.

JS: navigator.language im Chrome

Chrome ist der neue Internet Explorer:

// IE:
let language = navigator.userLanguage;

// "everyone else" (as found in most tutorials):
let language = navigator.language;

// actually working:
let language = navigator.languages[0] || navigator.language || navigator.userLanguage;

// IE:

let language = navigator.userLanguage;

// "everyone else" (as found in most tutorials):

let language = navigator.language;

// actually working:

let language = navigator.languages[0] || navigator.language || navigator.userLanguage;

Stellt sich raus: navigator.language ist im Chrome die Sprache des UI, nicht “Accept-Language” m(

navigator.languages funktioniert dafür auch im FF und liefert alle akzeptierten Sprachen.

AngularJS 1.2.14 (ff): $scope.$watchCollection

$watchCollection würde man intuitiv so verwenden (Quelle):

$scope.$watchCollection(['data.myA', 'data.myB', 'data.myC'], function(newValues, oldValues) {...})

1	$scope.$watchCollection(['data.myA', 'data.myB', 'data.myC'], function(newValues, oldValues) {...})

Das funktioniert aber nicht. Korrekt wäre ein großer String (Quelle):

$scope.$watchCollection('[data.myA, data.myB, data.myC]', function(newValues, oldValues) {...})

1	$scope.$watchCollection('[data.myA, data.myB, data.myC]', function(newValues, oldValues) {...})

Darüber hinaus gibt es einen Bug in v1.2.14 (und in gewissen Szenarien auch darüber hinaus), bei dem newValues[i] immer gleich oldValues[i] ist. Der Fix dafür hat aber ebenfalls einen Bug: Die Dependecies werden nicht korrekt injected. Folgende Änderungen waren nötig:

// line 5: .config(function($provide){
.config(['$provide', function($provide){

// line 11: $provide.decorator('$rootScope', function($delegate, $parse) {
$provide.decorator('$rootScope', ['$delegate', '$parse', function($delegate, $parse) {

// line 142, 144: close Arrays

// line 5: .config(function($provide){

.config(['$provide', function($provide){

// line 11: $provide.decorator('$rootScope', function($delegate, $parse) {

$provide.decorator('$rootScope', ['$delegate', '$parse', function($delegate, $parse) {

// line 142, 144: close Arrays

Ein Pull Request ist nicht möglich, aber vllt zieht sich der Autor das auf meinen Kommentar hin.

Schlussendlich: Nicht vergessen, die Decorators in die App zu injecten:

angular.module('myModule', [..., 'Decorators']);

1	angular.module('myModule', [..., 'Decorators']);

Optimizely: Custom Javascript in Variation

Optimizely: Wer als Teil einer Variation eigenen JS-Code ausführen möchte, muss diesen Code in

(function($) {
  /* code goes here */
})(window.jQuery);

(function($) {

/* code goes here */

})(window.jQuery);

kapseln (Quelle).

BTW: Man sollte

/* ... */

/* ... */

statt

// ...

// ...

verwenden, da das JS in eine Zeile minifiziert wird.

Apache Ant: Ja/nein-Dialog

Apache kennt von haus aus nur Input Dialoge (korrigiert mich), und damit kann man natürlich “j”/”n”-Eingaben bauen (siehe Examples). Schöner ist aber ein richtiger Ja/Nein-Dialog, wie Javascripts confirm. Außerdem gibt es if/else nur mit Ant contrib, das nicht zwingend überall installiert ist. Bitte nennt mir eine schönere Lösung als die folgende, aber damit geht’s – Confirm-Dialoge und if/else-Verzweigung abhängig von der User-Eingabe:

<target name="_set URLs and ports" depends="use Proxy, setURLs, setURLsAndProxy">
</target>

<target name="use Proxy">
  <script language="javascript">
    <![CDATA[
      importPackage(javax.swing);
      var answer = JOptionPane.showConfirmDialog(null, "Enable proxy? (Probably no)", "", JOptionPane.YES_NO_OPTION);
      project.setProperty("answer", answer);
    ]]>
  </script>
  <condition property="useProxy">
    <equals arg1="${answer}" arg2="0" />
  </condition>
</target>

<target name="setURLs" unless="useProxy">
  <echo message="set URLs" />
</target>

<target name="setURLsAndProxy" if="useProxy">
  <echo message="set URLs and proxy" />
</target>

</target>

<![CDATA[

importPackage(javax.swing);

var answer = JOptionPane.showConfirmDialog(null, "Enable proxy? (Probably no)", "", JOptionPane.YES_NO_OPTION);

project.setProperty("answer", answer);

]]>

</script>

</condition>

</target>

</target>

</target>

Die Targets “setURLs” und “setURLsAndProxy” werden nur abhängig von ${useProxy} ausgeführt, bzw nicht ausgeführt (if/unless).

crusy.net

♪ Commit ins Abenteuerland ♫

Tag Archives for Javascript

Überlaufende Texte finden

Javascript: “Pull to refresh”

Generische npm Module in Ember

AdBlock: Block inline scripts

Ember.js: Helper erweitern

Ember.js: Vererbung in Routen

JS: navigator.language im Chrome

AngularJS 1.2.14 (ff): $scope.$watchCollection

Optimizely: Custom Javascript in Variation

Apache Ant: Ja/nein-Dialog