I have a project where I would like to use this theme. I just downloaded it and put its scripts into resources/assets/js directory. This is how I am calling all the scripts, after I run gulp, that I need for the page:
<!-- Scripts -->
<script
type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/material/material.min.js"></script>
<script type="text/javascript" src="/js/material/ripples.min.js"></script>
<script>$.material.init()</script>
<!-- Checkbox, Radio & Switch Plugins -->
<script src="/js/bootstrap-checkbox-radio.js"></script>
<!-- Notifications Plugin -->
<script src="/js/bootstrap-notify.js"></script>
<!-- Paper Dashboard Core javascript and methods for Demo purpose -->
<script src="/js/paper-dashboard.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.notify({
icon: 'ti-gift',
message: "Welcome to <b>Paper Dashboard</b> - a beautiful Bootstrap freebie for your next project."
},{
type: 'success',
timer: 4000
});
});
</script>
<script src="/js/app.js"></script>
But then I can't get bootstrap notify or tooltip work, if I remove app.js I get it working again, but then vue components are not working.
This is the app.js:
/**
* First we will load all of this project's JavaScript dependencies which
* include Vue and Vue Resource. This gives a great starting point for
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
var VueResource = require('vue-resource');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the body of the page. From here, you may begin adding components to
* the application, or feel free to tweak this setup for your needs.
*/
Vue.component('video-upload', require('./components/VideoUpload.vue'));
Vue.component('video-player', require('./components/VideoPlayer.vue'));
Vue.component('video-voting', require('./components/VideoVoting.vue'));
Vue.use(VueResource);
const app = new Vue({
el: 'body',
data: window.videoApp
});
And this is the gulpfile:
const elixir = require('laravel-elixir');
require('laravel-elixir-vue');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(mix => {
mix.copy('resources/assets/js', 'public/js');
mix.copy('resources/assets/css', 'public/css');
mix.sass('app.scss')
.webpack('app.js');
});
Update
I have required as craig_h suggested at the bottom of my bootstrap.js files like this:
require('./bootstrap-checkbox-radio.js');
require('./bootstrap-notify.js');
require('./paper-dashboard.js');
But I get an error:
paper-dashboard.js?16eb:26Uncaught ReferenceError: lbd is not
defined(…)
This is the script paper-dashboard.js:
var fixedTop = false;
var navbar_initialized = false;
$(document).ready(function(){
window_width = $(window).width();
// Init navigation toggle for small screens
if(window_width <= 991){
lbd.initRightMenu();
}
// Activate the tooltips
$('[rel="tooltip"]').tooltip();
});
// activate collapse right menu when the windows is resized
$(window).resize(function(){
if($(window).width() <= 991){
lbd.initRightMenu();
}
});
lbd = {
misc:{
navbar_menu_visible: 0
},
initRightMenu: function(){
if(!navbar_initialized){
$off_canvas_sidebar = $('nav').find('.navbar-collapse').first().clone(true);
$sidebar = $('.sidebar');
sidebar_bg_color = $sidebar.data('background-color');
sidebar_active_color = $sidebar.data('active-color');
$logo = $sidebar.find('.logo').first();
logo_content = $logo[0].outerHTML;
ul_content = '';
// set the bg color and active color from the default sidebar to the off canvas sidebar;
$off_canvas_sidebar.attr('data-background-color',sidebar_bg_color);
$off_canvas_sidebar.attr('data-active-color',sidebar_active_color);
$off_canvas_sidebar.addClass('off-canvas-sidebar');
//add the content from the regular header to the right menu
$off_canvas_sidebar.children('ul').each(function(){
content_buff = $(this).html();
ul_content = ul_content + content_buff;
});
// add the content from the sidebar to the right menu
content_buff = $sidebar.find('.nav').html();
ul_content = ul_content + '<li class="divider"></li>'+ content_buff;
ul_content = '<ul class="nav navbar-nav">' + ul_content + '</ul>';
navbar_content = logo_content + ul_content;
navbar_content = '<div class="sidebar-wrapper">' + navbar_content + '</div>';
$off_canvas_sidebar.html(navbar_content);
$('body').append($off_canvas_sidebar);
$toggle = $('.navbar-toggle');
$off_canvas_sidebar.find('a').removeClass('btn btn-round btn-default');
$off_canvas_sidebar.find('button').removeClass('btn-round btn-fill btn-info btn-primary btn-success btn-danger btn-warning btn-neutral');
$off_canvas_sidebar.find('button').addClass('btn-simple btn-block');
$toggle.click(function (){
if(lbd.misc.navbar_menu_visible == 1) {
$('html').removeClass('nav-open');
lbd.misc.navbar_menu_visible = 0;
$('#bodyClick').remove();
setTimeout(function(){
$toggle.removeClass('toggled');
}, 400);
} else {
setTimeout(function(){
$toggle.addClass('toggled');
}, 430);
div = '<div id="bodyClick"></div>';
$(div).appendTo("body").click(function() {
$('html').removeClass('nav-open');
lbd.misc.navbar_menu_visible = 0;
$('#bodyClick').remove();
setTimeout(function(){
$toggle.removeClass('toggled');
}, 400);
});
$('html').addClass('nav-open');
lbd.misc.navbar_menu_visible = 1;
}
});
navbar_initialized = true;
}
}
}
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function() {
timeout = null;
if (!immediate) func.apply(context, args);
}, wait);
if (immediate && !timeout) func.apply(context, args);
};
};
My apologizes if this is a begginers question, but I have not used webpack or browserify before so I don't know how to setup all of this.
I don't use webpack I use browserify instead, but I think the problem is that you are using packages that rely on global variables, if you want to do that then you need to use an importer, see shimming modules
However, you can usually just get away with requiring them in: /resources/assets/js/bootstrap.js like so:
require('./bootstrap-checkbox-radio.js')
require('./bootstrap-notify.js')
require('./paper-dashboard.js')
Then just running gulp
To solve this:
paper-dashboard.js?16eb:26Uncaught ReferenceError: lbd is not
defined(…)
try edit paper-dashboard.js and define lbd to the global scope using window like this:
...
window['lbd'] = {
misc:{
navbar_menu_visible: 0
},
...
Related
I'm interested in using the Monaco editor in a Vue.js backed Electron project.
Thus far:
Microsoft provides an Electron Sample (which I've run and works correctly)
There are a variety of vue.js npm repos for monaco - yet none of them seem to fully support Electron right out of the box.
The one that looks most promising is vue-monaco but I've run into issues correctly integrating it.
AMD Require?
This is the code from the Microsoft sample for using with Electron
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Monaco Editor!</title>
</head>
<body>
<h1>Monaco Editor in Electron!</h1>
<div id="container" style="width:500px;height:300px;border:1px solid #ccc"></div>
</body>
<script>
// Monaco uses a custom amd loader that overrides node's require.
// Keep a reference to node's require so we can restore it after executing the amd loader file.
var nodeRequire = global.require;
</script>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
// Save Monaco's amd require and restore Node's require
var amdRequire = global.require;
global.require = nodeRequire;
</script>
<script>
// require node modules before loader.js comes in
var path = require('path');
function uriFromPath(_path) {
var pathName = path.resolve(_path).replace(/\\/g, '/');
if (pathName.length > 0 && pathName.charAt(0) !== '/') {
pathName = '/' + pathName;
}
return encodeURI('file://' + pathName);
}
amdRequire.config({
baseUrl: uriFromPath(path.join(__dirname, '../node_modules/monaco-editor/min'))
});
// workaround monaco-css not understanding the environment
self.module = undefined;
// workaround monaco-typescript not understanding the environment
self.process.browser = true;
amdRequire(['vs/editor/editor.main'], function() {
var editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
});
</script>
</html>
The module I'm using allows for something like this:
<template>
<monaco-editor :require="amdRequire" />
</template>
<script>
export default {
methods: {
amdRequire: window.amdRequire
// Or put this in `data`, doesn't really matter I guess
}
}
</script>
I can't seem to figure out how to get the correct amdRequire variable defined in Electon + vue. I believe if i can conquer this everything else becomes simple.
The Electron FAQ mentions something about this (i think): I can not sue jQuery/RequireJS/Meteor/AngularJS in Electron
Sample Code
I put a sample project up on GitHub https://github.com/jeeftor/Vue-Monaco-Electron with the "offending" component being in ./src/renderer/components/Monaco.vue
Summary
How can I get this Monaco Editor to load correctly inside of a Vue.js component that will be run inside electron?
Thanks for any help you can offer.
I'm doing nearly the same, just without the extra vue-monaco component. After struggling quite a bit, I could solve the problem:
function loadMonacoEditor () {
const nodeRequire = global.require
const loaderScript = document.createElement('script')
loaderScript.onload = () => {
const amdRequire = global.require
global.require = nodeRequire
var path = require('path')
function uriFromPath (_path) {
var pathName = path.resolve(_path).replace(/\\/g, '/')
if (pathName.length > 0 && pathName.charAt(0) !== '/') {
pathName = '/' + pathName
}
return encodeURI('file://' + pathName)
}
amdRequire.config({
baseUrl: uriFromPath(path.join(__dirname, '../../../node_modules/monaco-editor/min'))
})
// workaround monaco-css not understanding the environment
self.module = undefined
// workaround monaco-typescript not understanding the environment
self.process.browser = true
amdRequire(['vs/editor/editor.main'], function () {
this.monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
})
})
}
loaderScript.setAttribute('src', '../node_modules/monaco-editor/min/vs/loader.js')
document.body.appendChild(loaderScript)
}
I've just taken the electron-amd sample and adjusted it a bit. I call the loadMonacoEditor function in the components' created function.
In order to not get the Not allowed to load local resource: file:///C:/.../node_modules/monaco-editor/min/vs/editor/editor.main.css problem, you also have to set
webPreferences: {
webSecurity: false
}
in your instance of the BrowserWindow.
I've got the following codeblock in the layout.js
import $ from "jquery";
import LayoutModel from 'js/models/LayoutModel';
let elements = {
$window: $(window),
$html: $('html'),
$content: $('#content')
};
let viewmodel = null;
export function init(options) {
viewmodel = new LayoutModel(options, elements);
ko.applyBindings(viewmodel, elements.$content[0]);
}
and I load it in the view with system.js and call the init() with options. The options contains values and it has to be in the view because some of it comes from the back-end model.
System.import('resources/javascript/layout').then(function(controller) {
var options = {
something: 'value'
};
controller.init(options);
});
This solution works while it's not bundled with jspm:
jspm bundle resources\javascript\layout resources\javascript\dist\layout.min.js --minify
In production I have to do it, but in this case I'm not able to use the system.import() and the .then(), because I have to load the bundled script with a normal <script> tag:
<script src="resources\javascript\dist\layout.min.js"></script>
So the question: How can I bundle and minify it and call the init() method with the options?
Thank you!
I'm creating an HTML element using Polymer, and I want it to be able to work with an ES6 class I've written. Therefore, I need to import the class first and then register the element, which is what I do:
(function() {
System.import('/js/FoobarModel.js').then(function(m) {
window.FoobarModel = m.default;
window.FoobarItem = Polymer({
is: 'foobar-item',
properties: {
model: Object // instanceof FoobarModel === true
},
// ... methods using model and FoobarModel
});
});
})();
And it works well. But now I want to write a test HTML page to display my component with some dummy data:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
<script src="/bower_components/system.js/dist/system.js"></script>
<script>
System.config({
map:{
traceur: '/bower_components/traceur/traceur.min.js'
}
});
</script>
<link rel="import" href="/html/foobar-item.html">
</head>
<body>
<script>
(function() {
var data = window.data = [
{
city: {
name: 'Foobar City'
},
date: new Date('2012-02-25')
}
];
var view;
for (var i = 0; i < data.length; i++) {
view = new FoobarItem();
view.model = data[i];
document.body.appendChild(view);
}
})();
</script>
</body>
</html>
Which isn't working for one simple reason: the code in the <script> tag is executed before Polymer registers the element.
Thus I'd like to know if there's a way to load the ES6 module synchronously using System.js or even better, if it's possible to listen to a JavaScript event for the element registration (something like PolymerElementsRegistered)?
I've tried the following without success:
window.addEventListener('HTMLImportsLoaded', ...)
window.addEventListener('WebComponentsReady', ...)
HTMLImports.whenReady(...)
In the app/scripts/app.js script from the polymer starter kit, they use auto-binding template and dom-change event
// Grab a reference to our auto-binding template
var app = document.querySelector('#app');
// Listen for template bound event to know when bindings
// have resolved and content has been stamped to the page
app.addEventListener('dom-change', function() {
console.log('Our app is ready to rock!');
});
Also check this thread gives alternatives to the polymer-ready event.
I an writing a service that is to be used in multiple independent websites. However, at some points it needs to trigger different code depending on what website it is used in. I want to keep this per website code separate from the base service.
Here is some example code demonstrating the design I want (although it isn't working):
var baseModule = angular.module('baseModule', []);
baseModule.service('baseService', function() {
this.func = function() {
return ["first",
/* TODO somehow get from appropriate
service in website module */
"FIXME",
"end"];
};
});
var website1 = angular.module('website1', ['baseModule']);
website1.service('website1Service', function() {
this.someCustomValue = function() {
// Note that while this is a constant value, in
// the real app it will be more complex,
// so replacing this service with a constant provider won't work.
return "someValue";
}
});
// TODO : somehow link website1Service.someCustomValue to baseService
var website2 = angular.module('website2', ['baseModule']);
website2.service('website2Service', function() {
this.anotherValue = function() { return "anotherValue"; }
});
// TODO : somehow link website2Service.anotherValue to baseService
// Testing code:
function makeTestController(expected) {
return ['$scope', 'baseService', function($scope, baseService) {
var result = baseService.func();
if (angular.equals(result, expected)) {
$scope.outcome = "Test Passed!";
} else {
$scope.outcome = 'Test failed...\n' +
"Expected: " + angular.toJson(expected) + '\n' +
"But got : " + angular.toJson(result);
}
}];
}
website1.controller('TestController1',
makeTestController(['first', 'someValue', 'end']));
website2.controller('TestController2',
makeTestController(['first', 'anotherValue', 'end']));
// since this test uses multiple angular apps, bootstrap them manually.
angular.bootstrap(document.getElementById('website1'), ['website1']);
angular.bootstrap(document.getElementById('website2'), ['website2']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h3>Website 1</h3>
<div id='website1'>
<div ng-controller='TestController1'>
<pre>{{outcome}}</pre>
</div>
</div>
<div id='website2'>
<h3>Website 2</h3>
<div ng-controller='TestController2'>
<pre>{{outcome}}</pre>
</div>
</div>
I've thought of a few solutions to this, but none seem optimal.
The most obvious way would be to replace the baseService service with a provider, and allow it to be configured in each module. This seems to be the standard way of configuring services in other modules. However, I cannot access the website1Service and website2Service in in the provider functions, as services cannot be accessed in provider functions. This is noted in the docs:
During application bootstrap, before Angular goes off creating all services, it configures and instantiates all providers. We call this the configuration phase of the application life-cycle. During this phase, services aren't accessible because they haven't been created yet.
Another solution to work around this is use angular.injector to find the right service. However, the docs for angular.injector imply that you really only need this for interacting with third party libraries. So it appears there is a better way.
Finally, I could add a dependency to a nonexistant service (eg "baseServiceActions") in baseModule, and require a service with that name be implemented in website1 and website2. The dependency injection should then bind it all together when baseService is used. However, this is a pretty weird way of working, and would result in poor error messages if the baseServiceActions module wasn't implemented in a new website that used the baseModule module.
Is there a better way of doing this? If so, is it possible to change the example code I posted to get all the tests passing? Ideally none of the testing code should be changed.
I eventually worked out a fairly good solution to this. I created a service named "<serviceName>Settings", and added a setup function to it. I then call that setup function in a module run block in the module I want to use it in. Finally I have a validate method that is called in the service that uses the settings to ensure it is setup, and throws a nice error message if it isn't. This solved all the problems I had with the other solutions.
This is how my example problem would look with this solution:
var baseModule = angular.module('baseModule', []);
baseModule.service('baseService', ['baseServiceSettings', function(baseServiceSettings) {
baseServiceSettings.validate();
this.func = function() {
return ["first",
baseServiceSettings.getValue(),
"end"];
};
}]);
baseModule.service('baseServiceSettings', function() {
this.setup = function(getter) {
this.getValue = getter;
};
this.validate = function() {
if (!this.getValue) {
throw "baseServiceSettings not setup! Run baseServiceSettings.setup in a module run block to fix";
}
};
});
var website1 = angular.module('website1', ['baseModule']);
website1.run(['baseServiceSettings', 'website1Service', function(baseServiceSettings, website1Service) {
baseServiceSettings.setup(website1Service.someCustomValue);
}]);
website1.service('website1Service', function() {
this.someCustomValue = function() {
// Note that while this is a constant value, in
// the real app it will be more complex,
// so replacing this service with a constant provider won't work.
return "someValue";
}
});
var website2 = angular.module('website2', ['baseModule']);
website2.service('website2Service', function() {
this.anotherValue = function() { return "anotherValue"; }
});
website2.run(['baseServiceSettings', 'website2Service', function(baseServiceSettings, website2Service) {
baseServiceSettings.setup(website2Service.anotherValue);
}]);
// Testing code:
function makeTestController(expected) {
return ['$scope', 'baseService', function($scope, baseService) {
var result = baseService.func();
if (angular.equals(result, expected)) {
$scope.outcome = "Test Passed!";
} else {
$scope.outcome = 'Test failed...\n' +
"Expected: " + angular.toJson(expected) + '\n' +
"But got : " + angular.toJson(result);
}
}];
}
website1.controller('TestController1',
makeTestController(['first', 'someValue', 'end']));
website2.controller('TestController2',
makeTestController(['first', 'anotherValue', 'end']));
// since this test uses multiple angular apps, bootstrap them manually.
angular.bootstrap(document.getElementById('website1'), ['website1']);
angular.bootstrap(document.getElementById('website2'), ['website2']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h3>Website 1</h3>
<div id='website1'>
<div ng-controller='TestController1'>
<pre>{{outcome}}</pre>
</div>
</div>
<div id='website2'>
<h3>Website 2</h3>
<div ng-controller='TestController2'>
<pre>{{outcome}}</pre>
</div>
</div>
In order to load missing modules, YUI allows us to specify them in use(...) method, pass in a callback and perform our actions when all modules are loaded - asynchronously. This presents a number of problems in my case. More specifically, I find it impossible to instantiate my class outside of the current file if I have my classes created inside the callback (no guarantee that they will be ready by the time "new" happens). My work-around was to wrap only certain method calls in YUI.use(...) but this creates another problem with extending objects. Ideally, what I need to do is load all modules synchronously before any of my code executes. Below is my code that currently fails succeeds (EDIT: Allow Rollups).
HTML:
<html>
<head>
<!-- Built using YUI dep configurator -->
<!-- JS -->
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/oop/oop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/event-custom/event-custom-base-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/event/event-base-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/dom/dom-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/dom/dom-style-ie-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/pluginhost/pluginhost-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/node/node-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/event/event-base-ie-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/event/event-delegate-min.js"></script>
<!-- My JS -->
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
var test = new MyNS.ExtendingClass();
</script>
</head>
<body>
<h1>Hello World!</h3>
</body>
</html>
test.js
//namespace
if (!MyNS) var MyNS = {};
(function(){
var Y = YUI().use('node', 'io', 'autocomplete');
MyNS.BaseClass = function() {
console.log('Base class newed. Y: ' + Y);
var self = this;
self.init();
};
MyNS.BaseClass.prototype = {
init: function() {
console.log('Initting! Y: ' + Y);
}
, test: function() {
console.log('test fired!');
}
};
})();
(function(){
var Y = YUI().use('node');
MyNS.ExtendingClass = function() {
console.log('Extended class newed. Y: ' + Y);
var self = this;
MyNS.ExtendingClass.superclass.constructor.call(self);
};
MyNS.ExtendingClass.prototype = {
testExtended: function() {
console.log('testExtended fired!');
}
};
Y.extend(MyNS.ExtendingClass, MyNS.BaseClass);
})();
This code now works but requires 10 (!!!) js files to make it happen. Is there a way to make sure all dependencies are loaded dynamically and before my code is executed? There must be, right?
You can solve this by putting each of your classes inside their own YUI module and use YUI to do the namespacing.
Create a new file my-classes.js, containing both your class definitions:
YUI().add('baseClass', function(Y) {
// constructor
Y.namespace('NS').BaseClass = function () {
this.msg = 'hi!';
}
}, '1', {requires: ['oop', 'node', 'event']}); // dependencies for your class
YUI().add('extendingClass', function(Y) {
// constructor
Y.namespace('NS').ExtendingClass = function () {
Y.NS.ExtendingClass.superclass.constructor.call(this);
alert(this.msg);
}
Y.extend(Y.NS.ExtendingClass, Y.NS.BaseClass);
}, '1', {requires: ['baseClass']});
Include the YUI seed file in your page:
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
Also include your class file and an init file:
<script type="text/javascript" src="my-classes.js"></script>
<script type="text/javascript" src="my-init.js"></script>
In your init file:
YUI().use('extendingClass', function(Y) {
Y.test = new Y.NS.ExtendingClass();
})
Now all the dependencies should be resolved and loaded up, before your code executes. It is asynchronous, however you asked for a solution that would ensure everything was loaded before your code executed.
Hope this helps.
Use Google Closure Compiler to compress and pack everything into single file. You could import multiple files into the compressor.
With advanced mode of Compression, Google Closure Compiler compresses 20-25% more than the YUI compressor in general for any library.