We Keep Coding

Difference between script filed and life cycle methods in Grapesjs?

I am new to Grapesjs, and i find the intro in Grapesjs doc website:
so if we have code like this:
editor.BlockManager.add('test-block', {
label: 'Test block',
attributes: {class: 'fa fa-text'},
content: {
script: "alert('Hi'); console.log('the element', this)",
// Add some style just to make the component visible
style: {
width: '100px',
height: '100px',
'background-color': 'red',
}
}
});
On the doc website it says:
If you check now the generated HTML coded by the editor (via Export button or editor.getHtml()), you might see something like this:
<div id="c764"></div>
<script>
var items = document.querySelectorAll('#c764');
for (var i = 0, len = items.length; i < len; i++) {
(function(){
// START component code
alert('Hi');
console.log('the element', this)
// END component code
}.bind(items[i]))();
}
</script>
It looks like all the stuff defined in script tag will be executed after the component mount, on the other way, considering Grapesjs provide view.init() and view.onRender() such life cycle methods, I was thinking we can probably achieve exactly the same effect using such life cycle methods.
So my question would be: what's difference between the script and component own life cycle methods?
BTW, I use React before, and i did most state initialization and data fetching in componentDidMount() such life cycle, so i personally could not get what could be the scenario for script in Grapesjs(Especially when i comparing those two libs.)?

As you should know Grapes uses backbone.js, which is pretty different to react.
Now, talking about how it works for grapesjs.
Lifecycle hooks will allow you to interact with model and editor instance during website building process.
Script will contain javascript your component needs to be useful in and outside the editor (Obviously, having limited (read-only) access to model properties).
Here you can see a very basic, and probably dummy example of both cases.
Setting listener on init: You'll probably won't need to alert changes in component attributes in resulting page...
Add animation class: script will run when render in editor, but also will run at published page, so you can see the animation out of grapes' editor.
const editor = grapesjs.init({
height: "100%",
container: "#gjs",
showOffsets: true,
fromElement: true,
noticeOnUnload: false,
storageManager: false,
canvas: {
styles: [
"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
]
}
});
editor.DomComponents.addType("MagicBox", {
model: {
defaults: {
tagName: "div",
attributes: {
alert: ""
},
traits: ["alert"]
},
init() {
this.listenTo(this, "change:attributes:alert", this.handleChange);
},
handleChange(a) {
alert(this.get("attributes").alert);
}
}
});
const blockManager = editor.BlockManager;
blockManager.add("magic-box", {
label: "MagicBox",
content: {
type: "MagicBox",
tagName: "div",
style: {
width: "100px",
height: "100px",
background: "blue"
},
script: 'this.className+="animate__animated animate__bounce"'
},
category: "Basic",
attributes: {
title: "Magic Box"
}
});

Dragging windows

I did some research on this and still can't find a good solution for it. I wrote my app in ExtJS 4.1 and when I run it on an iPod the dragging functionality is disabled by default (which is what I want), but if I write the same app in ExtJS 6.2 all windows can be draggable which causes issues of visibility of the app. With that being said, Does anyone know how to disable window dragging when using Tablets (iPod, iPad, etc.)? I'm using ExtJS 6.2
Here's my working code that works great for a single window, but I want a general solution that will stop ALL windows from being dragged.
var win = Ext.create('Ext.Window', {
title: "My Window",
width: 500,
modal: true,
layout: 'fit',
items: form,
buttons: [{
text: 'Close',
handler: function() {
win.hide();
}
}]
});
win.show();
if(Ext.os.deviceType === 'Tablet') {
win.dd.disable();
}

A "global solution" sounds like you want to use an override to apply one of the other answers globally to your application:
Ext.define('MyAppName.override.Window', {
override: 'Ext.window.Window',
initComponent: function() {
this.callParent(arguments);
if(Ext.os.deviceType === 'Tablet') {
this.dd.disable();
}
}
})
or
Ext.define('MyAppName.override.Window', {
override: 'Ext.window.Window',
initComponent: function() {
if(Ext.os.deviceType === 'Tablet') {
this.draggable = false;
}
this.callParent(arguments);
}
})
To make the override work, put it into the file app/override/Window.js and add a reference to your requires array in Application.js:
requires: [
'MyAppName.override.Window'
],

