Short version:
I'm updating some old libs to try to get them in AMD/requirejs format for management, but some of them have dependencies on old code.
Main Question:
I'm primarily confused as to what to list in the:
define(['what','goes','here'],function('what','needs','to','be','here'){})
and what goes in the shim dependencies list when dealing with combinations of AMD and non-AMD tools, and things like jquery-ui and jquery plugins.
ADDITIONAL INFO
The problem:
One of the older libraries depends on .draggable() from (and older version of) jquery-ui, some old version of a jquery plugin called 'onScreen', a spinner modal called spin.js -- all of which are not AMD friendly. (I also implemented an update to an AMD friendly new version of dropzone)
Two of the older libraries also use a modal library called vex which requires a dependency of vex.dialog. The existing site has an old version that is uglified.
I'm trying not to completely revamp this code as the longer term goal would be to remove those dependencies entirely, but I may not have to the time now to figure out what they are doing.
I've tried every combination of define(['list','of','stuff']) I can think of, but some of the libraries like spin (class Spinner), vex/vex.dialog and onScreen still don't always load properly. (sometimes I get one, but then lose another)
Can I define a shim AND include a list of AMD modules in the define? And if so, do I include the AMD list of dependencies in the shim in require.config? What goes where and why?
My libraries:
ImageSelector (requires AwsHelper, Utilities and ImageLayout below)
-- uses jquery (AMD), dropzone (AMD) and an old jquery plugin called jquery.onscreen.js (non-AMD)
-- depends on vex and vex.dialog (non-AMD)
-- uses .draggable() from old jquery-ui (non-AMD)
-- calls a global function 'loadSpinner' which uses spin.js (non-AMD -- see Utilities below)
ImageLayout (requires AwsHelper and Utilities - has attached instance of ImageSelector as a property .selector for methods that work in conjunction with the selector)
-- uses jquery (AMD)
-- also utilizes vex/vex.dialog (non-AMD)
Utilities
-- I'm trying to move the loadSpinner() function that requires spin.js (class Spinner, non-AMD) into this
-- I've managed thus far to avoid dependencies on things like jquery in this by refactoring code
Long version:
I'm trying to update some website code to use require.js for dependency management and to make the code more portable. But I'm running into a number of dependencies on old code that don't appear to be AMD-ready. Where possible, I'm trying to replace these with updated code and/or replace their functionality entirely, but in a number of cases, the code is minified and it's difficult to get a quick handle on what it's doing.
Rather than getting mired in minutia of trying to figure out and either replace or update these things, I read about how 'shim' can be used in some cases to handle these types of non-AMD code, but I'm still unclear on how to configure them.
Here's what I have... I have three libraries I have updated and one new one I created. One called 'ImageSelector' builds a web-gui to allow uploading files with dropzone. (My reason for updating it is that I converted it from using a local filesystem to using Amazon AWS S3 storage.) A second one called 'ImageLayout' handles the business logic of creating a product layout of photos selected by the user. (ImageSelector is split into two frames, a left one for uploading and sorting user files into folders, a right one for building the layout. Thus ImageSelector is dependent on ImageLayout)
The third library is one I created just with a number of repeatedly use 'utility' functions used across the website. There is an existing structured-code version of this in global scope with just a list of functions like roundPrecision(), sanitizeFilename(), escapeRegex(), baseName(), etc. I was going to build this with static methods, but then realized I can customize it if I spawn instances of it instead (e.g. I can change the characters 'sanitized' for different applications with global instance parameters)
The new one is the AwsHelper which is not a problem as it's entirely new code and handles all the interaction with Amazon AWS and S3. It was created in a define() AMD format while the others I have converted to define()/export format.
Anyway, some functions of the ImageLayout can be used independently by the order system, but for the most part, it's used as a dependency of the ImageSelector. AwsHelper is used mostly by ImageSelector but there are two functions in ImageLayout that utilize it. All of the above use the Utilities library.
My guess is something like this in the config (using ImageSelector as an example, but I'm wondering if "jquery" an "dropzone" need to be in there or the function define or both?)
shim: {
"ImageSelector": {
deps: ["jquery","dropzone","vex","vex.dialog","jquery-ui","jquery.onscreen"]
}
}
Additional require.js semantic questions:
(I'll post these separately if needed, but they may be short-answer and related)
Is there anything anywhere that shows how require.js searches for files? e.g. I understand about r.js for uglifying, but in some cases I can't track down the original code for these things. Can filenames include .min.js on the end or version numbers and will require.js still find them or should I rename and/or symlink files? e.g. jquery.js vs jquery-1.7.min.js for example.
The spin.js referenced above actually includes a class definition called 'Spinner'. How do I represent that in the config/shim?
Well, I posted that based on my experimenting the last 3 days riddled with failures, expecting more trouble. But apparently, shim was straightforward and having the required libs in more than one place (shim definitions and define([])) wasn't a problem.
I took a blind guess going through the examples on the require.js and came up with this configuration and amazingly it worked first try! (which makes me nervous as this is the first time I've gotten this code to work with no errors since trying to import it to require.js)
Here's what I came up with:
requirejs.config({
"baseUrl": "/js/lib",
"paths": {
"ImageSelector" : "../awsS3/ImageSelector",
"ImageLayout" : "../awsS3/ImageLayout",
"AwsHelper" : "../awsS3/AwsHelper",
"Utilities" : "../awsS3/Utilities"
},
"shim": {
"jquery.onscreen": {
"deps": ['jquery'],
"exports": 'jQuery.fn.onScreen'
},
"jquery-ui" : ['jquery'],
"vex.dialog" : ['jquery','vex'],
"vex" : ['jquery'],
"spin" : {
"exports": "Spinner"
},
"aws-sdk" : {
"exports" : "AWS"
},
"Utilities": ["spin"],
"AwsHelper": ["jquery","aws-sdk"],
"ImageSelector": {
"deps" : ["jquery","dropzone","vex","vex.dialog","jquery-ui","jquery.onscreen","ImageLayout","AwsHelper","Utilities"]
},
"ImageLayout": {
"deps" : ["jquery","vex","vex.dialog","Utilities"]
}
}
});
I also noted that some of the version naming was handled in the paths, thus I just named my libs in the paths and got rid of my "app/" directory reference altogether.
I was wondering if anyone is familiar with putting polymer dart and graphs together. I'm looking into using Google graph APIs, however I wanted to put some feelers out there if anyone was handling them different.
I think SVG + Polymer makes for a great foundation for charting libraries!
I experimented with SVG and data-binding a while back and was very happy with the results. My repository of experiments is here: https://github.com/justinfagnani/svg-binding
Custom elements would be a really nice way to allow for chart configuration. You could offer a default bar chart with a tag like <chrt-bar-chart data="{{ myData }}">, but allow incremental customization by supplying more attributes or child elements:
<chrt-chart>
<chrt-x-axis start="10" end="100"></chrt-x-axis>
<chrt-grid spacing="100"></chrt-grid>
<chrt-bars>
<chrt-series name="Series One" data="{{ myData }}"></chrt-series>
<chrt-series name="Series Two" data="{{ myOtherData }}"></chrt-series>
</chrt-bars>
</chrt-chart>
For a rough example.
Of course, you probably don't want to write your own configurable charting library, so if you check the bar chart example in my repo you can see how much work it is to roll you own chart from scratch. Being able to write SVG with data-bindings made it simple enough that you might consider doing it without a library.
Here I am, again. With another question concerning cakephp-2.5 and the plugin 'highcharts'.
I've been looking at the demo's an all the different things I could find were the extendings from the controllers. But... that isn't required because it's a plug, am I right?
So, I have included th plugin to my loadings inside the bootstrap file, and when I'm trying to render my HighChart I'm receiving the following error;
Error: Chart: "1" could not be found. Ensure that Chart Name is the same string that is passed to $this->HighCharts->render() in your view.
But the demos are working fine! Any idea what I f*cked up? The names are the same, I even renamed them to 'asd' ( both! ) and it still doesn't work. ^^"
I know this is an incredibly late response but for the benefit of those still experiencing problems with this, the CakePHP 2.* Highcharts plugin has been updated and is compatible up to CakePHP version 2.5.7.
Do note however that in order to maintain product name consistency throughout the repo, all previous references to "HighCharts" have been changed to "Highcharts" and "high_charts" is now simply "highcharts" . So for eg. you now have to call $this->Highcharts->render() where before you would have used $this->HighCharts->render().
The plugin was not yet compatible with CakePHP 2.5. Right now as we speak the developer is working on a new release for 2.5. :)
In CakePHP 2.5, you can avoid the error above and render your chart by calling it.
For example from within index() within your controller, use:
$this->bar();
In this example, bar() is the name of the function containing your chart.
I am trying to get the percentage value for the point in a pie chart to show in the legend. I can't simply use the this.y value because my values do not add up to 100 like in many of the examples out there. The percentage is a calculation of the totals for each point.
I noticed in a recent post that the issue has been resolved and has been closed. I looked at the source code and did notice the new code.
So I downloaded the Highcharts 3.0.2 source code and updated my source code to reference it, but I cannot find that updated code in the source. It shows it there in 3.0.2 in GitHub, but it's missing in 3.0.2 in the package from the website.
Is there a source version available that has this update properly applied? I don't want to have to manually add it like I did by merging the GitHub version with the Zip from Highcharts.com.
Take look at thread https://github.com/highslide-software/highcharts.com/issues/897.
Correct percetange is available in the master branch
http://github.highcharts.com/master/highcharts.src.js
Hiho,
I use the ckeditor on my website for special textareas like forum
or signatures.
But I have a problem with the output. I use ZF2 and would like to
use ZendMarkup to render the output bbcode back in html.
But at every time I call
$bbcode->render(...)
I got the error
There is no Zend_Markup_Root markup.
The ZendMarkup is an extension inspired by the Zend_Markup from ZF1.
But I can't find any thing on API or other guides.
Does someone has any idea what as the problem is?
The ZendMarkup library is very old (last update is 10 months ago!) so I wouldn't use such library. If you would like, I think I traced the error down.
On this line there is a reference to Zend_Markup_Root while that should be ZendMarkup\Renderer\Markup\Html\Root. Try to change that line and see what happens.
Another way is to replace the ZendMarkup library with another library which does work and is updated regularly. An example is Decoda. If you load mjohnson/decoda in your composer.json, you can use Decoda in your Zend Framework 2 application:
<?php
use Decoda\Decoda;
$parser = new Decoda($bbcode);
$html = $parser->parse();
With tools like composer, there is no need to use solely Zend* components when there are better alternatives.