For using the Tooltip function of bootstrap v3.4.1 with YII2.0.18 the order of the loaded javascripts must be changed. I can't fix it.
After upgrading to YII2.0.18 the order of the loaded javascripts is changed. Formerly scripts where loaded in this order:
jquery-ui.js
bridge.js
bootstrap.js
Now it is as follows:
bootstrap.js
jquery-ui.js
bridge.js
Due to this change the bridge.js script can't rewrite the tooltip functionname of the JqueryUI script before the bootstrap.js is loaded.
I use the following command in the bridge.js:
$.widget.bridge('uitooltip', $.ui.tooltip);
The AppAsset file:
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/main.css',
'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css',
'css/multi-select.css',
];
public $js = [
'js/main.js',
'js/invoiceLines.js',
'js/rememberTabs.js',
'js/jquery.multi-select.js'
];
public $depends = [
'yii\web\YiiAsset',
'app\assets\BridgeAsset',
'yii\bootstrap\BootstrapAsset',
'yii\bootstrap\BootstrapPluginAsset',
];
}
And the BridgeAsset file
class BridgeAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $js = [
'js/bridge.js'
];
public $depends = [
'yii\web\JqueryAsset',
'yii\jui\JuiAsset',
];
}
I can't get changed the order of the loaded scripts unless I experimented with dependencies in the assetfiles.
Finally found the answer, in web.php i added the following under assetManager:
'bundles' => [
'yii\bootstrap\BootstrapAsset' => [
'depends' => [
'yii\jui\JuiAsset',
],
],
],
This makes the JqueryUI depending of the bootstrap assets.
Related
I am trying to figure out how to add a script to a page via my simple chrome extension. Currently I have a script, mycoolscript.js which is a local file to my extension and I am using the following code (snippets including manifest) to add it to the current page.
I feel like I am close, the script tag is added to the head tag but when the onload fires I am seeing stating that coolObject is not defined. coolObject is returned from mycoolscript to the window. If I build a page manually or use tampermonkey this works perfectly. Any suggestions on what I might be doing wrong here?
manifest.json
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["contentScript.css"],
"js": ["contentScript.js"]
}],
"web_accessible_resources": [
{
"resources": ["mycoolscript.js"],
"matches": ["<all_urls>"]
}
]
contentScript.js
function addMyCoolScript(){
var s = document.createElement('script');
s.src = chrome.runtime.getURL('mycoolscript.js');
(document.head || document.documentElement).appendChild(s);
s.onload = function () {
s.parentNode.removeChild(s);
onScriptLoaded();
};
}
function onScriptLoaded() {
let apikey = "ABC123"
let baseUrl = "example.com"
coolObject.initialize(apikey, {
baseUrl: baseUrl,
});
coolObject.runStartup();
coolObject.openSession();
}
I have identified an Javascript library (incremental-dom) as both a global and external. I'm loading the library in a script tag.
When the rollup format is 'iife' the library in injected into the iife and everything works.
However when I use the 'es' format, the global is never referenced and the browser throws a type error:
Uncaught TypeError: Failed to resolve module specifier 'incremental-dom'
Here's my rollup.config.js file:
const path = require('path');
const root = process.cwd();
const string = require('rollup-plugin-string');
const superviews = require('rollup-plugin-superviews');
export default [
{
input: path.resolve(root, 'src', 'idx-admin-tab', 'component.js'),
plugins: [
superviews({include: 'src/**/*.html'}),
string({include: ['src/**/*.css', 'src/**/*.svg']})
],
globals: {'incremental-dom': 'IncrementalDOM'},
external: ['incremental-dom'],
output: {
file: path.resolve(root, 'dist', 'idx-admin-tab.es.js'),
format: 'es'
}
}
];
globals only works in the context of iife or umd output — if you're creating an es bundle, it will simply be ignored.
If you wanted to just use the browser's native import support, you would have to turn the module specifier incremental-dom into one that the browser can resolve — something like this:
export default [
{
// ...
external: ['incremental-dom'],
paths: {
'incremental-dom': '/node_modules/incremental-dom/dist/incremental-dom.js'
},
// ...
}
];
Unfortunately incremental-dom doesn't have an ESM build, so you can't import it. So if you don't want to bundle it, you will have to trick Rollup into using the global IncrementalDOM even in es mode.
You should be able to do that with rollup-plugin-virtual:
export default [
{
// ...
plugins: [
superviews({include: 'src/**/*.html'}),
string({include: ['src/**/*.css', 'src/**/*.svg']}),
virtual({
'incremental-dom': 'export default window.IncrementalDOM'
})
],
// ...
}
];
I'm having some trouble getting this WebComponents polyfill + native-shim to work right across all devices, though webpack.
Some background on my setup:
* Webpack2 + babel-6
* app is written in ES6, transpiling to ES5
* imports a node_module package written in ES6, which defines/registers a CustomElement used in the app
So the relevant webpack dev config looks something like this:
const config = webpackMerge(baseConfig, {
entry: [
'webpack/hot/only-dev-server',
'#webcomponents/custom-elements/src/native-shim',
'#webcomponents/custom-elements',
'<module that uses CustomElements>/dist/src/main',
'./src/client',
],
output: {
path: path.resolve(__dirname, './../dist/assets/'),
filename: 'app.js',
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
include: [
path.join(NODE_MODULES_DIR, '<module that uses CustomElements>'),
path.join(__dirname, '../src'),
],
},
],
},
...
key take aways:
* I need CustomElement poly loaded before <module that uses CustomElements>
* I need <module that uses CustomElements> loaded before my app soure
* <module that uses CustomElements> is ES6 so we're transpiling it ( thus the include in the babel-loader).
The above works as-expected in modern ES6 browsers ( IE desktop Chrome ), HOWEVER
it does not work in older browsers. I get the following error in older browsers, for example iOS 8:
SyntaxError: Unexpected token ')'
pointing to the opening anonymous function in the native-shim pollyfill:
(() => {
'use strict';
// Do nothing if `customElements` does not exist.
if (!window.customElements) return;
const NativeHTMLElement = window.HTMLElement;
const nativeDefine = window.customElements.define;
const nativeGet = window.customElements.get;
So it seems to me like the native-shim would need to be transpiled to ES5:
include: [
+ path.join(NODE_MODULES_DIR, '#webcomponents/custom-elements/src/native-shim'),
path.join(NODE_MODULES_DIR, '<module that uses CustomElements>'),
path.join(__dirname, '../src'),
],
...but doing so now breaks both Chrome and iOS 8 with the following error:
app.js:1 Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
at new StandInElement (native-shim.js:122)
at HTMLDocument.createElement (<anonymous>:1:1545)
at ReactDOMComponent.mountComponent (ReactDOMComponent.js:504)
at Object.mountComponent (ReactReconciler.js:46)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
at Object.mountComponent (ReactReconciler.js:46)
at Object.updateChildren (ReactChildReconciler.js:121)
at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:208)
at ReactDOMComponent._updateChildren (ReactMultiChild.js:312)
.. which takes me to this constructor() line in the native-shim:
window.customElements.define = (tagname, elementClass) => {
const elementProto = elementClass.prototype;
const StandInElement = class extends NativeHTMLElement {
constructor() {
Phew. So it's very unclear to me how we actually include this in a webpack based build, where the dependency using CustomElements is ES6 ( and needs transpiling).
Transpiling the native-shim to es5 doesn't work
using the native-shim as-is at the top of the bundle entry point doesn't work for iOS 8, but does for Chrome
not including the native-shim breaks both Chrome and iOS
I'm really quite frustrated with web components at this point. I just want to use this one dependency that happens to be built with web components. How can I get it to work properly in a webpack build, and work across all devices? Am I missing something obvious here?
My .babelrc config for posterity sake (dev config most relevant):
{
"presets": [
["es2015", { "modules": false }],
"react"
],
"plugins": [
"transform-custom-element-classes",
"transform-object-rest-spread",
"transform-object-assign",
"transform-exponentiation-operator"
],
"env": {
"test": {
"plugins": [
[ "babel-plugin-webpack-alias", { "config": "./cfg/test.js" } ]
]
},
"dev": {
"plugins": [
"react-hot-loader/babel",
[ "babel-plugin-webpack-alias", { "config": "./cfg/dev.js" } ]
]
},
"dist": {
"plugins": [
[ "babel-plugin-webpack-alias", { "config": "./cfg/dist.js" } ],
"transform-react-constant-elements",
"transform-react-remove-prop-types",
"minify-dead-code-elimination",
"minify-constant-folding"
]
},
"production": {
"plugins": [
[ "babel-plugin-webpack-alias", { "config": "./cfg/server.js" } ],
"transform-react-constant-elements",
"transform-react-remove-prop-types",
"minify-dead-code-elimination",
"minify-constant-folding"
]
}
}
}
I was able to achieve something similar with the .babelrc plugin pipeline below. It looks like the only differences are https://babeljs.io/docs/plugins/transform-es2015-classes/ and https://babeljs.io/docs/plugins/transform-es2015-classes/, but I honestly can't remember what problems those were solving specifically:
{
"plugins": [
"transform-runtime",
["babel-plugin-transform-builtin-extend", {
"globals": ["Error", "Array"]
}],
"syntax-async-functions",
"transform-async-to-generator",
"transform-custom-element-classes",
"transform-es2015-classes"
]
}
I need to embed resources (html templates) within a lua rock, as they are required by the program. But i cannot find where to describe them in the configuration.
Trying to put them in build.install.con key (as below) does not work, because the files are then stored in a "flat" manner, losing the directories.
{
package = "...",
version = "master-1",
source = { ... },
description = { ... },
dependencies = { ... },
build = {
type = "builtin",
modules = { ... },
install = {
bin = { ...},
conf = { RESOURCES },
},
},
}
Is there a way to specify resources? And where are they installed if it is possible?
There is the build.copy_directories directive (see here), which is an array of directory names that shall be copied from the source directory into the rocks tree.
You might also be interested in the datafile module, which helps with loading resources from various locations (including a rocks tree).
I am working with the yo meanjs boilerplate from here :yo meanjs.
I know I can create my own module using $ yo meanjs:angular-module <module-name> .
Is it possible to install and inject into my controller ng-flow using yo from the command line?
Something like : $ yo meanjs:ng-flow <module-name>
In the documentation it states found here meanjs modules: So unless there are any better suggestions I might try this route.
To add third-party modules use the public/config.js file where we added an array property called applicationModuleVendorDependencies. When you add a new third-party module you should add it to this array so the main module can load it as a depenedency.
'use strict';
// Init the application configuration module for AngularJS application
var ApplicationConfiguration = (function() {
// Init module configuration options
var applicationModuleName = 'theconnect';
var applicationModuleVendorDependencies = ['ngResource', 'ngCookies', 'ngAnimate', 'ngTouch', 'ngSanitize', 'ui.router', 'ui.bootstrap', 'ui.utils'];
// Add a new vertical module
var registerModule = function(moduleName, dependencies) {
// Create angular module
angular.module(moduleName, dependencies || []);
// Add the module to the AngularJS configuration file
angular.module(applicationModuleName).requires.push(moduleName);
};
return {
applicationModuleName: applicationModuleName,
applicationModuleVendorDependencies: applicationModuleVendorDependencies,
registerModule: registerModule
};
})();
After adding module via cmd line using :
bower install "ng-flow#~2" --save
grunt bower-install
I added it as as dependency to public/config.js :
var applicationModuleVendorDependencies = ['ngResource', 'ngCookies', 'ngAnimate', 'ngTouch', 'ngSanitize', 'ui.router', 'ui.bootstrap', 'ui.utils','flow'];
then added the module path to the all the JS files under the /config/env directory.
module.exports = {
db: process.env.MONGOHQ_URL || process.env.MONGOLAB_URI || 'mongodb://' + (process.env.DB_1_PORT_27017_TCP_ADDR || 'localhost') + '/theconnect',
assets: {
lib: {
css: [
'public/lib/bootstrap/dist/css/bootstrap.min.css',
'public/lib/bootstrap/dist/css/bootstrap-theme.min.css',
],
js: [
'public/lib/angular/angular.min.js',
'public/lib/angular-resource/angular-resource.js',
'public/lib/angular-cookies/angular-cookies.js',
'public/lib/angular-animate/angular-animate.js',
'public/lib/angular-touch/angular-touch.js',
'public/lib/angular-sanitize/angular-sanitize.js',
'public/lib/angular-ui-router/release/angular-ui-router.min.js',
'public/lib/angular-ui-utils/ui-utils.min.js',
'public/lib/angular-bootstrap/ui-bootstrap-tpls.min.js',
'public/lib/ng-flow/dist/ng-flow.js'
]
},
css: 'public/dist/application.min.css',
js: 'public/dist/application.min.js'
},
......
...
}
Fabii's answer is helpful. To add to it...
I had to make 2 entries in the "all.js" file Fabii mentioned (which is located at /config/env/all.js
'public/lib/flow.js/dist/flow.min.js',
'public/lib/ng-flow/dist/ng-flow.js'