You are looking for Ext.os class.
More precisely Ext.os.is method, according to the docs it has all the values you would need.
I am not sure why you want to block only iPads and not tables in general. If you wan tablets than you can use if(Ext.os.deviceType === 'Tablet') {...}
Otherwise if(Ext.os.is.iPad) {...}.
UPDATE Solution:
If you want to force anything across all classes in the ExtJS you would use Ext.override.
So the solution would be to put at the beginning of the app this code:
if (Ext.os.deviceType === 'Tablet') {
Ext.override('Ext.Window', {
privates: {
initDraggable: function(){}
}
})
}
FYI You can check the Ext.Window source code. I had to override this method, the default value draggable: false doesn't work.
https://fiddle.sencha.com/#view/editor&fiddle/2iqi
To test it, just press F12 switch to table mode.
But this solution has 1 drawback:
If the target is a class declared using Ext.define, the override
method of that class is called
Which means this solution don't work when you use Ext.create('Ext.Window',{})
Solution for that would be to define our own Ext.Window class and than inside the app when you are using Ext.create('Ext.Window' you would use Ext.create('Fiddle.view.MyWindow', and when we have our own function already we don't need to use override but can put if directly into the class definition like this:
Ext.define('Fiddle.view.MyWindow', {
extend: 'Ext.Window',
alias: 'widget.mywindow',
draggable: (function(){
if (Ext.os.deviceType === 'Tablet') {
return false;
} else {
return true;
}
})()
});
https://fiddle.sencha.com/#view/editor&fiddle/2iqj
I don't know how to override it for Ext.create('Ext.Window' if you still insists on using it. One solution would be to re-write Ext.create or simply edit the framework source itself but I highly discourage from that.

Why you are not using draggable: false in window config
Here is some code in FIDDLE
var win = Ext.create('Fiddle.view.MyWindow', {
title: "My Window",
width: 500,
draggable: false,
modal: true,
layout: 'fit',
buttons: [{
text: 'Close',
handler: function() {
win.hide();
}
}]
});
win.show();

Angular HighChart in tabs width

Okay so i have the following highChart tag:
<highchart id="chart1" config="chartConfig" ></highchart>
Now in my system i have several tabs. it happens to be that the high chart is not under the first tab.
Now when i press the tab that contains the chart, the chart looks abit odd:
(You can't tell from this picture but it is only using like 30% of the total width)
But change the browser size and then changing it back to normal the chart places it self correctly inside the element (this also happens if i just open the console while i am inside the tab):
I am guessing that it has something to do with the width of the element once it has been created (maybe because it is within another tab) but i am unsure how to fix this.
I attempted to put a style on the element containg the highchart so that it would look something like this: <highchart id="chart1" config="chartConfig style="width: 100%"></highchart>
However this resulted in the chart running out of the frame.
My chart config
$scope.chartConfig = {
};
$scope.$watchGroup(['login_data'], function(newValues, oldValues) {
// newValues[0] --> $scope.line
// newValues[1] --> $scope.bar
if(newValues !== oldValues) {
$scope.chartConfig = {
options: {
chart: {
type: 'areaspline'
}
},
series: [{
data: $scope.login_data,
type: 'line',
name: 'Aktivitet'
}],
xAxis: {
categories: $scope.login_ticks
},
title: {
text: ''
},
loading: false
}
}
});

Can you try one of the following in your controller? (or perhaps both!)
$timeout(function() {
$scope.chartConfig.redraw();
});
$timeout(function() {
$scope.chartConfig.setSize();
});

Calling the reflow method solved my similar issue on showing chart in a modal. Hope this will help others :D
Add this to your controller after $scope.chartConfig:
$scope.reflow = function () {
$scope.$broadcast('highchartsng.reflow');
};

Highcharts pie chart list of selected section

I have enabled my pie chart to have multiple sections selected. (Not yet got it working as I want it though). Open SO questions here
But once I get this done, I would like to return the list of selected sections everytime a change in made in any selection.
Can someone please suggest. !!
My COde:
series: [{
name: 'Departments',
// allowPointSelect : true,
slicedOffset: 0,
states: {
select: {
color: 'red'
}
},
point: {
events: {
click: function(event){
//this.slice(null);
this.select(null, true);
filterCharts(cloneDonutData.Departments, dChart.series[0].name,this.name);
//console.log(this.series[0].chart.getSelectedPoints());
}
}
} ,
data: ....
]

USe: http://api.highcharts.com/highcharts#Chart.getSelectedPoints
getSelectedPoints () Since 1.2.0
Returns an array of all currently selected points in the chart. Points can be selected either programmatically by the point.select() method or by clicking.

BB Code List Javascript

I am currently implimenting a easy to edit BB code script which is written up with Jquery / Javascript. Only problem is it's not as easy as I would like and so I need some help.
The script works fine (adding stuff into the textarea). However I am trying to make the presentation a little better.
I would appreciate it if someone could tell me how to unlist the items or at least hide the buttet points (probably do this using css) otherwise I could edit the javascript/jquery.
Also when I scroll over an option (for the bold button) it shows the code to the button (as a title) I would like to remove this but I can't see where on the code I'd edit it.
Here is my javascript code:
// ----------------------------------------------------------------------------
// markItUp!
// ----------------------------------------------------------------------------
// Copyright (C) 2008 Jay Salvat
// http://markitup.jaysalvat.com/
// ----------------------------------------------------------------------------
myBbcodeSettings = {
nameSpace: "bbcode", // Useful to prevent multi-instances CSS conflict
previewParserPath: "~/sets/bbcode/preview.php",
markupSet: [
{name:"<img src='_img/bold_icon.gif'>", key:'B', openWith:'[b]', closeWith:'[/b]'},
{name:'Italic', key:'I', openWith:'[i]', closeWith:'[/i]'},
{name:'Underline', key:'U', openWith:'[u]', closeWith:'[/u]'},
{separator:'---------------' },
{name:'Picture', key:'P', replaceWith:'[img][![Url]!][/img]'},
{name:'Link', key:'L', openWith:'[url=[![Url]!]]', closeWith:'[/url]', placeHolder:'Your text to link here...'},
{separator:'---------------' },
{name:'Colors', openWith:'[color=[![Color]!]]', closeWith:'[/color]', dropMenu: [
{name:'Yellow', openWith:'[color=yellow]', closeWith:'[/color]', className:"col1-1" },
{name:'Orange', openWith:'[color=orange]', closeWith:'[/color]', className:"col1-2" },
{name:'Red', openWith:'[color=red]', closeWith:'[/color]', className:"col1-3" },
{name:'Blue', openWith:'[color=blue]', closeWith:'[/color]', className:"col2-1" },
{name:'Purple', openWith:'[color=purple]', closeWith:'[/color]', className:"col2-2" },
{name:'Green', openWith:'[color=green]', closeWith:'[/color]', className:"col2-3" },
{name:'White', openWith:'[color=white]', closeWith:'[/color]', className:"col3-1" },
{name:'Gray', openWith:'[color=gray]', closeWith:'[/color]', className:"col3-2" },
{name:'Black', openWith:'[color=black]', closeWith:'[/color]', className:"col3-3" }
]},
{name:'Size', key:'S', openWith:'[size=[![Text size]!]]', closeWith:'[/size]', dropMenu :[
{name:'Big', openWith:'[size=200]', closeWith:'[/size]' },
{name:'Normal', openWith:'[size=100]', closeWith:'[/size]' },
{name:'Small', openWith:'[size=50]', closeWith:'[/size]' }
]},
{separator:'---------------' },
{name:'Bulleted list', openWith:'[list]\n', closeWith:'\n[/list]'},
{name:'Numeric list', openWith:'[list=[![Starting number]!]]\n', closeWith:'\n[/list]'},
{name:'List item', openWith:'[*] '},
{separator:'---------------' },
{name:'Quotes', openWith:'[quote]', closeWith:'[/quote]'},
{name:'Code', openWith:'[code]', closeWith:'[/code]'},
{separator:'---------------' },
{name:'Clean', className:"clean", replaceWith:function(h) { return h.selection.replace(/\[(.*?)\]/g, "") } },
{name:'Preview', className:"preview", call:'preview' }
]
}
Thank you for any help you can give me! :)

Using PHP to parse and a simple script to add in text.

Perhaps you could try to use a composer packagist BB code. See: https://packagist.org/?q=bbcode&idx=packagist&p=0