how to load pagedown editor with requirejs - javascript

I am fairly new with requirejs. I have managed to use requirejs with AMD modules such as ace editor etc just fine. I saw on stackoverflow that it is theoretically possible to load normal js with requirejs.
After several attempts, research and some frustrations I have failed to load the pagedown editor with requirejs without errors.
Here is my code:
requirejs.config({
paths: {
jquery: "jquery-2.0.2.min",
bootstrap: "bootstrap.min",
ace: "ace/lib/ace",
prettify: "pagedown/prettify",
pdconv: "pagedown/Markdown.Converter",
pdsanity: "pagedown/Markdown.Sanitizer",
pdeditor: "pagedown/Markdown.Editor",
pdextra: "pagedown/Markdown.Extra",
},
shim: {
"bootstrap": {
deps: ["jquery"]
}
}
});
require(['jquery', 'bootstrap', 'ace/ace', 'prettify', 'pdconv', 'pdeditor', 'pdsanity', 'pdextra'],
function($, Bootstrap, ace, prettyPrint) {
var input = $('#wmd-input').text();
var editor = ace.edit("wmd-input");
var conv = Markdown.getSanitizingConverter();
Markdown.Extra.init(conv, {
extensions: "all",
highlighter: "prettify"
});
var md = new Markdown.Editor(conv);
md.hooks.chain("onPreviewRefresh", prettyPrint); // google code prettify
md.run(editor);
editor.focus();
});
Here is the error I keep getting:
Uncaught TypeError: undefined is not a function Markdown.Editor.js:185
I keep getting that error after each keystroke.
The files are indeed loaded via requirejs but does not work. Is there an easy way to make the pagedown editor work with requirejs or it is not possible.
Any help/advise/suggestions would be greatly appreciated.
Thanks

you can use like this:
requirejs.config({
paths: {
'markdown-converter': "../Scripts/markdown/Markdown.Converter",
'markdown-sanitizer': '../Scripts/markdown/Markdown.Sanitizer'
},
shim: {
"markdown-sanitizer": {
deps: ["markdown-converter"],
exports: "markdown-sanitizer"
}
}
});
// create markdown module
define("markdown",["markdown-converter","markdown-sanitizer"],function(mc, ms) {
return window.Markdown;
});
define("markdown",function(markdown) {
var converter = new Markdown.Converter();
return {
converter:converter
}
});

Related

RequireJS, Stripe and dependency (Vue component)

I am using the Stripe library and I've got a vue component that is dependent on the library being loaded first.
I found RequireJS (2.3.6) and having never used it, am just wondering if I'm doing things correctly
I trie using the answer in this question but I can't get it working Load Stripe.js with Require.js
requirejs.config({
paths: {
'stripe': 'https://js.stripe.com/v3/'
},
shim: {
'stripe': {
exports: 'Stripe',
deps:['my-component.js']
}
}
});
I don't get any console errors but I don't see my component either
I worked it out in the end
requirejs.config({
shim: {
form: {
deps: [ 'stripe' ]
}
},
paths: {
stripe: 'https://js.stripe.com/v3/?noext',
form: '/js/my-component'
}
});
require(['stripe', 'form'], function($) {
return {};
});

How to inclue Jquery TimeEntry plugin with RequireJS

