I could not find any standard rules for such indentation in arrays and objects. I need aliment by identificators ( ignoring brackets ). For our code style this approach is more convinient.
// default indent is 4 spaces
webix.ui({
view: "popup",
id: "group_name_edit",
position: "center",
body: {
padding: 20,
rows: [
input,
{ cols: [ // <-------- sample line
{},
{ view: "button",
label: "Ok",
width: 150,
},
]
}
]
},
});
You could combine the indent and object-curly-newline rules:
rules: {
"indent": ["error", 4, { "SwitchCase": 1 }],
"object-curly-newline": ["error", { "minProperties": 1 }]
},
I copied your sample and applied auto-fix and this is the result:
webix.ui({
view: "popup",
id: "group_name_edit",
position: "center",
body: {
padding: 20,
rows: [
input,
{
cols: [
{},
{
view: "button",
label: "Ok",
width: 150,
},
]
}
]
},
});
If you also want to enforce line breaks in arrays (which is not neccessary based on the given sample, as there already are line breaks), you could also add array-bracket-newline: ["error", "always"] to the rules.
Related
I have changed the default font to a font that supports arabic
The words supposed to be shown this way:
تقارير حركة الرسائل
But they are shown as
الرسائل حركة تقارير
function processDoc(doc) {
// https://pdfmake.github.io/docs/fonts/custom-fonts-client-side/
pdfMake.fonts = {
Roboto: {
normal: 'Roboto-Regular.ttf',
bold: 'Roboto-Medium.ttf',
italics: 'Roboto-Italic.ttf',
bolditalics: 'Roboto-MediumItalic.ttf'
},
scheherazade: {
normal: 'Scheherazade-Regular.ttf',
bold: 'Scheherazade-Regular.ttf',
italics: 'Scheherazade-Regular.ttf',
bolditalics: 'Scheherazade-Regular.ttf'
}
};
// modify the PDF to use a different default font:
doc.defaultStyle.font = "scheherazade";
}
$(function () {
var table = $('.data-table').DataTable({
processing: true,
serverSide: true,
ajax: {
url: "{{ route('messaage_movements.index') }}",
"method": "GET",
data: function (d) {
d.search = $('input[type="search"]').val()
}
},
dom: 'Bfrtip',
buttons: [
// {
// extend: 'pdfHtml5',
// text: 'PDF',
// } ,
'copyHtml5',
'excelHtml5',
'csvHtml5',
'print',
{
extend: 'pdfHtml5',
// download: 'open',
title: '{{__('messages.messaage_movements')}}',
customize: function ( doc ) {
processDoc(doc);
doc.content.splice( 1, 0, {
margin: [ 0, 0, 0, 12 ],
alignment: 'right',
} );
},
}
],
columns: [
{data: 'id', name: 'id'},
{data: 'message', name: 'message'},
{data: 'user_id', name: 'user_id'},
{data: 'number_massages', name: 'number_massages'},
{data: 'status', name: 'status'},
{data: 'reason', name: 'reason'},
{data: 'date_sent', name: 'date_sent'},
{
data: 'action',
name: 'action',
orderable: true,
`enter code here` searchable: true
},
]
});
});
I have followed a code like that but turned it into arabic
I don't know where to put the direction="rtl" in the code cause It's not a visible html tag
enter link description here
-----edit
The changes I've made above solved the problem of the title and the rows but not the thead.
customize: function ( doc ) {
processDoc(doc);
doc.content[0]['text'] = doc.content[0]['text'].split(' ').reverse().join(' ');
},
}
],
columns: [
{data: 'id', name: 'id'},
{data: 'message', name: 'message',targets: '_all',render: function(data, type, row) {
if (type === 'myExport') {
return data.split(' ').reverse().join(' ');
}
console.log(data);
return data;
}},
This library doesn't support rtl very well.. but you could fix this issues in table body using "render" function in columns option to reverse the content..
the problem is with your table head, because you can't customize table header content..
but I figured out a trick to solve this issue..
the idea is to create two table headers.. one reversed and hidden from the html page.. while the other is not reversed and shown in html, the library will only detect the reversed one and display it in the pdf file
to apply this just add this code to your js file..
let thead = document.getElementsByTagName('thead')[0].children[0]
const reversedHead = thead.cloneNode(true)
thead.parentNode.appendChild(reversedHead)
let headCells = reversedHead.children
Object.keys(headCells).forEach(i=>{
headCells[i].textContent = headCells[i].textContent.split(' ').reverse().join(' ')
})
reversedHead.setAttribute('hidden',"")
This is my code and I have installed the node module too but it's not working.
var editor = grapesjs.init({
showOffsets: 1,
noticeOnUnload: 0,
container: '#gjs',
height: '100%',
fromElement: true,
plugins: ["gjs-blocks-basic"],
pluginsOpts: {
"gjs-blocks-basic": {
block: {
category: 'basic',
}
}
},
I think you have an extra key block inside plugin options, it should be category.
const editor = grapesjs.init({
showOffsets: 1,
noticeOnUnload: 0,
container: '#gjs',
height: '100%',
fromElement: true,
plugins: ["gjs-blocks-basic"],
pluginsOpts: {
"gjs-blocks-basic": {
category: "Basic"
}
});
customize plugin doesn't add in single quote
const editor = grapesjs.init({
showOffsets: 1,
noticeOnUnload:0,
container: '#gjs',
plugins: ['gjs-preset-webpage',myPlugin,'myNewComponentTypes' ],
pluginsOpts: {
'grapesjs-plugin-export': { /*option*/ },
'myPlugin':{ category: "myPlugin"},
},
Make plugin in function Reference
//PLUGIN
function myPlugin(editor) {
editor.BlockManager.add('my-block',{
label:'Plug',
category: 'Basic',
content:'<div class="my-block"><p>Plugin Success</p></div>',
});
}
Try this:
const editor = grapesjs.init({
container: "#editor",
fromElement: true,
width: "auto",
storeManager: false,
plugins: [gjsBlockBasic],
pluginsOpts: {
gjsBlockBasic: {},
},
blockManager: {
appendTo: "#blocks",
},
})
Add "blocks" to a div where you want to display block basic options.
<div id="blocks"/>
I am using DataTables.js and want to pass an array as a parameter:
This piece of code works (see columnDefs):
var table = $('#html_table').DataTable({
paging: false,
language: {
searchPlaceholder: "e.g.: .msg, AU2019-00XX",
search: "Filter Results"
},
order: [
[response.order_by_column, response.order_by]
],
columnDefs: [
{ width: 70, targets: 0 }, { width: 50, targets: 1 }, { width: 50, targets: 2 },
{otherStuff...},
{otherStuff...}
]
But this piece of code does not work (see columnDefs):
Array Creation
html_col_width = []
for(i=0; i<response.html_col_width.length; i++){
html_col_width.push({
"width": response.html_col_width[i],
"targets": i
})
}
Data Table Creation
var table = $('#html_table').DataTable({
paging: false,
language: {
searchPlaceholder: "e.g.: .msg, AU2019-00XX",
search: "Filter Results"
},
order: [
[response.order_by_column, response.order_by]
],
columnDefs: [
html_col_width,
{otherStuff...},
{otherStuff...}
]
Why is it not possible to pass "html_col_width" as a parameter?
Since each element of the html_col_width array should be a separate element of the columnDefs array, you can use spread syntax to merge it into the array:
columnDefs: [
... html_col_width,
{ otherstuff...},
{ otherstuff...}
]
I want to be able to add custom font families to my Quill JS editor using the toolbar options via JavaScript, rather than defining them through HTML.
The code I have is below, which is the same code taken from the documentation:
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }], // Here, how do I specify custom font families??
[{ 'align': [] }],
];
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
Code running here: https://codepen.io/anon/pen/VgVZMg
Is there any way to do this? Also, I assume I need to include a link to Google fonts for each font I want to use, right?
Thanks
you can find your answer in this lisnk:
How to add font types on Quill js with toolbar options?
The process is like this you need 4 components:
A select tag with a ql-font class. This will contain the new font options.
Add the new fonts to the whitelist. This has to be defined before you call the the Quill constructor in Javascript.
Define the font-family for each label in the dropdown. Example: font-family: "Inconsolata"
Define the content font-families that will be used in the text area. Following the example in the 3rd component: .ql-font-inconsolata { font-family: "Inconsolata";}
for more information visit link please.
I am using jQuery DataTables 1.10 and would like to export PDF with HTML message. Because I need to include some specific info above the reports.
(Like date when report was made, who made the report etc.).
buttons: [
{
extend: 'pdfHtml5',
message: 'Made: 20_05-17<br />Made by whom? User232<br />'+this.messagePDF,
title: title,
header: true
},
]
HTML in message isn't working, it just shows <br /> tag.
You can apply styles like bold, italics... to your text using doc.content.splice inside customize as shown in fiddle.
$(document).ready(function() {
var table = $('#example').DataTable({
dom: 'Bfrtip',
ajax: 'https://api.myjson.com/bins/qgcu',
buttons: [{
extend: 'pdfHtml5',
//message: "Made: 20_05-17\nMade by whom: User232\n" + "Custom message",
title: 'Export',
header: true,
customize: function(doc) {
doc.content.splice(0, 1, {
text: [{
text: 'Made: 20_05-17 \n',
bold: true,
fontSize: 16
}, {
text: ' Made by whom: User232 \n',
bold: true,
fontSize: 11
}, {
text: 'Custom message',
bold: true,
fontSize: 11
}],
margin: [0, 0, 0, 12],
alignment: 'center'
});
}
}]
});
});
https://jsfiddle.net/dbbybL80/