I'm trying to create a sample plugin and I'm getting this error:
Uncaught ReferenceError: RedactorPlugins is not defined
This is my code for plugin:
<?php
$script = <<< JS
(function($)
{
$.Redactor.prototype.advanced = function()
{
return {
init: function ()
{
var button = this.button.add('advanced', 'Advanced');
this.button.addCallback(button, this.advanced.test);
},
test: function(buttonName)
{
alert(buttonName);
}
};
};
})(jQuery);
JS;
$this->registerJs($script);
?>
My advanced plugin is load after redactor.js, what should i modify to make Redactor to accept plugins?
Thanks in advance!
If you looking your html code by your browser, I am sure that JS will be before the Redactor plugin and maybe before jquery too.
Just add the depends
$this->registerJs($script,['depends' => [\yii\web\JqueryAsset::className()]]);
then check the position of your code in your printed html
If it will be still before Redactor plugin, you can make a new JS file and add to AppAsset.php just below Redactor plugin
Related
Am using gulp-minify-inline plugin to only compress inline javascript and css for sales force pages and component which is basally html code.
Am trying to disable the js minification via option. Could any one suggest what attribute i need it as false?
Plugin url: https://www.npmjs.com/package/gulp-minify-inline
Document: https://github.com/terser/terser
var minifyInline = require('gulp-minify-inline');
var options = {
js: {
output: {
comments: true
},
minify: false -----> Not working
},
jsSelector: 'script[type!="text/x-handlebars-template"]',
css: {
level: {1: {specialComments: 0}}
},
cssSelector: 'style[data-do-not-minify!="true"]'
};
gulp.task('minify-inline', function() {
gulp.src('src/*.html')
.pipe(minifyInline(options))
.pipe(gulp.dest('dist/'))
});
js contains parameters to pass to terser.minify() (for documetation refer to the project homepage). Set it to false to disable JS minification globally
You might try js: false
I have an website built using Laravel 5.4 and I am building the broadcasting system with Laravel Echo and Pusher, but unfortunately the documentation lacks in specifying the steps needed to make it work without Vue.js.
Is there someone who had this configuration working? I'd need a complete step to step guide, since installing Echo correctly (I would prefer a CDN but couldn't find one).
In the end, I figured out myself how to achieve Laravel Echo working with Pusher but without Vue.js
Follow all the instructions found here.
Assuming you have Pusher installed and configured and Laravel Echo installed via npm, go to your-project-folder/node_modules/laravel-echo/dist and copy echo.js in your Laravel public folder (e.g. your-project-folder/public/lib/js). I use Grunt, so I automated this process, it's just for sake of simplicity.
Add the refer in your Blade template:
<script type="text/javascript" src="{{asset('lib/js/echo.js')}}"></script>
At the beginning of your Blade Template, in the point marked below, insert this line of code (it's just to avoid a JS error using echo.js directly):
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>;
var module = { }; /* <-----THIS LINE */
</script>
In your footer, after the inclusion of all the JS files, call Laravel Echo this way:
<script>
window.Echo = new Echo({
broadcaster: 'pusher',
key: '{{env("PUSHER_KEY")}}',
cluster: 'eu',
encrypted: true,
authEndpoint: '{{env("APP_URL")}}/broadcasting/auth'
});
</script>
If you want to listen for a channel, e.g. the notifications one, you can do it like this:
<script>
window.Echo.private('App.User.{{Auth::user()->id}}')
.notification((notification) => {
doSomeAmazingStuff();
});
</script>
I am using laravel websockets but I think it should be the same with the original Pusher.
So :
Install laravel-echo and pusher with npm
Go to your-project-folder/node_modules/laravel-echo/dist and copy echo.js to your-project-folder/public/js
Go to your-project-folder/node_modules/pusher-js/dist and search for pusher.worker.js, rename it to pusher.js and copy your-project-folder/public/js
To the new pusher.js renamed add "export" before the "var Pusher" in the first line of code like so :
export var Pusher =
Or you can just use this echo.js and pusher.js file from my repository https://github.com/HarenaGit/laravel-websockets-without-vuejs
To where you want to listening for changes, you can listen like this
<script type="module">
import Echo from '{{asset('js/echo.js')}}'
import {Pusher} from '{{asset('js/pusher.js')}}'
window.Pusher = Pusher
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'server-notification-key',
wsHost: window.location.hostname,
wsPort: 6001,
forceTLS: false,
disableStats: true,
});
window.Echo.channel('your-channel')
.listen('your-event-class', (e) => {
console.log(e)
})
console.log("websokets in use")
</script>
First create event for broadcasting data as per the laravel document. And check console debug that your data being broadcasted or not. If your data is broadcasting than use javascript to listening data as given in pusher document.
Here you can check example : https://pusher.com/docs/javascript_quick_start
I have the following function that creates a extjs window. Within the php page is some javascript (for now just a alert("test")) But the alert fails to fire. My understanding is that setting scripts to true should execute script tags.
function loadTilePage(tileId){
var url= "page.php";
var yourWindow = new Ext.Window({
title: 'title',
autoScroll: true,
resizable :false,
height:Ext.getBody().getViewSize().height*.60,
width:Ext.getBody().getViewSize().width*0.55,
loader:{
url:url,
scripts: true,
renderer: 'html',
autoLoad: true
}
});
yourWindow.show();
yourWindow.center();
}
In the end of the php response is this:
<script type="text/javascript">
alert("test");</script>
Injecting script into element markup is blocked by browser. Example:
document.getElementById('div').innerHTML = '<scr' + 'ipt>alert(123);</scr' + 'ipt>'; // this won't work
Fiddle: http://jsfiddle.net/g3dahakr/
You should probably find other way to do that. In Ext JS you can require other JS modules, so IMO instead of using loader it is better to replace page.php with Ext component and load it using require.
I am trying to use the Async module of https://github.com/millermedeiros/requirejs-plugins to load the googlemap api. My index.html file contains the following requirejs configuration:
<script data-main="scripts/myscript" src="scripts/require.js"></script>
<script>
requirejs.config({
"baseUrl": "scripts",
"paths": {
"async": "require_plugins/async",
"gmaps": "gmaps",
"infobox":"http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox",
"jquery":"//code.jquery.com/jquery-2.1.1.min",
"jquery_mob":"//code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min"
},
waitSeconds: 15
});
All my javascript files are stored in a scripts folder (relative to index.html)
e.g. script/myscript.js and script/require.js and the async plugins are stored in a subfolder of script called require_plugins e.g. script/require_plugins/async.js
The javascript where I define the googlemap module is called gmaps.js (stored in the script folder) and looks as follows:
define("GMAP",['async!https://maps.googleapis.com/maps/api/js? &key=xxxxxx®ion=uk&libraries=places,geometry'], function () {
return window.google.maps;
});
I have obfuscated the key parameter intentionally here. According to the documentation, I should be able to use the gmaps module anywhere in other javascript files just by invoking it like so:
require(["gmaps"],function(GMAP)
{
map= new GMAP.Map("#map-div");
//and then some code to display the map
}
Unfortunately, it does not work at all. It seems that the googlemap library has not loaded at all. I use absolute URLs for jquery and that works fine but googlemap fails miserably. My question is: Is there something wrong with my requirejs config? I can't think of anything else causing this fault :(
My understanding is that the name you set in define() is what you need to use when writing the dependencies.
e.g.:
define('GMAP', ['async!<path>'], function() { return window.google.maps; });
require(['GMAP'], function(GMaps) { ... });
This is how I get GMaps to load for me. I have a secondary problem now that other libraries that depend on Maps no longer load.
I am trying to load HTML templates with RequireJS and I am trying to use a RequireJS plugin for that. https://github.com/ZeeAgency/requirejs-tpl . Here's the sample code provided in the plugin for loading a template.
define(['tpl!your-template-path.tpl'], function(tpl) {
return tpl({your: 'data'});
});
The problem with this function is that there is no way to pass the data to this function and get the rendered html. I'm new to javascript, so please help.
And do you know of a simpler way to load HTML templates with requirejs?
I use the text plugin, and underscore for the templating
You use it like this:
your_template.html
<p>hello <%=name%><p>
In your requirejs file,
define(['underscore', 'text!./your_template.html'], function(_, yourTemplate ) {
var compiledTemplate = _.template(yourTemplate );
return = compiledTemplate({name: 'moe'});
});