I am new working with requirejs, I have an old Asp.net Webform application that I am trying to apply some javascript module loading using requirejs. In this app I am using a jquery plugin named Time Entry, but is not working if I use requirejs, only works if I added the reference the old way. Here is my requirejs configuration and declaration.
In the aspx file:
<script src="../../scripts/require.js"></script>
<script>
require(["../../app/shared/require.config"],
function (config) {
require(["appIncidentTracking/incident-type-init"]);
});
</script>
My require.config file is like this:
require.config({
baseUrl: '../../scripts',
paths: {
app: '../../app/utilization-management',
appIncidentTracking: '../../app/incident-tracking',
jquery: 'jquery-3.1.1.min',
jqueryui: 'jquery-ui-1.12.1.min',
jqueryplugin: '../../js/jquery.plugin.min',
timeentry:'../../js/jquery.timeentry.min',
handlebars: 'handlebars.amd.min',
text: 'text',
moment: 'moment.min',
datatable: 'DataTables/jquery.dataTables.min',
blockUI: 'jquery.blockUI.min',
shared: '../../app/shared',
bootstrap: 'bootstrap.min',
'bootstrap-datepicker': 'bootstrap-datepicker.min',
'bootstrap-multiselect': '../js/bootstrap-multiselect/bootstrap-multiselect'
},
shim: {
bootstrap: {
deps: ['jquery']
},
'bootstrap-multiselect': {
deps: ['bootstrap']
},
timeentry: {
deps:['jquery', 'jqueryplugin']
}
}
});
and in my incident-type-init.js I only call the plugin:
/**
* Incident Type Init page
* #module incident-type-init
*/
define(function (require) {
var $ = require('jquery'),
jqueryplugin = require('jqueryplugin'),
timeentry = require('timeentry'),
bootstrap = require('bootstrap');
/**
* Jquery ready function
*/
$(function () {
$('.js-timeentry').timeEntry();
});
});
but when the application runs I got this error:
$.JQPlugin.createPlugin is not a function, it is like does not find the jquery.plugin.js
I checked the network tab in chrome and both files are loaded, jquery.plugin.js and jquery.timeentry.js
UPDATE: In our application, we are using Asp.net MasterPages, and there we are loading an old jquery version, 1.5.1, and I use that MasterPage in my page, but when I check the network tab in chrome, is loading the MasterPage scripts first,then all the requirejs stuff.
and the funniest part is that sometimes work, sometimes not.
Any clue?
The module jqueryplugin needs to have jQuery already loaded for it. It is not an AMD module because it does not call define. So you need an additional entry in shim for it:
jqueryplugin: ["jquery"]
The above is short for:
jqueryplugin: {
deps: ["jquery"]
}
I don't think your code is syntactically correct.
Try this:
1. Your script should refer to the require.config in data-main.
<script data-main="PATH_TO_CONFIG_FILE" src="../../scripts/require.js"></script>
2. Quotes are missing in paths of the config file. Instead it should be like this
require.config({
baseUrl: '../../scripts',
paths: {
"app": '../../app/utilization-management',
"appIncidentTracking": '../../app/incident-tracking',
"jquery": 'jquery-3.1.1.min',
"jqueryui": 'jquery-ui-1.12.1.min',
"jqueryplugin": '../../js/jquery.plugin.min',
"timeentry":'../../js/jquery.timeentry.min',
"handlebars": 'handlebars.amd.min',
"text": 'text',
"moment": 'moment.min',
"datatable": 'DataTables/jquery.dataTables.min',
"blockUI": 'jquery.blockUI.min',
"shared": '../../app/shared',
"bootstrap": 'bootstrap.min',
"bootstrap-datepicker": 'bootstrap-datepicker.min',
"bootstrap-multiselect": '../js/bootstrap-multiselect/bootstrap-multiselect'
},
shim: {
"bootstrap": {
deps: ["jquery"]
},
"bootstrap-multiselect": {
deps: ["bootstrap"]
},
"timeentry": {
deps:["jquery", "jqueryplugin"],
exports:"timeentry"
}
}
});
3. Since your module has dependencies, list them like this:
define(["jqueryplugin","timeentry","bootstrap"],function(jqueryplugin,timeentry,bootstrap) {
$(function () {
$('.js-timeentry').timeentry();
});
});

RequireJS: CDN fallback not working with Kendo

