These are chat archives for reactioncommerce/reaction

31st
Aug 2016
Jeremy Shimko
@jshimko
Aug 31 2016 01:04
what element are you inspecting to get that?
nm. found it
that injects it into the head
as a <style> tag
so it's evaluated at the same point as if it were a css file, but it’s rendered directly into the HTML instead
3Maestros
@3Maestros
Aug 31 2016 01:56
where do I copy custom images in reaction project? I believe keeping in under imports/plugins/custom/ wont work?
Brent Hoover
@zenweasel
Aug 31 2016 01:59
you can copy them to public/custom
there currently is no good way to package them in a custom plug and then serve them
3Maestros
@3Maestros
Aug 31 2016 02:08
ok ..
I need to add this "npm install ion-rangeslider" as part of project setup, where should I add this custom package install ?
Jeremy Shimko
@jshimko
Aug 31 2016 02:18
just run meteor npm install --save ion-rangeslider
Brent Hoover
@zenweasel
Aug 31 2016 02:19
how does he save that though? Without modifying the projects package.json?
Jeremy Shimko
@jshimko
Aug 31 2016 02:19
right now, there’s no way around that
added to my 1000 mile long list
3Maestros
@3Maestros
Aug 31 2016 02:22
will --save write to packages.json?
Jeremy Shimko
@jshimko
Aug 31 2016 02:22
yes
3Maestros
@3Maestros
Aug 31 2016 02:22
ok great..
Jeremy Shimko
@jshimko
Aug 31 2016 02:23
which you need if you want future npm install/update commands to install your dependencies
3Maestros
@3Maestros
Aug 31 2016 02:24
yes ..
and I need to merge packages.json when I update from latest rreaction codebase ..
Brent Hoover
@zenweasel
Aug 31 2016 02:25
yeah, hopefully soon plugins could specify their own package.json
3Maestros
@3Maestros
Aug 31 2016 02:26
yeah we can eliminate this merge ..
Vigy
@vigyano
Aug 31 2016 02:57
@zenweasel I have the latest reaction-cli which I installed yesterday. what is the command in cli to remove plugin
Brent Hoover
@zenweasel
Aug 31 2016 02:58
if the plugin is removed from the plugins directory it should automatically remove it from the imports
Vigy
@vigyano
Aug 31 2016 02:59
I did remove the plugin folder from plugins directory and did reaction reset but its still trying to search for the plugin
Brent Hoover
@zenweasel
Aug 31 2016 03:00
what’s the output from reaction -v?
Vigy
@vigyano
Aug 31 2016 03:01
Node: 4.4.7
NPM: 2.15.8
Reaction: 0.15.1
Reaction CLI: 0.4.15
Brent Hoover
@zenweasel
Aug 31 2016 03:02
Hmmmm, that should work, maybe @jshimko has some insight
Vigy
@vigyano
Aug 31 2016 03:03
by the way, I am running this in windows
Brent Hoover
@zenweasel
Aug 31 2016 03:04
yeah, that’s something to know
to workaround it for now you can just remove those lines from the client and server plugins.js files
Vigy
@vigyano
Aug 31 2016 03:08
ok
Brent Hoover
@zenweasel
Aug 31 2016 03:10
testing that same scenario here I am not seeing that issue
Vigy
@vigyano
Aug 31 2016 03:12
in windows?
Brent Hoover
@zenweasel
Aug 31 2016 03:12
nope, I am on OSX
Vigy
@vigyano
Aug 31 2016 03:12
maybe this is windows specific issue. I will try again later to add the plugin and remove to reproduce
Brent Hoover
@zenweasel
Aug 31 2016 03:13
I would not be surprised if it’s a Windows-specific issue. That’s always a challenge
3Maestros
@3Maestros
Aug 31 2016 03:21
@zenweasel I am trying to get the slider working in my project here, I have installed "ion-rangeslider" as advised by @jshimko . Also imported ```
import ionRangeSlider from "ion-rangeslider";
but the slider shows only the ranges on text and absolutely no controls ...is there anything I need to do here?
I am using the slider from here https://github.com/IonDen/ion.rangeSlider
may be it needs jquery..
Brent Hoover
@zenweasel
Aug 31 2016 03:25
it does, but it should be there
is this a template you creating from scratch?
3Maestros
@3Maestros
Aug 31 2016 03:25
yeah i just checked it there ...
No I am modifying one of reaction template ..
other changes to template shows ..
Brent Hoover
@zenweasel
Aug 31 2016 03:26
and you are doing $("#example_id").ionRangeSlider();
3Maestros
@3Maestros
Aug 31 2016 03:27
$("#range_27").ionRangeSlider({
    type: "single",
    min: 0,
    max: 150,
    step: 25,
    grid: true,
    grid_snap: true
  });
I do this in template on rendered ...
Brent Hoover
@zenweasel
Aug 31 2016 03:28
what happens if you do that from the console?
3Maestros
@3Maestros
Aug 31 2016 03:28
this is getting called as it was giving me a error before I added import statement ```
import ionRangeSlider from "ion-rangeslider";
Brent Hoover
@zenweasel
Aug 31 2016 03:29
right, but that doesn’t mean it’s getting called at the right time
could you try it from the console?
3Maestros
@3Maestros
Aug 31 2016 03:29
it is just showing text 150 and 0
yes I can try ..
yes I did no change ..
Brent Hoover
@zenweasel
Aug 31 2016 03:34
and what does $(“#range_27”) give you?
3Maestros
@3Maestros
Aug 31 2016 03:36
[<div id=​"range_27">​</div>​]
Brent Hoover
@zenweasel
Aug 31 2016 03:36
from the example it appears to want to operate on an input element
not a div
3Maestros
@3Maestros
Aug 31 2016 03:38
let me try ..
it's the same ...I took out div an added
3Maestros
@3Maestros
Aug 31 2016 03:43
<input type="text" id="range_27" name="example_name" value="" />
it just shows text 0 an 150
Brent Hoover
@zenweasel
Aug 31 2016 03:45
not sure, there’s nothing Reaction or Meteor-specific happening there
when you are doing it from the console at least
3Maestros
@3Maestros
Aug 31 2016 03:46
yeah this is strange ...
Brent Hoover
@zenweasel
Aug 31 2016 03:46
have you tested this control outside of your project?
3Maestros
@3Maestros
Aug 31 2016 03:47
is there a slider bundeled in meteor project ?
yeah ...
Brent Hoover
@zenweasel
Aug 31 2016 03:47
their links to their demos appear to be broken
3Maestros
@3Maestros
Aug 31 2016 03:47
it works for me..
Brent Hoover
@zenweasel
Aug 31 2016 03:48
yeah, I got a server timeout when I hit that
3Maestros
@3Maestros
Aug 31 2016 03:48
wow not sure ..
Brent Hoover
@zenweasel
Aug 31 2016 03:48
but it looks like an active project anyway
3Maestros
@3Maestros
Aug 31 2016 03:48
Actually before I tried with meteor install "slider " I tried it manually
by assembling the css and .js and adding to reaction ..
it worked little better in that ..
I deleted the css and .js I assembled under imports/plugin after I switch to install using meteor ..
I believe it is not finding the CSS and the images required for this component ..
Brent Hoover
@zenweasel
Aug 31 2016 03:52
yeah
not sure why though
3Maestros
@3Maestros
Aug 31 2016 03:52
yea...
well is there a slider bundled with reaction?
Brent Hoover
@zenweasel
Aug 31 2016 03:55
I don’t believe so, no
3Maestros
@3Maestros
Aug 31 2016 03:56
ok
Brent Hoover
@zenweasel
Aug 31 2016 03:57
sorry, you are stuck with the least-qualified front-end person of the Reaction team on the night shift here
all I can say is that in theory it seems like it should work
3Maestros
@3Maestros
Aug 31 2016 03:59
thank you looking at this issue with me ..
who do you think I should check with ?
Brent Hoover
@zenweasel
Aug 31 2016 04:00
@mikemurray is probably your man when it comes to front-end and especiallly front-end in Meteor/Reaction
3Maestros
@3Maestros
Aug 31 2016 04:01
great...
I will keep this on the side for now ...
Brent Hoover
@zenweasel
Aug 31 2016 04:02
there’s no slider built into bootstrap?
3Maestros
@3Maestros
Aug 31 2016 04:03
good Q..
nope ..
3Maestros
@3Maestros
Aug 31 2016 06:02
where would a new custom schema go in the hierarchy? I believe lib/collections/schama? or is there a saperate custom location ?
Brent Hoover
@zenweasel
Aug 31 2016 06:02
you can just create a lib/collections in your plugin directory
3Maestros
@3Maestros
Aug 31 2016 06:04
I thought there were some issue with this ..
Brent Hoover
@zenweasel
Aug 31 2016 06:05
it depends on what you want to do with it
if your plugin is just using the schema you can just put it in your plugin
lib will make it available to both client and server
3Maestros
@3Maestros
Aug 31 2016 06:05
okay it is independent ...
ok got it
Owen Hoskins
@owenhoskins
Aug 31 2016 15:28
@aaronjudd Hey Aaron, curious if you came up with something for reactioncommerce/reaction#1334, I am looking for anything to go on!
Aaron Judd
@aaronjudd
Aug 31 2016 16:28
@owenhoskins was just able to replicate this morning, but haven’t been seeing it consistently. I’m looking at it as part of #890 and trying to get to the root cause so I can replicate consistently. @Capt-Slow was also getting this while writing acceptance tests
Jeremy Shimko
@jshimko
Aug 31 2016 16:29
I get it occasionally too
Spencer Norman
@spencern
Aug 31 2016 16:30
We’re seeing this as well some times.
Owen Hoskins
@owenhoskins
Aug 31 2016 16:33
Would it be conceivable to short circuit the accounts creation and allow visitors to hit the page totally anon while having access to a set of routes? (thinking immediate solutions as I need to get a public facing site up in 12 hours) Not sure if that sounds like gibberish, haha.
Owen Hoskins
@owenhoskins
Aug 31 2016 17:02
@aaronjudd: I feel like I was seeing it a lot locally but on my deployment it's not reproducing at the moment. Glad to hear you guys are seeing it but only occasionally. Best of luck getting to the root cause. For now I am thinking I'll just change the notFound route message to something that prompts you to refresh the page... unusual but might do the trick.
Aaron Judd
@aaronjudd
Aug 31 2016 17:03
Router.reload() should do the trick
Owen Hoskins
@owenhoskins
Aug 31 2016 17:04
Ah ha, yes from the notFound route?
Aaron Judd
@aaronjudd
Aug 31 2016 17:06
yup, should be able put that in the notFound event. I’m thinking it’s a router table error, there is some code that is meant to remove the shop name from the route if there is only one shop enabled. somewhere in that flow the timing on router table creation is off..
Aaron Judd
@aaronjudd
Aug 31 2016 17:11
:thumbsup:
3Maestros
@3Maestros
Aug 31 2016 17:21
@mikemurray Is there a slider component in reaction UI kit that I could use, I tried using https://github.com/IonDen/ion.rangeSlider but having trouble getting to work . Appreciate your help.
Owen Hoskins
@owenhoskins
Aug 31 2016 21:07
Hmmm. I am having a lot of trouble getting my css autoprefixed. @jshimko Has the reaction cli changed anything per chance?
Owen Hoskins
@owenhoskins
Aug 31 2016 22:15
@spencern: You noticed your styles were being inlined? I am seeing that too and thinking that's why I lost my prefixing. @jshimko: Both via reaction run and on my docker deployment.
Spencer Norman
@spencern
Aug 31 2016 22:15
Can you give me an example of losing your prefixing?
Mike Murray
@mikemurray
Aug 31 2016 22:16
@3Maestros there is not. But we can surely add one at some point, but for now I can try to help you get your stuff working
Owen Hoskins
@owenhoskins
Aug 31 2016 22:17
display: flex for instance isn't prefixed with -webkit. It's not being overridden its just not there.
Spencer Norman
@spencern
Aug 31 2016 22:18
ah, interesting. I’ve added my own prefixes anywhere we’ve added code. Was prefixing happening as part of your build process before?
Owen Hoskins
@owenhoskins
Aug 31 2016 22:19
yeah, with fourseven:scss + seba:minifiers-autoprefixer
Spencer Norman
@spencern
Aug 31 2016 22:19
hmm, yeah not sure but might be connected to the inlining I’m seeing
Owen Hoskins
@owenhoskins
Aug 31 2016 22:20
@mikemurray: Have you set up the postcss stuff? e.g. juliancwirko:postcss?
Spencer Norman
@spencern
Aug 31 2016 22:20
pulling latest dev now to see if the inlining is specific to my branch or is happening on rc as well
Mike Murray
@mikemurray
Aug 31 2016 22:20
@owenhoskins it depends on how far back the prefixer is set to go
Owen Hoskins
@owenhoskins
Aug 31 2016 22:20
I've got it set to "browsers": [ "> 0.05%", "last 3 versions" ]
which covers 97%
and Safari back to 6 (I think) which definitely should do -webkit
Mike Murray
@mikemurray
Aug 31 2016 22:21
hmm
yea
is this a .less file or .css
Owen Hoskins
@owenhoskins
Aug 31 2016 22:21
.scss
fourseven:scss + seba:minifiers-autoprefixer which has been working with various tweaks over the last several versions of meteor
Mike Murray
@mikemurray
Aug 31 2016 22:25
they even mention not needing fourseven:scss so it may help
Owen Hoskins
@owenhoskins
Aug 31 2016 22:28
Thanks for the link. Looks like that has potential. I'll check it out tomorrow!
3Maestros
@3Maestros
Aug 31 2016 22:54
@mikemurray thank you very much, can you give this a spin https://github.com/IonDen/ion.rangeSlider and see if it works for you?
Mike Murray
@mikemurray
Aug 31 2016 22:57
@3Maestros ok
Mike Murray
@mikemurray
Aug 31 2016 23:13
Screen Shot 2016-08-31 at 4.12.45 PM.png
@3Maestros i got it to work, mostly, however its missing some images for some reason
Screen Shot 2016-08-31 at 4.15.26 PM.png
@3Maestros there we go
Mike Murray
@mikemurray
Aug 31 2016 23:23

@3Maestros more or less this:

npm install ion-rangeslider

import

import $ from "jquery"
import "ion-rangeslider";
import "ion-rangeslider/css/ion.rangeSlider.css";
import "ion-rangeslider/css/ion.rangeSlider.skinModern.css";

copy image file for your theme to /public/custom/

node_modules/ion-rangeslider/images/sprite-skin-modern.png

CSS you'll need to change

.irs-line-mid,
.irs-line-left,
.irs-line-right,
.irs-bar,
.irs-bar-edge,
.irs-slider {
  background: url(/custom/sprite-skin-modern.png) repeat-x;
}

Note: you may need the entier contents of the theme file "ion-rangeslider/css/ion.rangeSlider.skinModern.css" to make it work properly

Template stuff

<template name="rangeSlider">
  <input type="text" id="example_id" name="example_name" value="" />
</template>
Template.rangeSlider.onRendered(function () {
  this.$("#example_id").ionRangeSlider({
    type: "double",
    min: 0,
    max: 1000,
    from: 200,
    to: 500,
    grid: true
  });
});