I am trying to use coffeescript in code pen
Here is the code I want to try:
$(document).ready ->
render()
So I have enabled coffeescript in the js pane and added jQuery as an external javascript:
However I am getting this error
I am quite confident the code is valid coffeescript code. So why codepen flags 'unexpected token'?
If we look at all your code:
$(document).ready ->
render()
getWordList = ->
[['hello', 12], ['dear', 10], ['a', 9], ['Joe', 5], ['8', 2]]
render = ->
$canva = $('.wordcloud-canvas')
options =
list : getWordList()
fontFamily : 'Times, serif'
weightFactor : 2
color : '#f02222'
rotateRatio : 0
rotationSteps : 0
shuffle : false
backgroundColor: 'white'
drawOutOfBound : no
gridSize : 320
window.WordCloud $canvas[0], options
We see that the problem is really that line 21 (window.WordCloud $canvas[0], options) is indented one step too far. The indentation indicates that the window.WordCloud call should be part of the options object but that's not valid CoffeeScript. If we paste that into the "Try CoffeeScript" section at http://coffeescript.org/, it even says:
[stdin]:19:25: error: unexpected newline
gridSize : 320
^
If you fix that (https://codepen.io/anon/pen/GOgLbo) then spurious error message about the > goes away and you're left with a simple (and correct) complaint about spelling $canvas wrong in the $canva = $('.wordcloud-canvas') assignment.
Your code was broken in two ways, CodePen is itself broken in a different way.
Related
I am using the MegaMenu in Magento 2. The default breakpoint for the menu to collapse is 1024px / 1025px. The smaller version is a simple list of categories, sliding in from the right side of the screen. The bigger version is a dropdown with categories to hover.
How can I change the breakpoint to 1194px / 1195px?
I tried modifying JS and CSS but it just broke the menu. I could also not find an option in the admin panel.
I don't own the extension but i read the javascript and in the file of demo website:
https://mega-menu-m2-ce.magento-demo.amasty.com/static/version1586867535/frontend/Magento/luma/en_US/Amasty_MegaMenu/js/open-type.js
Line number 35:
_create: function () {
var self = this,
isMobile = $(window).width() <= 1024 ? 1 : 0,
options = self.options,
openType = options.openType,
isHamburger = +options.hamburgerStatus;
There is the breakpoint (1024). Maybe if you change that to 1194 or 1195?
_create: function () {
var self = this,
isMobile = $(window).width() <= 1194 ? 1 : 0,
options = self.options,
openType = options.openType,
isHamburger = +options.hamburgerStatus;
Override that setting with js. or override the whole js file? Hope that helps.
I'm just learning CoffeeScript and I'm trying to do something I would normally do in plain 'ol JavaScript.
Here's what I tried to do:
initializeWebGL = (canvas) ->
gl = canvas.getContext "webgl" or canvas.getContext "experimental-webgl"
Which compiles to what I kind of expect:
var initializeWebGL;
initializeWebGL = function(canvas) {
var gl;
return gl = canvas.getContext("webgl" || canvas.getContext("experimental-webgl"));
};
In order to get what I really want, I have to wrap the getContext arguments with parentheses:
initializeWebGL = (canvas) ->
gl = canvas.getContext("webgl") or canvas.getContext("experimental-webgl")
Which produces what I want:
var initializeWebGL;
initializeWebGL = function(canvas) {
var gl;
return gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
};
Is there a better way to do what I'm trying to achieve than to just add parentheses around the function calls like in the second example?
Is there a better way to do what I'm trying to achieve than to just add parentheses around the function calls like in the second example?
No, I don't think so. My rule of thumb is it's OK to omit parentheses when the function call and its arguments are the last thing on a line, otherwise include them.
OK
someFunction 1, 2, 3
Not OK
someFunction 1, someOtherFunction 2, 3
In general I try to avoid overly-concise, terse statements. They are harder to work with both mentally as well as stepping through in a debugger is trickier.
I wouldn't say it's a better way but you could do something like this:
initializeWebGL = (canvas) ->
gl = canvas.getContext "webgl"
gl = gl or canvas.getContext "experimental-webgl"
I personally prefer readability over writing less code:
initializeWebGL = (canvas) ->
gl = canvas.getContext "webgl"
if !gl? then gl = canvas.getContext "experimental-webgl"
In wavemaker a got an app that display charts with dojo charting, some charts have a lot
data so the chart is compressed so i look around and found that we could add zooming and panning, found an example on the web link:http://informatik.fh-brandenburg.de/~porebskk/dojo.html
i look at the source code and it looks like i only had to add this to my code
dojo.require("dojox.charting.action2d.MouseZoomAndPan");
and then call it before rendering the chart
new dojox.charting.action2d.MouseZoomAndPan(chart, "default");
My problem is when i had this to my source code
dojo.require("dojox.charting.action2d.MouseZoomAndPan");
and run the app i get "page Main as error" and my application does not work anymore
if i do this then my application comesback to life
//dojo.require("dojox.charting.action2d.MouseZoomAndPan");
i create a new application and i only had this on top of the main page and get
the error again
dojo.require("dojox.charting.action2d.MouseZoomAndPan");
in the wavemaker debugger i get "error parsing pages/Main/Main.js"
I am using AMD style but this may help you. I was able to find the missing piece with your link.
Dojo toolkit had some slightly incorrect code here (MouseZoomAndPan section), but it will give you the code I have below and is why I have commented out code after MouseZoomAndPan(...);
define(["dojox/charting/themes/Claro", "dojox/charting/Chart", "dojox/charting/axis2d/Default"
, "dojox/charting/plot2d/Lines", "dojox/charting/action2d/MouseZoomAndPan"],
function (claro, Chart, Default, Lines, MouseZoomAndPan) {
return {
createZoomableChart: function () {
"use strict";
var chart = new Chart("mouseZoom");
chart.addAxis("x", { type: Default, enableCache: true })
.addAxis("y", { vertical: true })
.addPlot("default", { type: Lines, enableCache: true })
.addSeries("Series A", [1, 2, 2, 3, 4, 8, 6, 7, 5]);
var mzap = new MouseZoomAndPan(chart, "default");//, { axis: "x", "none" });
chart.render();
},
init: function() {
this.createZoomableChart();
}
};
});
I'm working on adding some image editing tools using the Pixastic library. The idea is that the user can choose an aspect of the image or tool they want from a select box, then the tool will show up below the select box (I'm using select2) and the user can edit via a slider. Here's what I have so far:
# This seeds the select2 options list
imageToolsList = [
{id: 'bl', text: 'Blur'}
{id: 'bc', text: 'Brightness/Contrast'}
{id: 'ca', text: 'Color Adjust (RGB)'}
...
]
#Creates a select box and calls imageTooler function when the value of the box is changed
$(".image_tools_select").each ->
$(#).select2
placeholder: "Select an adjustment tool."
data: imageToolsList
$(#).on("change", (i) ->
imageTooler JSON.stringify(
val: i.val
clipName: $(#).closest('.clip').attr('id')
)
)
# The function called on the value that the select box is changed to
imageTooler = (i) ->
imageData = jQuery.parseJSON(i)
iId = imageData.val
imageClipName = imageData.clipName
newTool = "<div id=#{iId}><label>#{iId}</label><div class='slider#{iId}'></div></div>"
$("##{imageClipName}").find(".imagetoolfields").append newTool
This succeeds in appending the name of the editing tool and the correct slider div beneath the select box when a tool is chosen, but what I'd really like is dynamically create a slider function for that particular tool and image (there are multiple images on a page, each with their own editing toolbelt). Here's a slider function that works for a the 'Blur' tool:
$('.sliderbl').slider
min: 0
max: 5
value: 0.5
step: 0.1
range: "min"
slide: (event, ui) ->
$("#img_snapshot_16").pixastic("blurfast", {amount:ui.value})
Is there a way to expand the imageToolsList so that it looks something like:
imageToolsList = [
{id: 'bl', text: 'Blur', tool: $("##{imageClipName}").pixastic("blurfast", {amount:ui.value}), sliderVals: {min: 0, max: 5, value: 0.5, step: 0.1, range: "min"} }
...
]
and then dynamically create the jQuery slider functions for each tool in imageTooler, as is being done with the div and slider div?
Comments get a little tedious for anything complicated so I'll just go ahead and map it all out. I've made a few assumptions about what is defined where and when but I don't think the assumptions matter that much.
We'll start with a simplified case: just one object similar to what you have in imageToolsList:
{
id: 'bl'
text: 'Blur'
sliderVals: { min: 0, max: 5, value: 0.5, step: 0.1, range: "min" }
tool: (imageClipName) ->
(event, ui) -> $("##{imageClipName}").pixastic("blurfast", {amount:ui.value})
}
I've tweaked the order a little bit and switched tool to a function which returns a function. We don't want the pixastic call to happen while you're defining the object literals in imageToolsList, making tool a function allows us to defer the pixastic execution until later. Since we (presumably) don't know what imageClipName should be when we define imageToolsList, we need another function to allow us to fill that in with, again, calling pixastic until even later; hence the function returning a function trick.
Given one of these, how do we build a slider call? All we need to do is copy sliderVals (to avoid changing imageToolsList) and fill in the slide function:
sliderDef = { id: 'bl', ... }
doTheSliderThing = (imageClipName) ->
slide = sliderDef.tool(imageClipName)
args = $.extend({ }, sliderDef.sliderVals, slide: slide)
$(".slider#{sliderDef.id}").slider(args)
# And make it all go and pixastic-ify `#pancakes`.
doTheSliderThing('pancakes')
tool is a function which returns a callback function so sliderDef.tool(imageClipName) gives us the appropriate
(event, ui) -> $(...).pixastic(...)
callback function.
If we have an id and we want the appropriate entry from imageToolList, then we have to go looking for it:
# If the list is short:
[sliderDef] = (o for o in imageToolList when o.id == id)
The for loop gives you an array back and then the [sliderDef] unwraps that array and leaves the single result in sliderDef. If the imageToolList is longer then you'd want to short-circuit the loop and bail out as soon as you have a result:
# Longer list, bail out as soon as we've found what we're looking for.
for o in imageToolList when o.id == 2
sliderDef = o
break
or better, rework the structure of imageToolList to allow direct access by id:
# Even longer list: allow direct access by `id`.
imageToolList =
bl: { text: 'Blur', sliderVals: { ... }, ... }
...
and then we can do things like this:
doTheSliderThing = (id, imageClipName) ->
sliderDef = imageToolList[id]
slide = sliderDef.tool(imageClipName)
args = $.extend({ }, sliderDef.sliderVals, slide: slide)
$(".slider#{id}").slider(args)
# And make it all go and pixastic-ify `#pancakes` using `'bl'`.
doTheSliderThing('bl', 'pancakes')
Or, if you prefer to be terse:
doTheSliderThing = (id, imageClipName) ->
$(".slider#{id}").slider($.extend({ }
imageToolList[id].sliderVals
slide: imageToolList[id].tool(imageClipName)
))
Update for the comments: If you have this:
sliderDefs =
bl: { text: 'Blur', sliderVals: { ... }, ... }
...
Then you can build the stuff that slider2 wants like this:
opts = ({id: k, text: v.text} for k,v of sliderDefs)
Is there any way to show the y-value of every bar above the actual bar in a dojox columns-type chart? Here's my code (which I got from http://glenurban.me.uk/A55D03/Blog.nsf/dx/DojoChart.htm):
<script type="text/javascript">
dojo.require("dojox.charting.Chart2D");
var series1 = [ 3, 2, 5, 3, 6, 4];
var xlabels = [
{value : 1, text : "a"},
{value : 2, text : "b"},
{value : 3, text : "c"},
{value : 4, text : "d"},
{value : 5, text : "e"},
{value : 6, text : "f"},
{value : 7, text : "g"}];
var chart1;
makeCharts = function() {
chart1 = new dojox.charting.Chart2D("simplechart");
chart1.addPlot("default", {
type : "Columns",
gap : 2
});
chart1.addAxis("x", {
labels : xlabels
});
chart1.addAxis("y", {
vertical : true,
min : 0
});
chart1.addSeries("Series1", series1);
chart1.render();
};
dojo.addOnLoad(makeCharts);
</script>
Unfortunately, it looks like this is a feature that still hasn't been included into the later versions of Dojo: see ticket, and this ticket (found from this mailing list.)
I've tried checking to see if there is a way to use Dojo GFX to get the values from your series of data... and then overlay that on to the chart. But, doing labels that way is going to be kludgy (and this all depends on if Dojo GFX's surface allows for a surface overlay on a SVG chart object already created.)
There's always the option to add this functionality in to the Dojo Chart2D library itself. But whenever you do that, unless you are able to get your patches changed with the main Dojo Chart2D branch, you'll want to be careful not to overwrite your custom-made library with a newer version of Chart2D in the future.
However, if you aren't stuck to Dojo for this particular need, have you considered using jQuery? There are many different chart/graph libraries out there, these days:
Highcharts (examples)
Flot (examples)
Tuftegraph (examples)
Also, Google Chart Tools is pretty nice, if jQuery isn't your thing.
Or... JavaScript InfoVis Toolkit is great, as well.
For information, it's now possible to have columns chart with label. For exemple :
addPlot("default", {type: "ClusteredColumns", labels: true,labelStyle:"outside" or "inside" })