Struggling to set up RequireJS with KendoUI over CDN and can't get fallback to work.
... from amazing burkeholland A Kendo UI ASP.NET MVC SPA Template
This what I begin with :
define([
'../Scripts/kendo/2014.1.416/kendo.router.min',
'../Scripts/kendo/2014.1.416/kendo.view.min',
'../Scripts/kendo/2014.1.416/kendo.fx.min'
], function () {
return kendo;
})
and it works fine.
If kendo.core.min is not defined, first statement in kendo.router says define(["./kendo.core.min"] and it is loaded from proper location.
However, when I try to use CDN with fallback location like this :
requirejs.config({
paths: {
'router': ['//cdn.kendostatic.com/2014.1.416/js/kendo.router.min', '../Scripts/kendo/2014.1.416/kendo.router.min'],
'view': ['//cdn.kendostatic.com/2014.1.416/js/kendo.view.min', '../Scripts/kendo/2014.1.416/kendo.view.min'],
'fx': ['//cdn.kendostatic.com/2014.1.416/js/kendo.fx.min', '../Scripts/kendo/2014.1.416/kendo.fx.min']
}
});
define([
'router',
'view',
'fx'
], function () {
return kendo;
});
requireJS tries to load kendo.core.min from baseUrl location, not fallback location.
Am I missing something?
However, if I try something like this :
requirejs.config({
paths: {
k: ['//cdn.kendostatic.com/2014.1.416/js', '../Scripts/kendo/2014.1.416']
}
});
define([
'k/kendo.router.min',
'k/kendo.view.min',
'k/kendo.fx.min'
], function () {
return kendo;
})
Fallback doesn't work at all... what am I missing?

Require js, TweenMax, IE8

I have been wrestling a bit to get GreenSock JS (TweenMax) to work with require.js. I finally got it working in modern browsers, but IE8 is throwing weird errors.
My main require config file:
require.config({
baseUrl: '/ui/js',
paths: {
jquery: 'modules/libs/jquery-1.10.2',
tweenmax: 'modules/vendor/greensock-js/TweenMax'
},
shim: {
jquery: {
deps: ['constants'],
exports: 'jQuery'
},
tweenmax: {
exports: 'TweenMax'
}
}
});
My 'module' file:
define([
'jquery',
'tweenmax'
], function($, TweenMax) {
// Subscribe to the 'toggleFlyout' event
// The event is used to open the flyout menu
$(document).on('toggleFlyout', function() {
var $html = $('html');
var $page = $('.page');
var openClass = 'js-flyout-open';
if ( !$html.hasClass(openClass) ) {
TweenMax.to($page, 0.2, {left:246, onStart: function() {
$html.addClass(openClass);
}});
} else {
TweenMax.to($page, 0.2, {left:0, onComplete: function() {
$html.removeClass(openClass);
}});
}
});
// Publish the 'toggleFlyout' event
// The event is published when the user click the menu button or the page overlay
$(document).on('click', '.main-header__nav a, .toggle-flyout', function(event) {
event.preventDefault(event);
$(this).trigger('toggleFlyout');
});
});
IE8 is throwing the following errors:
Expected identifier TweenMax.js, line 2295 character 4
'TweenMax' is null or not an object flyout.js, line 38 character 4
Note, that the code is working fine in modern browsers.
TweenMax and Jquery are AMD modules since a very early version you don't not need shim config for them..
You should also compile your solution.
Requirejs is better to run as dependency manager and packager than a module loader.
Use
https://github.com/gruntjs/grunt-contrib-requirejs
for reference.

Using TimelineJS and AMD

I'm looking for a way to use TimelineJS with RequireJS's implementation of AMD. I can get things partially working, e.g.
define(["storyjs", "timelinejs", ...], function(storyjs, timelinejs, ...) {
createStoryJS({
type: 'timeline',
width: '800',
height: '600',
source: { ... }, // sample JSON
embed_id: 'timeline-embed'
});
});
The above produces a timeline, but storyjs (which exports VMM in my RequireJS config) always attempts to perform its own loading of the TimelineJS libraries, which invariably produces errors in the Firebug/developer tools console.
I'm either looking for a way to programmatically build the TimelineJS object (which I couldn't find any examples of), tell StoryJS to not bother loading libs using its mechanism (because I've already provided them) and in general integrate TimelineJS with an AMD solution.
Any suggestions?
UPDATE:
RequireJS configuration used, below. For my own personal use I have a tendency to rename JS libraries and append their version numbers.
var require = {
waitSeconds: 5,
paths: {
"app": "../js/app"
// ** Libraries
,"backbone": "../js/lib/backbone-1.1.0.min"
,"bootstrap": "../js/lib/bootstrap-3.0.2.min"
,"jquery": "../js/lib/jquery-1.10.2.min"
,"jquery-ui": "../js/lib/jquery-ui-1.10.3.min"
,"json2": "../js/lib/json2"
,"underscore": "../js/lib/underscore-1.5.2.min"
// ** TimelineJS
,"storyjs": "../js/lib/storyjs-embed-2.0.3.min"
,"timelinejs": "../js/lib/timeline-2.26.3.min"
// ** RequireJS Plugins
,"domready": "../js/lib/plugins/requirejs/requirejs-plugin-domready-2.0.1"
,"i18n": "../js/lib/plugins/requirejs/requirejs-plugin-i18n-2.0.4"
,"text": "../js/lib/plugins/requirejs/requirejs-plugin-text-2.0.10"
},
shim: {
'backbone': { deps: ['underscore'], exports: 'Backbone' }
,'bootstrap': { deps: ['jquery'] }
,'jquery': { exports: '$' }
,'json2': { exports: 'JSON' }
,'storyjs': { exports: 'VMM' }
,'timelinejs': { deps: ['storyjs'] }
,'underscore': { exports: '_' }
}
};
It took digging into the TimelineJS source a bit to see what exactly createStoryJS was actually doing and then looking at some of the other source code, but I finally answered my own question. In fact, it is relatively straightforward and very similar to my early attempts to make this work before posting my question above to StackOverflow.
RequireJS Config:
// RequireJS config
var require = {
waitSeconds: 5,
paths: {
...
// ** TimelineJS
,"storyjs": "../js/lib/plugins/jquery/storyjs-embed-2.0.3.min"
,"timelinejs": "../js/lib/plugins/jquery/timeline-2.26.3.min"
...
},
shim: {
...
,'storyjs': { deps: ['jquery'], exports: 'VMM' }
,'timelinejs': { deps: ['jquery', 'storyjs'] }
...
}
};
Module instantiating TimelineJS object:
define([ "json2", "timelinejs"], function(JSON, timelinejs) {
var js_version = "2.24",
config = {
version: "2.24", // DEFAULT: 2.x
debug: true,
type: 'timeline',
source: {...} // Sample JSON
};
var timeline = new VMM.Timeline("timeline-embed", 800, 600);
timeline.init(config);
});
This is, at the very least, one example for handling the TimelineJS instantiation using RequireJS/AMD; it is also how I've decided to solve my original issue.

Categories