semantic ui dimmer module not available within meteor - meteor

I have installed the semantic:ui 1.12.1 package. I can't use semantic's modals. It throws an error;
$dimmer.on is not a function
at Object.$.fn.modal.$allModules.each.module.set.clickaway
dimmer is true in client/lib/custom.semantic.json.
I tried installing semantic:ui-dimmer 1.12.0, but it didn't help.
Other parts of semantic appear to be working, how do I get semantic-ui modals to work in Meteor?

Related

Semantic - UI - CSS does not work on my browser and I'm not sure why - there aren't any errors or problems in the console

I install the semantic ui css dependency and tried to write some line of code after importing it in my react project but it doesn't display on the browser. The browser keep loading to infinity

WYSIWYG editor for MeteorJS with image upload options

I've tried most of the packages from https://atmospherejs.com/ but nothing seems to work with Meteor 1.3. Are there any editors for Meteor somewhat like Wordpress's TinyMCE?
I'm using React with Meteor and ES6. Trying to make a blog like CMS for myself.
(I've just started Meteor so I'm a noob in this platform)
TinyMCE got their own React module which worked for me - TinyMCE React
If anyone gets an error like: tinymce is not defined...
You can do-
Add a script in your footer :
src="//cdn.tinymce.com/4/tinymce.min.js"
Copy the whole script into your code, so that Meteor could merge it
for you
Add the script on a component level using dangerouslySetInnerHTML
function inside componentDidMount or anywhere you want

Semantic UI Behaviors Not Working in Meteor 1.3

I decided to upgrade the new app I am developing to the Meteor 1.3 release. I followed 'The Official Guide' instructions from MDG for the recommended directory layout and, with a bit of refactoring of my FlowRouter code, was able to get the app almost working. The problem seems to be with the Semantic UI package (2.1.8) installed from Atmosphere. I did need to add the appropriate SUI *.less files to a top-level 'main.less' file in the 'client' directory to get the app to render a properly styled view. However, the SUI behaviors which worked nicely in Meteor 1.2 yesterday no longer work.
My assumption is that I need to import the SUI behaviors using the form...
import something from 'meteor/semantic:ui';
...but I haven't been able to identify the correct import statement. Semantic UI doesn't present a typical namespace for its library so none of the obvious ideas worked.
Has anybody been able to get SUI working with 1.3 just using standard Blaze templates?
Maybe one of the following points may help, or give a hint for further inquiry:
Make sure the hole Semantic UI folder is at /client/lib/semantic-ui (no need to import anything elsewhere, just use the css classes).
Make sure the Atmosphere packages semantic:ui and flemay:less-autoprefixer are installed. So all .less files within the Semantic UI folder will be converted automatically.
If you need the JavaScript functionality of Semantic UI "Modules", like dropdowns, you need to initiate the functionality on page load. For example with $(".ui.dropdown").dropdown("initialize") or "refresh". Here you find some description of these so called "module behaviors". Behaviors are defined by $('.your.element').module('behavior name', argumentOne, argumentTwo).
If you are using a theme other than default, you might try setting the theme for the module you are trying to use to default in theme.config.less.import. It should look something like this:
/* Modules */
#accordion : 'material';
...
#dropdown : 'default';
....

How do I remove jquery

I don't need jquery in my meteor app. When I type meteor remove jquery, answer is jquery: not in project.
But jquery is still attached in html.
Meteor internals (domutils) depends on JQuery, but I believe the plan is to remove that dependency at some stage:
See: https://groups.google.com/forum/?fromgroups=#!topic/meteor-talk/21y9NbM9v90
Domutils seems to be able to cope without jQuery if sizzle is present (see findAllBySelector).
Doing a quick scan of the code I didn't see any other uses (other than on the server side - in the less parser).
To remove/replace jQuery with another version (2.x or 3.x).
Clone jquery package from official sources into your project folder /packages.
Replace contents of jquery.js with anything.
Downloaded package will have a higher priority and will be used instead of original one. Do on your own risk.
This is how I remove jQuery from Meteor.
Make sure your code really doesn't depend on jQuery before doing this. Also adding any Meteor packages depending on jQuery won't work as expected anymore (e.g: materialize:materialize).
So, if you want to make sure jQuery is removed from Meteor no matter what, just put
Package.describe({
summary: "Remove jQuery from meteor",
name: "jquery",
version: '1.999.999',
});
into packages/jquery/package.js. No need to clone. No need to add any other files.
Check your .meteor/versions file for the entry:
jquery#1.999.999
to confirm it worked.

meteor: how to change include order of packages

in this post on stackoverflow, the autor recommends to include the bootstrap.js before the jquery.js. in other circumstances he wrote, that the bootstrap modal won't work properly. So i had a look at the sources of my startpage, and i saw, that meteor includes bootstrap after jquery.
And now my question: How can i change the order of the included packages in meteor?
EDIT:
The reason, why i ask, is that i have problems with bootstrap modal. For example modals disappears when i press a button inside or type something into an input...
The order the packages are added depends on their filenames.
The default order should be fine, I also use the modal with both the jquery and bootstrap packages without issue. Are you adding these script tags yourself? You don't really need them.
Why not install the packages with meteor:
meteor add bootstrap
meteor add jquery

Resources