This is an extract of my plugin (full version):
CKEDITOR.plugins.add('dndck4', {
lang: 'en',
requires: 'widget',
init: function (editor) {
editor.widgets.add('dndck4', {
dialog: 'atomProperties',
pathName: 'atom',
editables: {
caption: {
selector: '.dnd-caption-wrapper',
pathName: 'caption',
allowedContent: 'a[href]; strong; em'
}
},
...
downcast: function(el) {
var caption = '';
if (this.data.usesCaption) {
caption = this.editables.caption.getHtml();
}
var html = Drupal.dndck4.downcastedHtml(this.data, caption);
return CKEDITOR.htmlParser.fragment.fromHtml(html);
},
It worked well, until another JS does something apparently harmless:
editor.on('change', function() {
// Let CKEditor handle updating the linked text element.
editor.updateElement();
});
It breaks my widget based plugin (this.editables is an empty object). Of course I can just check this.editables to avoid error in the next line caption = this.editables.caption.getHtml(); but I'd like to know what happened and why.
Related
Currently my chrome extension is displaying a paragraph (first one), but wanted to iterate all paragraphs in an HTML and display those.
chrome.tabs.query( {
active: true,
lastFocusedWindow: true
},
function(array_of_Tabs) {
chrome.tabs.executeScript(tab.id, {code: "chrome.runtime.sendMessage(document.getElementsByTagName('p')[0].innerHTML);"});
});
chrome.runtime.onMessage.addListener(function(request) {
document.getElementsByTagName('html')[0].innerHTML = request;
});
I wanted to add something like this in the above js. Pls advice.
let paragraphs = document.getElementsByTagName("p");
for(let i = 0; i < paragraphs.length; i++) {
console.log(paragraphs[i].innerText) // Will print the content of each paragraph
}
You can join all the innerHTML's and message that.
chrome.tabs.query({
active: true,
lastFocusedWindow: true
},
function(array_of_Tabs) {
chrome.tabs.executeScript(tab.id, {
code: `chrome.runtime.sendMessage([...document.getElementsByTagName('p')].reduce(function(agg, elem) {agg.push(elem.innerHTML); return agg; }, []).join("\n<br>"));`
});
});
chrome.runtime.onMessage.addListener(function(request) {
document.getElementsByTagName('html')[0].innerHTML = request;
});
I would like to create a custom linting rule for HTML files inside and Angular2+ project that warns me when there is a clickable element without an ID set. By clickable element I mean and other custom Angular components which will have a click event.
The project is currently using EsLint and I am trying to create a custom plugin which would do the job.
Right now I tried to run this rule from a plugin that enforces to have a class called "btn" at least. But linting does trigger any warning, more than that, it seems like it does not lint .html files at all.
module.exports = {
meta: {
docs: {
description: '',
category: 'Possible Errors',
recommended: true,
},
fixable: null,
},
create: function (context) {
return {
JSXOpeningElement: (node) => {
const nodeType = node.name.name;
if (nodeType !== 'button') {
return;
}
const legalClassNameAttributes = node.attributes.filter((attr) => {
const isClassName = attr.type === 'JSXAttribute' && attr.name.name === 'className';
return isClassName && (attr.value.type !== 'Literal' ||
attr.value.value.includes('btn'));
});
if (!legalClassNameAttributes.length) {
context.report({
message:
'Use correct class',
node,
});
}
},
};
},
};
In polymer 1.0, I created custom behavior pageBehavior for two custom elements. On one of the elements, I would like to extend the behavior. After reading the docs, it seems that I would need to create another behavior and place it in array. I don't want to create another behavior because only this element will be using the extra code.
With the element and the extended behavior needed, how can I add hidePrintButton and to the properties and overwrite function fullDisplayeMode?
custom element:
<script>
Polymer({
is: "resume-page",
properties: {
hidePrintButton: {
type: Boolean,
reflectToAttribute: true,
value: true
}
},
behaviors: [pageBehavior],
fullDisplayMode: function() {
this.show = true;
this.hidePrintButton = false;
this._toggleStyles();
this.nextElementSibling.show = true;
}
});
</script>
the page behavior:
<script>
pageBehavior = {
properties: {
hideRipple: {
type: Boolean,
value: false
},
fullDisplay: {
type: Boolean,
value: false
},
show: {
type: Boolean,
reflectToAttribute: true,
value: true
}
},
_mediaQuery: function(section) {
if (window.matchMedia( "(min-width: 1200px)" )) {
section.style.width = "90%";
} else {
section.style.width ="90%";
}
},
_toggleWidth: function(section, fullDisplay) {
if (fullDisplay) {
section.style.width = "100%";
} else {
this._mediaQuery(section);
}
},
_toggleHover: function(section, fullDisplay) {
if (fullDisplay) {
section.classList.remove('enabled-hover');
} else {
section.classList.add('enabled-hover');
}
},
_toggleRipple: function(fullDisplay) {
//This is necessary because if page ripple
//is hidden to quick the animation doesn't finish
if (fullDisplay) {
setTimeout(function() {
this.hideRipple = true;
}.bind(this), 700);
} else {
this.hideRipple = false;
}
},
_toggleStyles: function(fullDisplay) {
var section = this.firstElementChild;
this._toggleRipple(fullDisplay);
this._toggleWidth(section, fullDisplay);
this._toggleHover(section, fullDisplay);
},
fullDisplayMode: function() {
this._toggleStyles(true);
this.show = true;
this.nextElementSibling.show = true;
},
homeMode: function() {
this._toggleStyles(false);
this.show = true;
this.nextElementSibling.show = false;
},
disappearMode: function() {
this.show = false;
this.nextElementSibling.show = false;
}
}
</script>
A behavior method cannot be extended. It can only be overwritten. However you could still abstract the shared logic in the behavior and have some empty methods on the behavior for customization purposes.
E.g
//In your behavior
fullDisplayMode: function() {
this.show = true;
this._toggleStyles();
this.nextElementSibling.show = true;
this.prepareFullDisplayMode();
},
prepareFullDisplayMode:function(){
//Empty inside behavior
//Elements could opt to implement it with additional logic
}
Using this pattern, one of your custom elements could add additional logic by implementing the 'prepareFullDisplayMode' while the other would not need to.
I don't know since when we can do this, but we CAN extend behaviors:
https://www.polymer-project.org/1.0/docs/devguide/behaviors#extending
I'm going to use as an example the Polymer.AppLocalizeBehavior from app-localize-behavior to set the default language.
1) Namespace your behavior, so they don't collide with others:
var MyNamespace = MyNamespace|| {};
2) Write the behavior's implementation:
MyNamespace.LocalizeImpl = {
ready() {
},
attached: function() {
this.loadResources(this.resolveUrl('../../../locales.json'));
},
properties: {
language : {
value : "en"
}
},
};
3) Add the implementation to the new behavior in an array.
MyNamespace.Localize = [Polymer.AppLocalizeBehavior, MyNamespaceLocalize.Impl]
All together:
var MyNamespace = MyNamespace || {};
MyNamespace.Localize = {
ready() {
},
attached: function() {
this.loadResources(this.resolveUrl('../../../locales.json'));
},
properties: {
language : {
value : "en"
}
},
};
MyNamespace.LocalizeBehavior = [Polymer.AppLocalizeBehavior, MyNamespace.Localize]
Then, in your element, include it like this:
<link rel="import" href="../../../../bower_components/polymer/polymer.html">
<link rel="import" href="../path-to-custom-behavior/mynamespace-localize-behavior/mynamespace-localize-behavior.html">
<dom-module id="my-element">
<style is="custom-style"></style>
<template is="dom-bind">
<template is="dom-if" if="{{query}}">
<h1> {{localize("EmailActivationSuccessful")}}</h1>
</template>
<template is="dom-if" if="{{!query}}">
<h1> {{localize("EmailCodeExpired")}}</h1>
</template>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'my-element',
behaviors: [MyNamespace.LocalizeBehavior],
});
})();
</script>
Now, as you can see I've only included the MyNamespace.LocalizeBehavior and started using all the methods and functions from "Polymer.AppLocalizeBehavior"
This is a great way for setting the default language and only handling the language logic in a single element.
Explanation and notes:
All the properties, methods, functions that match the previous
behavior are overwritten. In this case, I overwrote the
"language" property from "Polymer.AppLocalizeBehavior".
Remember include the .html file where the old behavior is located only where you are extending the behavior. Afterwards you only include your custom behavior wherever and whenever you want.
In point #3, the array works like this: the first element is the behavior to extend/overwrite, and the second one is your implementation, or the extended behavior.
I am using the following code to display my current location on Sencha Touch 2. Its showing the correct latitude in console.log() but not showing the map. Please help.
Ext.define('restApp.view.GreetingView', {
extend: 'Ext.Map',
alias: 'widget.mymap',
config: {
fullscreen: true,
//tpl: '<p>The ID is {uuid}</p><p>The content is {display}</p>',
layout: {
type: 'fit'
}
},
initialize:function(){
Ext.Viewport.add({
xtype: 'map',
id:'geomap',
itemId:'ma'
});
var geo = Ext.create('Ext.util.Geolocation', {
autoUpdate: true,
frequency: '10000',
listeners: {
locationupdate: function (geo) {
var center = new google.maps.LatLng(geo.getLatitude(), geo.getLongitude());
Ext.getCmp('geomap').setData(center);
//restApp.view.GreetingView.getComponent('ma').update(center);
var marker = new google.maps.Marker({
position: center,
map: Ext.getCmp('geomap').map
});
console.log('New latitude: '+ geo.getLatitude());
},
locationerror: function (geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
if (bTimeout) {
alert('Timeout occurred.');
}
else {
alert('Error occurred.');
}
}
}
});
}
});
OLD ANSWER
Comparing it to a snippet I use for the same purpose (shown below), I realised the issue is a simple one. "center" is a reserved word. Try using a different variable name.
PART OF EDIT: removal of code snippets.
NEW ANSWER
I looked around and noticed your "project" is but a piecemeal collection of demo code.
Here's a complete code solution, with all excess pieces removed for simplicity, as well as over use of variables, also expanded to a longwinded format to be obvious.
/*
The application, including a simple launcher.
*/
Ext.application({
requires : ['Ext.device.Geolocation'],
views : ['MainView'],
controllers : ['Maps'],
name : 'Geo',
launch: function() {
Ext.create('Geo.view.MainView', {fullscreen: true});
}
});
/*
The View to display the map, as well as how to include the navigation bar
and include a "you are here" button.
*/
Ext.define('Geo.view.MainView', {
extend: 'Ext.navigation.View',
alias: 'widget.mainview',
requires: [
'Ext.Panel',
'Ext.Map',
'Ext.navigation.Bar',
'Ext.Button'
],
config: {
items: [
{
xtype : 'panel',
title : 'Map',
itemId : 'mapPanel',
items : [
{
xtype: 'map',
height: '100%',
itemId: 'map'
}
]
}
],
navigationBar: {
docked: 'top',
items: [
{
xtype: 'button',
itemId: 'youAreHereButton',
text: 'You Are Here'
}
]
}
}
});
/*
The Controller with functionality for the "you are here" button tap
*/
Ext.define('Geo.controller.Maps', {
extend: 'Ext.app.Controller',
config: {
refs: {
mapView: {
selector: 'mainview #map',
xtype: 'Ext.Map'
},
mainView: {
selector: 'mainview',
xtype: 'Ext.navigation.View'
}
},
control: {
"mainview #youAreHereButton": {
tap: 'onYouAreHereTap'
}
}
},
onYouAreHereTap: function(button, e, eOpts) {
// set 'mapView' as the parent view displaying the map
var mapView = this.getMapView();
// control measure for old browsers or denied permission for location detection.
if (Ext.feature.has.Geolocation) {
/*
Ext.device.Geolocation uses native (phone) Geolocation capabilities if available,
and falls back to Ext.util.Geolocation if only browser support detected.
*/
Ext.device.Geolocation.getCurrentPosition({
allowHighAccuracy : true,
maximumAge : 0,
timeout : 20000,
success : function(position) {
var latitude = position.coords.latitude,
longitude = position.coords.longitude,
location = new google.maps.LatLng(latitude, longitude),
marker = new google.maps.Marker({
position : location,
map : mapView.getMap(),
animation : google.maps.Animation.DROP
});
mapView.setMapOptions({ // Move to the center
center: location
});
},
failure: function() {
console.log('something went wrong!');
}
});
}
}
});
Yes, I could have simplified it further down to a single view, containing also the controller's handler for the "you are here" tap. I have chosen to present it this way to assist you with understanding the MVC pattern and how it applies in Sencha Touch.
For this to work, it'll require the Sencha Touch library, as well as this following line:
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
This is the script which includes Google Maps in your page and is essential for displaying.
Learn more:
https://www.sencha.com/learn/hello-world/ - getting started
http://docs.sencha.com/touch/2.3.1/#!/guide - complete documentation for how to do anything in Sencha Touch, starting with the Guides page.
I would like to port the javascript code from my page to YUI3. After reading many posts (questions and answers) here and lots of information in the YUI3 page and in tutorials I have come to the conclusion that the best way to do it is by splitting the code in modules, because it allows me to load scripts dinamically only when needed.
I would like to organize the code in different submodules which should be loaded and managed (if needed) by a core module.
I think I have understood how to dinamically load them, but the problem I have now is that I am not always able to call the public methods both within a module and form one module to another. Sometimes it works, but sometimes I get the message xxx is not a function.
Probably the question is I don't understand how to set a global namespace (for example MyApp) and "play" within that namespace.
I would like to be able to call methods the following way: MyApp.Tabs.detectTabs()... both from the methods of the main module (MyApp.Core) and from the same submodule (MyApp.Tabs).
Here is the structure of my code:
Inline javascript:
var MyAppConfig = {
"tabpanels":{"ids":["navigation"]},
"events": [{"ids": ["main_login", "dictionary_login"],
"type": "click",
"callback": "MyApp.Core.updateContent",
"params":{
}
}]
};
YUI_config = {
filter: 'debug',
groups: {
'myapp': {
modules: {
'project-myapp-core': {
fullpath: 'http://www.myapp.com/scripts/Core.js',
requires: ['node-base']
},
'project-myapp-tabs': {
fullpath: 'http://www.myapp.com/scripts/Tabs.js',
requires: ['base', 'project-myapp-core', 'history', 'tabview', 'tabview-base']
}
}
}
}
};
YUI(YUI_config).use('node', 'base', 'project-myapp-core', function(Y) {
var MyApp = {};
MyApp.Core = new Y.MyApp.Core();
Y.on('domready', MyApp.Core.begin, Y, null, application);
});
Module: Core
File: http://www.myapp.com/scripts/Core.js
YUI.add('project-myapp-core', function(Y) {
function Core(config) {
Core.superclass.constructor.apply(this, arguments);
}
Core.NAME = 'myapp-core';
Core.ATTRS = {};
var MyApp;
MyApp = {};
Y.extend(Core, Y.Base, {
initializer: function (cfg) {
},
begin: function(e, MyAppConfig) {
MyApp.Core = instance = this;
if (MyAppConfig.tabpanels) {
YUI().use('node', 'project-myapp-tabs', function(Y) {
MyApp.Tabs = new Y.MyApp.Tabs();
});
}
if (MyAppConfig.events) {
MyApp.Core.prepareEvents(MyAppConfig.events);
// I get "MyApp.Core.prepareEvents is not a function"
}
},
prepareEvents: function(e) {
},
updateContent: function() {
}
});
Y.namespace('MyApp');
Y.MyApp.Core = Core;
}, '0.0.1', { requires: ['node-base'] });
Submodule: Tabs
File: http://www.myapp.com/scripts/Tabs.js
YUI.add('project-myapp-tabs', function(Y) {
function Tabs(config) {
Tabs.superclass.constructor.apply(this, arguments);
}
Tabs.NAME = 'myapp-tabs';
Tabs.ATTRS = {};
var tabView = [];
Y.extend(Tabs, Y.Base, {
initializer: function (cfg) {
},
begin: function (tabpanels) {
},
methodA: function () {
}
});
Y.namespace('MyApp');
Y.MyApp.Tabs = Tabs;
}, '0.0.1', { requires: ['base', 'project-myapp-core', 'history', 'tabview', 'tabview-base'] });
Where should I define the global variables, the namespace...? How should I call the functions?
Thanks in advance!
-- Oriol --
Since nothing depends on project-myapps-tabs, YUI doesn't include it. Try this in your inline JS:
YUI(YUI_config).use('node', 'base', 'project-myapp-tabs', function(Y) {