How do I add the JavaScript code in my Meteor application? This is what I want to include:
Here is the code:
$('.cropper-example-1 > img').cropper({
aspectRatio: 16 / 9,
autoCropArea: 0.65,
strict: false,
guides: false,
highlight: false,
dragCrop: false,
cropBoxMovable: false,
cropBoxResizable: false
});
How to include the jonblum:jquery-cropper package:
Run meteor add jonblum:jquery-cropper.
Run mkdir public in your project root.
Place the image you want to crop in your /public directory.
Include the image, for example:
<template name="lena">
<div class="cropper-example-lena">
<img src="/lena.jpg" alt="Lena">
</div>
</template>
Implement the Template.myTemplate.onRendered function and include the Cropper code, for instance:
if (Meteor.isClient) {
Template.lena.onRendered(function () {
$('.cropper-example-lena > img').cropper({
aspectRatio: 16 / 9,
autoCropArea: 0.65,
strict: false,
guides: false,
highlight: false,
dragCrop: false,
cropBoxMovable: false,
cropBoxResizable: false
});
});
}
Finally, include the template, e.g. {{> lena}}.
Result:
Related
I'm use VSCode for writing on ReactJS, so I use .js and .jsx files, but i have a problem with formating my code. Early my Prettier works good, but now it not working, code not formating when I try save it (CRTL+S).
This is code of my settings.json
{
"editor.formatOnSave": true, //Not working :(
"prettier.tabWidth": 4, //But real tabWidth is 2, and I'm wanna fix it too
"prettier.singleQuote": true,
"prettier.trailingComma": "all",
"prettier.semi": true,
"prettier.jsxBracketSameLine": true,
"prettier.printWidth": 100,
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"workbench.activityBar.visible": true,
"git.enableSmartCommit": true,
"git.confirmSync": false,
"prettier.useTabs": true,
"prettier.useEditorConfig": false,
"workbench.startupEditor": "newUntitledFile",
"eslint.codeAction.showDocumentation": {
"enable": true
}
}
I have recently upgrade VS code. Now it's no longer showing the error highlights. Earlier, if I use any undefined function or variable, it used to underline it with red line.
i.e.. line number 5 on the image is not reflecting in red
Settings
{
"window.zoomLevel": 0,
"sonarlint.ls.javaHome": "C:\\\\Program Files\\\\Java\\\\jdk-12.0.1",
"javascript.updateImportsOnFileMove.enabled": "always",
"[javascript]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"explorer.confirmDelete": false,
"update.mode": "start",
"files.autoSave": "off",
"editor.autoClosingBrackets": "always",
"editor.autoClosingOvertype": "always",
"editor.autoClosingQuotes": "always",
"eslint.debug": true,
"eslint.format.enable": true,
"editor.semanticHighlighting.enabled": false,
"bracketPairColorizer.highlightActiveScope": true,
"editor.tokenColorCustomizations": null,
"typescript.tsserver.useSeparateSyntaxServer": false,
"eslint.alwaysShowStatus": true,
"workbench.colorTheme": "Visual Studio Dark",
"typescript.format.enable": false,
"typescript.format.insertSpaceAfterCommaDelimiter": false,
"typescript.format.insertSpaceAfterKeywordsInControlFlowStatements": false,
"typescript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"debug.javascript.breakOnConditionalError": true,
"debug.onTaskErrors": "showErrors",
"zenMode.silentNotifications": false,
"eslint.validate": [
"javascript", "javascriptreact", "typescript", "typescriptreact"
]
}
Also have the these extensions installed
You can try configuring eslinter in React that should fix it. Here is a good tutorial about how to do it
Is it possible to disable all cropper functionality and only enable cropper.zoom() for example?
If I disable cropper with cropper.disable() it disables everything.
From the source code it’s seems that this option isn’t supported:
// Disable (freeze) the cropper
disable() {
if (this.ready && !this.disabled) {
this.disabled = true;
addClass(this.cropper, CLASS_DISABLED);
}
return this;
},
Source:
https://github.com/fengyuanchen/cropperjs/blob/89f0b50c7f580135582a087cbf2417126b67d5fd/src/js/methods.js#L137
You can open an issue or do it yourself...
One possible way to do it is by setting these options like this:
autoCrop: false,
dragMode: 'move
This configuration might help:
config: any = {
dragMode: 'none',
highlight: false,
modal: false,
responsive: true,
scalable: true,
autoCrop: false,
center: false,
background: false,
zoomable: true,
zoomOnWheel: true,
};
I am using Cropper plugin to crop images.After uploading images height and width of is correct but somehow it sets to 200 and 100 which is the default value for minContainerWidth and minContainerHeight of the plugin.I do not understand what is going wrong.I am using following options
viewMode: 3,
dragMode: 'move',
autoCropArea: 1,
restore: false,
modal: false,
guides: false,
highlight: false,
/*cropBoxMovable: false*/
cropBoxResizable: false
I have ui-codemirror implemented in angular application. After turning on lint I have an error in console:
ReferenceError: jsonlint is not defined
at https://localhost:9000/bower_components/codemirror/addon/lint/json-lint.js:20:3
lint.js:20:3 :
jsonlint.parseError = function(str, hash) {
These are my options for editor
$scope.cmOption = {
value: "/*WRITE YOUR INSTRUCTION HERE*/",
lineWrapping : true,
lineNumbers: true,
textWrapping: true,
indentWithTabs: true,
readOnly: false,
theme: 'neat',
mode: "application/json",
matchBrackets: true,
autoCloseBrackets: true,
gutters: ["CodeMirror-lint-markers"],
lint: true
};
And here lint.js included (at the very bottom of my index, after all other codemirror scripts)
<script src="bower_components/codemirror/addon/lint/lint.js"></script>
<script src="bower_components/codemirror/addon/lint/javascript-lint.js"></script>
<script src="bower_components/codemirror/addon/lint/json-lint.js"></script>