dogstudio / highway Goto Github PK

Hi! I'm trying to import Highway from '@dogstudio/highway' but I get this message...

[15:36:09] { GulpUglifyError: unable to minify JavaScript
    at createError (/Users/me/Sites/kendo/wp-content/themes/kendo-theme/node_modules/gulp-uglify/lib/create-error.js:6:14)
    at apply (/Users/me/Sites/kendo/wp-content/themes/kendo-theme/node_modules/lodash/_apply.js:16:25)
    at wrapper (/Users/me/Sites/kendo/wp-content/themes/kendo-theme/node_modules/lodash/_createCurry.js:41:12)
    at /Users/me/Sites/kendo/wp-content/themes/kendo-theme/node_modules/gulp-uglify/lib/minify.js:54:15
    at DestroyableTransform._transform (/Users/me/Sites/kendo/wp-content/themes/kendo-theme/node_modules/gulp-uglify/composer.js:10:23)
    at DestroyableTransform.Transform._read (/Users/me/Sites/kendo/wp-content/themes/kendo-theme/node_modules/readable-stream/lib/_stream_transform.js:184:10)
    at DestroyableTransform.Transform._write (/Users/me/Sites/kendo/wp-content/themes/kendo-theme/node_modules/readable-stream/lib/_stream_transform.js:172:83)
    at doWrite (/Users/me/Sites/kendo/wp-content/themes/kendo-theme/node_modules/readable-stream/lib/_stream_writable.js:428:64)
    at writeOrBuffer (/Users/me/Sites/kendo/wp-content/themes/kendo-theme/node_modules/readable-stream/lib/_stream_writable.js:417:5)
    at DestroyableTransform.Writable.write (/Users/me/Sites/kendo/wp-content/themes/kendo-theme/node_modules/readable-stream/lib/_stream_writable.js:334:11)
  cause: 
   { SyntaxError: Unexpected token: name (Renderer)
    at JS_Parse_Error.get (eval at <anonymous> (/Users/me/Sites/kendo/wp-content/themes/kendo-theme/node_modules/gulp-uglify/node_modules/uglify-js/tools/node.js:21:1), <anonymous>:73:23)
    at formatError (util.js:620:16)
    at formatValue (util.js:526:18)
    at formatProperty (util.js:811:11)
    at formatObject (util.js:627:17)
    at formatValue (util.js:589:18)
    at inspect (util.js:302:10)
    at format (util.js:165:12)
    at Console.log (console.js:140:21)
    at log (/Users/me/Sites/kendo/wp-content/themes/kendo-theme/node_modules/fancy-log/index.js:36:15)
     message: 'Unexpected token: name (Renderer)',
     filename: 'app.js',
     line: 192,
     col: 6,
     pos: 6138 },
  plugin: 'gulp-uglify',
  fileName: '/Users/me/Sites/kendo/wp-content/themes/kendo-theme/build/app.js',
  showStack: false }

How to fix?

Hello,

I need help to use Highway ES5 version.

When i load it like explain in the doc, i have this error in my console :

highway.js:1 Uncaught ReferenceError: define is not defined
at Object.2 (highway.js:1)
at o (_prelude.js:1)
at _prelude.js:1
at Object.287../components/test-highway (main.js:2)
at o (_prelude.js:1)
at r (_prelude.js:1)
at _prelude.js:1

Any idea to fix that ?

Thanks :-)

Hi there,
Please provide ES5 specific docs and examples, since it has none of those imports, extends and whatnots. Thanks for taking a look.

Also, any examples on integrating it with GSAP?

In my project, the instance's cache can't handle ajax changes, I wonder if I should add a public method that lets the user manually update the view. Like:

  /**
   * Manually update the view.
   */
  updateCache() {
    const key = this.location.href;
    const cache = this.cache.get(key);
    if (cache) {
        cache.page = document.cloneNode(true);
        cache.view = document.querySelector('[data-router-view]').cloneNode(true);
        this.cache.set(key, cache);
    }
  }

Hi,

Thanks for this barba alternative=)

Currently testing it out but I'm having one issue. Links to Dynamic pages (Wordpress single pages) doesn't work properly. It works the first click/entry after a page refresh, but going between pages and then trying to enter a dynamic route causes a hard refresh. Any idea why?

JS

import '../css/app.scss'

import Highway from '@dogstudio/highway'

// Renderers
import Home from './home'
import Location from './location'

(() => {
	const links = [...document.querySelectorAll('.js-site-head__menu-link')]

	const H = new Highway.Core({
		renderers: {
			home: Home,
			location: Location
		},
		transitions: {

		}
	})

	H.on('NAVIGATE_IN', (from, state) => {
		for (const link of links) {
		  link.classList.remove('is-active')

		  if (link.href === state.url) {
		    link.classList.add('is-active')
		  }
		}
	})
})();

Single renderer:

import Highway from '@dogstudio/highway'
import Smooth from '../scroll'

let smooth

class Location extends Highway.Renderer {
	onEnter() {
		smooth = new Smooth()

		smooth.init()
	}
	onLeave() {
		smooth.destroy()
	}
	onEnterCompleted() { }
	onLeaveCompleted() { }
}

export default Location

Single page file (twig templating)

{% extends "base.twig" %}
{% block content %}
<article router-view="location" class="o-scroll js-scroll">
	<div class="o-scroll__content js-scroll__content">

	</div>
</article>
{% endblock %}

Hello,

On a site without Highway, doing a event.preventDefault() on a <a> click events programmatically prevent the browser to redirect users.

Is there a way to do the same things with Highway?

I know that I can add a data-router-disabled attribute on my link, but I want to prevent redirection based on some conditions.

For the moment I can do the opposite:

• Add the data-router-disabled attribute on my link
• Do a Core.redirect() if it not fit my initials conditions

Hi again!,

I just mentioned that it is not possible to click on links that have different http/https,

https -> https links works fine
http -> http links works fine

https -> http dosen't work
http -> https dosen't work

Of course, all links will be http, or https, but I have managed to get different on some links for now

Check out our newest project https://carledmond.com/, using highway.js! 🎉 Thanks for an awesome plugin!

EDIT: it was a typo... close thread.

Hello,

Thanks for this cool plugin.

After some testing I find a case where Highway ignore my link: if I'm on a page and the link target the same page but with parameters.
For example, I'm on http://example.com/listing and I click to go to http://example.com/listing?page=2 and nothing happen.

After investigations, it seems to come from a Core#click method which doesn't test url parameters:

When a new view is loaded, any <script> tags within the view are not evaluated by default. Is this done on purpose?

Nice work on this tool, love how it's all based on modern syntax!

However, I fail to see the primary difference of highway compared to Barba.js.
Apart from having "more 2018" syntax and excluding (in some cases useful) features, to keep highway minimal by design, is there any other relevant difference that I'm missing?

I'm all up for the new things, but except for the smaller size, I'm not sure what are the advantages over Barba.js (or swup / swupjs for that matter). On the contrary, I see some essentials that mentioned tools have "figured out" and Highway hasn't.

Cheers!

Hi there!
I'm facing some issues when transforming a perfectly working static website using Highway to a Wordpress website.
On click on a link that would trigger a transition to another page, nothing is happening and I got the following error

Uncaught (in promise) TypeError: Cannot read property 'href' of undefined

in this function that perfectly works with my static website:

H.on('NAVIGATE_IN', (to, location) => { console.log(location.href); });

Is there anything to know about using Highway with Wordpress?
Thanks a lot.

Hey guys! I'm still new to the framework (moving over from Barba), and I'm running into a bit of an issue with my custom renderer class. I'm using v2.1.2, on the ES6 version of the library, and I'm using Webpack to compile and bundle my scripts.

I need to add a property to the renderer class that holds my main controller for my page scripts, so I can initialize and destroy them properly as pages are loaded and unloaded. However, if I add a constructor to the renderer, I get an Uncaught TypeError: Cannot set property 'mainController' of undefined error.

If I add a super() call before I set the property, I get this error: Uncaught TypeError: Cannot read property 'transition' of undefined at DefaultRenderer.Renderer (highway.js:2575) at new DefaultRenderer (DefaultRenderer.js:6), so obviously that doesn't work.

Do you know how I can extend the Highway.Renderer class and add class properties?

Here's my full custom renderer file:

import Highway from '@dogstudio/highway';
import MainController from './MainController';

class DefaultRenderer extends Highway.Renderer {
    constructor() {
        this.mainController = new MainController();
    }
    // Hooks/methods
    onEnter() {
        this.mainController.init();
    }
    onLeave() {
        this.mainController.destroy();
    }
    onEnterCompleted() {
        
    }
    onLeaveCompleted() {
        
    }
}

// Don`t forget to export your renderer
export default DefaultRenderer;

Hello

I'm trying to use this plugin but after I import the script (using both npm and the minified version)

highway.js:424 Uncaught TypeError: Cannot use 'in' operator to search for 'home' in undefined

in my main js file i have:

       import Highway from '@dogstudio/highway';
 	const H = new Highway.Core();

I followed the example and copied and pasted the HTML from the documentation.

What am i doing wrong?

Hi!
Thank you for this good lib that can replace the good old Barba.js!
I'm seeing a use case that Highway cannot cover:

Let's assume you have this website architecture:

[home]--[about]--[contact]

--> It might be interesting to have the ability to have a different 'in' transition of the about page depending on where you are coming from.

For example, here is a 'cheap' but simple use case (like a slider):

• If you come from 'home', you want that the 'about' page slides in from the right.
• If you come from 'contact', you want that the 'about' page slides in from the left.

Here is a suggestion about the config:

new Highway.Core({
  renderers,
  transitions: {
    default: Fade,
    home: Home,
    contact: Contact,
    about: {
      home: aboutHome,
      contact: aboutContact,
    },
  }
});

Or simpler:
You just provide additional params in in and out methods of a class Transition. For example, an object as follow:

{
  from: 'home',
  to: 'about',
};

PS: The prefetch option was interesting on Barba.js. Are you planing to implement it? :)

Hi guys !

We are coming back to you concerning the next feature we want to add to Highway for Highway 2.1 we haven't developed yet. It's really crucial for us to have your help and thoughts about the evolution of the library since the community is important to us. So let's jump on more informations about this brand new feature we are thinking about:

Plugins or Extensions

We really want to keep a lightweight library but still flexible and full of useful features and we want to avoid the kind of library able to do bunch of stuffs but where you only really need 50% of them. That's why we where thinking about opening Highway even more to accept plugins or extensions.

The idea would be to let you develop some useful ones and attach them to the Highway.Core in some way or other. The first approach we were thinking about was something like this:

// Plugins
import Plugin from 'path/to/plugin';

new Highway.Core({
  [...]
  plugins: [
    new Plugins()
  ]
});

// Extensions
import Highway from 'path/to/highway';

class Extension extends Highway.Core {
  [...]
}

It's still quite unclear for us how to approach this the best way possible so we are asking you some help to dig this idea to find a suitable solution for this new feature. So far we have thought about some ideas where we would need this kind of feature:

• An extension or plugin to predict the link a user might click and smartly prefetch the page accordingly. Some works already exists going into this direction like Premonish.
• An extension or plugin to preload a bunch of assets during the navigation. Right now this is possible inside transitions using other additional libraries sometimes a bit heavy like PreloadJS and we would like to keep transitions clean and add this kind of feature inside Highway.
• Extensions or plugins to better support other tools like React or Vue.

Thanks for you help!

Hello, it's me again 😄

For the moment when Highway encounter an error page (404, 500...) it sends the NAVIGATE_ERROR event but doesn't try to load the page (event if this page have a router-view).

Is it planned to add an option to load error pages likes other pages ?

For the moment an alternative is to tell the error page to have an HTTP 200 code rather than error code if X-Requested-With: Highway header is present.

Hi!
Thanks for this awesome lib. I do some tests with React (I can't access backend) and works great.

Has any method/event to refresh Highway to listen new links included after navigate?
FYI, I rendering my component on onEnter method inside Renderer and @1.3.9 version.

Thanks in advance!

This is a stupid issue to test the README badges.

Hello,

I noticed that if I go back in my history during page fetching the URL change to the previous one but not the content, Highway shows the new content.

For example, if I go from page A to B everything is good, but then if I'm going to page C and click browser history back button during fetching, I see page B URL but page C content.

Hi, I tried this awesome library in a Gatsby site, but it's not working. Any React examples I can look at?

Thanks!

Hi, I followed your basic installation guide but I'm getting the following browser error:

Uncaught TypeError: Class constructor Renderer cannot be invoked without 'new'

Any ideas where this could come from? Btw I'm using buble for compiling js.

Hi guys !

I'm having fun testing Highway, this is easy to set up 👍

However, i tried to reproduce your transition example (https://highway.js.org/examples/transitions.html) with the new GSAP v3. I'm having some issue with it... i don't know exactly if it's a GSAP or Highway related issue... 😅

This code doesn't fire done function

// File: fade.js
import Highway from '@dogstudio/highway';
import { gsap } from 'gsap';

class Fade extends Highway.Transition {

  out({ from, done }) {

    // Fading out current content
    gsap.fromTo(from,
      { opacity: 1 },
      {
        opacity: 0,
        duration: 0.5,
        onComplete: done
      }
    );
  }

  in({ from, to, done }) {

    // Then Reset Scroll
    window.scrollTo(0, 0);

    // Remove Old View
    from.remove();

    // And finally shows up new content
    gsap.fromTo(to,
      { opacity: 0 },
      {
        opacity: 1,
        duration: 0.5,
        onComplete: done
      }
    );
  }

}

export default Fade;

I tried to add onCompleteParams: this on both methos (in / out), it works but i have some flickering when replacing/animating content.. It's a bit weird, it's not as smooth as gsap 2.1.3.

I think i'll stay with gsap 2.1.3 at the moment :D

Have a nice day 👋

Hi, thanks again for an awesome plugin! I saw that you guys render the highway files like this..

		this.H = new Highway.Core({
			renderers: {
				'home': () => import('../renderers/home'),
				'page': () => import('../renderers/page'),
				'default': DefaultRenderer
			},
			transitions: {
				default: DefaultTransition
			}
		})

And It's working fine, but when I now run my webpack, I've got some new files in my dist map, I've got files like this

0.bundle.js
1.bundle.js
2.bundle.js
3.bundle.js
4.bundle.js

My webpack file

'use strict';

const path = require('path')
const webpack = require("webpack")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
const SvgStore = require('webpack-svgstore-plugin')

module.exports = {
  context: path.resolve(__dirname, "src"),
  entry: {
    app: './js/app.js'
  },
  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js'
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        sourceMap: true
      }),
      new OptimizeCSSAssetsPlugin({
        cssProcessorPluginOptions: {
          preset: ['default', { discardComments: { removeAll: true } }],
        },       
      })
    ],
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /node_modules/,
          chunks: 'initial',
          name: 'vendor',
          enforce: true
        },
      }
    } 
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules\/(?!(dom7|swiper)\/).*/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: [
                [ "@babel/preset-env", {
                  targets: {
                    browsers: [
                      '> 0.25%',
                      'edge >= 14',
                      'not ie <= 10',
                      'not op_mini all'
                    ]
                  },
                  useBuiltIns: 'usage'
                }]
              ],
              plugins: ['@babel/plugin-syntax-dynamic-import']
            },
          }
        ],
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          { 
            loader: 'css-loader', 
            options: { 
              importLoaders: 1 
            }
          },
          {
            loader: 'sass-loader'
          }
        ],
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=1000&name=[name]-[hash].[ext]'
      }
    ],
  },
  externals: {
      'TweenMax': 'TweenMax'
  },
  resolve: {
    alias: {
      'highway': 'build/es5/highway.min.js'
    },
    modules: ['.', 'node_modules'],
    extensions: ['.js']
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "app.bundle.css"
    }),
    new SvgStore({
      // svgo options
      svgoOptions: {
        plugins: [
          { removeTitle: true }
        ]
      },
    }),
  ],
};

What would be the best way to calculate an element's height/position on onEnter() hook?

Right now I'm using something like this:

function calcListHeight() {
  locationsList.style.height = window.innerHeight - locationsList.getBoundingClientRect().top + 'px';
    requestAnimationFrame(calcListHeight);
}
requestAnimationFrame(calcListHeight);

But for some reason, this seems overkill.

First of all, good job for the tool – I started using it in a new project and so far pretty happy with the outcome and the way its integrated.

I noticed that Highway updates the title tag and there's #42 to adapt the document.body.classList but I thought about updating also some other metas for when we want to add a social sharing feature on a project through some libraries which take client-side meta data.

Came up with this, there's most probably a better way to write this but thought I'd share – Maybe consider adding a similar feature in the core of Highway?

H.on("NAVIGATE_IN", to => {
	// Adapting meta tags
	[].forEach.call(to.page.head.childNodes, node => {
		switch (node["nodeName"]) {
			case "META":
				if (node.hasAttribute("property")) document.querySelector("meta[property='" + node.getAttribute("property") + "']").setAttribute("content", node["content"]);
				if (node.hasAttribute("name")) document.querySelector("meta[name='" + node.getAttribute("name") + "']").setAttribute("content", node["content"]);
				break;
			case "LINK":
				if (node.hasAttribute("rel") && "canonical" === node.getAttribute("rel")) document.querySelector("link[rel='" + node.getAttribute("rel") + "']").setAttribute("href", node.getAttribute("href"));
				break;
			default:
				break;
		}
	});
});

Hello,

Could you put a simple starter project for HighWay ?
In fact I would like to create a static site with it .

Regards

Hello,
thanks for this new library!
I was doing some tests with Highway and I would like to ask a few questions.

In my experience with Barba I found useful the opportunity to exclude some links from the transition manager behaviour. This was needed, for example, in case of download links or just to navigate to some pages.
I understand that Highway, by design, “just works”, but maybe you can think about adding an option to exclude some link.

The exclusion could depend, for example, from an html attribute.
Otherwise, it could be useful an event fired before the navigation, in which we could test the clicked element and decide to override the default behaviour.
This event could be useful in general, for example to store the last clicked element in a variable.

Another useful addition could be the opportunity to programmatically navigate to an URL.
This functionality could be useful in case we have to prevent the normal behaviour to do something, for example animate an overlay, or redirect after an AJAX submission.

Thanks again!

On a project I'm working I use a dropdown menu as a way to filter the shown content. However I want to transition to the corresponding page using highway transitions.

HTML
<select class="project-filter uppercase select-styling bg-transparent" name="selectProj"> <option value="/projects">Toon alles ({{craft.entries.section('projects').all()|length}})</option> {% for category in craft.categories.group('projectCategories').all() %} {% set results = craft.entries.section('projects').relatedTo(category) %} <option value="/projects/{{category.slug}}" {% if category.slug == craft.app.request.getSegment(2) %} selected {% endif %}>{{category.title}} ({{results|length}})</option> {% endfor %} </select>

JS
checkFilter() { this.filter.addEventListener('change', (e) => { const link = e.target.value; this.H.redirect(link); }); }

This way it goes to the correct page however, it does not transition. When I specifically add my custom DefaultTransition this.H.redirect(link, DefaultTransition); it shows me the following error:

When I try to use a contextual transition such as 'ProjectTransition' it returns the same error. I have no clue as to what could be causing this issue.

EDIT: I can give in a contextual transitions name (instead of the actual transition). However this does not initiate the animations that are being expected from that transition and simply loads the page regularly.

EDIT EDIT: The link I was giving was something like '/projects/name' but it had to be the full URL including http / https in order to make it work. Ofcourse I had to reinitialize the function on every navigation.

I made a simple demo. But it seems that all the renderers are loaded all at once. I expect the renderer to be lazy to load, Am I wrong with which step? Thank you very much.

import Highway from "@dogstudio/highway/build/es5/highway";

const H = new Highway.Core({
  renderers: {
    index: import('./index'),
    about: import('./about')
  }
});

Repository: https://github.com/zhw2590582/I-am-sleepy
Demo: https://sleepy.im/index.html

I'd like to slide the from page out, but slide in the to page at the same time. I have set up a basic slide function, but there's a delay between the two Tweens. I've looked into using TimelineLite for it, but I first need to combine them into one function.

Any pointers for how to achieve this?

class Slide extends Highway.Transition {
    in({ from, to, done }) {
        // Reset Scroll
        window.scrollTo(0, 0)
        
        // Animation
        Tween.fromTo(to, .5,
            {x: '100%'},
            {
                x: '0%',
                onComplete: done
            }
        )
        

        // Remove Old View
        from.remove()
    }

    out({ from, done }) {
        // Animation
        Tween.fromTo(from, .5,
            {x: '0'},
            {
                x: '-100%',
                onComplete: done
            }
        )
    }
}

Thanks,
Jay

Hi,
first of all the library looks amazing!
I'm facing some issues updating body classes (standard WP behavior) after a page transition end.

Any hints for pointing me in the right direction?

thanks!

Hello,

First : Great job.

I see a drawback : the previous / next function of the browser doesn't bring you to the (previous or next) page vertical position like the browser handle natively.
This can be very useful on e-commerce website, to continue browsing other product in a list.

Is that an evolution your are thinking about ?

Hi guys,

I was trying to follow the dummy tutorial with Hightway to implement a simple transition between two pages, but I met the same issue as #6. I'm using Webpack 4 with the UglifyJs plugin.

For the record, I added a resolve with 'build/es5/highway.min.js' in my webpack, and even copied your babel configuration, but it don't seem to fix the issue (not a pro user of Webpack though).

Do you know why I meet this error? Anyway, Hightway looks great an I can't wait to implement it everywhere 🔥!

Hi again,

This is not an issue, more of a question on how this would be done in the most effecient way.

I know one can set different transitions for different renderers, but is it possible to change transition depending on other stuff, like how would I do something like this:

transitions: {
  'default': document.body.classList.contains('is-open') : TransitionOne : TransitionTwo
}

I guess I could just do my conditional stuff inside the transitions file but separating them into two transitions would be cleaner.

Hi,
I tried to re-create the Highway demo ( from the docs ), but ran into following error: "Class constructor Transition cannot be invoked without 'new'"

Here is the sample project from Highway docs: https://codesandbox.io/s/l5k94z3917

I tried compiling it with Parcel, with Webpack and Rollup, same error.

Hi, I'm wondering if this is a caching problem?, I'm trying to change the URL on click, with right attributes, it's working without highway, because the page is hard refresh on each click, So I'm wondering if you guys know how to fix this problem?

Here is a video that describe the problem! https://drive.google.com/file/d/1YGK8iNx59ep1hzpV_18CO7S5oOEBXbBX/view?usp=sharing

Hi! I have form on my website. I use preventDefault(), so I don’t overload the page.

 e.preventDefault();
    axios
        .post(this.action)
        .then(res => {  …

Without router ajax query returns me data from my node.js server and I can make changes on the website. On the server it looks like this res.json(data);
And this date is my response to Axios.
But when I use highway.js it’s different. Res.json() render pure site with json data. I can’t understand why. I check it in firefox network monitor normally is status 200 POST Cause XHR. But when I use router Cause is : document .

I created a contextual transition, but the links that use them, I can't change the active class on them. I used both the previews from the documentation on the contextual links aswell as changing the active class while navigating in.

When I log it in the console, I can see the correct link with the right classes, but my DOM does not update.

Is this because I use the contextual transition? Or is there a way around it to set the active classes to the corresponding menu item.

Hi, first of all, very nice javascript-libary, I have only tried barba before, But I already like Highway more. I have a question, I'm using wordpress and highway, and it's works fine. But, when adminbar is showing on site and when I click on it, it will run Highway transition, and I'm don't really know how to target the wp-admin-bar and add data-router-disabled to it, So my question is, how can I destroy it with only a custom class?

It will be good feature if you guys can add it to our repo, and include it in Highway! :)

If you are interested to see my progress, check the site
Still in progress... but some content are there :)

Hi!

I'm using wordpress and highway on my site, but when I search on my page, the searchresults display's as normal, but something seems to be off, when I'm clicking at my logotype (Go back to start) the transition is running and the route-view change as it should, But the content dosen't change? what can be problem here?

The url be like name.localhost/?s=mysearch&post_type=product

I just noticed something. I'm adding Highway to an old project where we filter news articles. The filter uses parameters and we add an anchor to scroll to the right position on the page (the filters are half way down the page). The url structure we use is: /news/?type=events#posts. But when i click on the anchor the page will hard reload instead of using the default transition. When the link is without the #posts Highway will navigate to the page with the correct animation and filter. Is it something I'm doing wrong?

Hi !

I need to attach events to some children of my view.
I used to do that by getting my renderer's children using this.view.querySelector(...) on earlier versions of highway (up to 2.0.8).

Since 2.1.0, this.properties.view refers to a clone of the actual element. So to get the real DOM element I had to add at the very start of my Renderers' onEnter function the following line :

this.properties.view = this.wrap.lastElementChild

After searching in your code, I found two things causing problems in my case :

• In core.js

  highway/src/core.js

  Line 31 in eff45ae

  this.properties = this.Helpers.getProperties(document.cloneNode(true));

  the document node is cloned so the view is not the one in the DOM
• In renderer.js

  highway/src/renderer.js

  Line 37 in eff45ae

  this.wrap.insertAdjacentHTML('beforeend', this.properties.view.outerHTML);

  adding an element with this function creates a "duplicate" of the source element (this.properties.view becomes a clone)

Maybe I'm doing something wrong about it and I'm not using the correct properties/functions to get the current view ?

Anyway, thanks for this great lib 😄

Jordan

On the docs site, the items under "Examples" in the left sidebar can't be seen if the window isn't tall enough:

The sidebar isn't scrollable, which would help.

In @dogstudio/[email protected]
https://www.npmjs.com/package/@dogstudio/highway

Hello,

Can you provide an ES5 compiled version of this library?

I have troubles using it with laravel-mix because it does not compile scripts from node_modules. I tried to override the laravel-mix config to compile your script to ES5 but I have another error:

app.js:2106 Uncaught TypeError: Cannot read property 'Renderer' of undefined
    at Object.<anonymous> (app.js:2106)
    at __webpack_require__ (app.js:20)
    at Object.module.exports (app.js:1204)
    at __webpack_require__ (app.js:20)
    at Object.defineProperty.value (app.js:1194)
    at __webpack_require__ (app.js:20)
    at app.js:63
    at app.js:66

It seems that the default export is undefined.

If you wish, I can provide you the test project.

Thanks

Hi, I wonder how it's work with Google tag manager and facebook pixel in highway? Do you guys have any exempel on that? Would nice to have a simple solution in the documentation like you have with google analytics!

<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'your-pixel-id-goes-here');
  fbq('track', 'PageView');
</script>
<noscript>
  <img height="1" width="1" style="display:none" 
       src="https://www.facebook.com/tr?id=your-pixel-id-goes-here&ev=PageView&noscript=1"/>
</noscript>

Hello,
I do not know much about Javascript and that's why I have problems adding Highway in a static HTML page.
Can you please tell me how I can integrate Highway in this static HTML page http://nirvana.bplaced.net/Norwegen/ with the same effect as on https://bandandwire.com/ ?

thank you in advance

Hey! 👋 great work on this library! Love the motivation and overall direction.

I noticed something while reading over the source code this evening though that would prevent me from using highway:

Currently, it seems that the add and remove methods of Highway.Renderer overwrite the innerHTML of the view element. This would make it impossible to create a transition where the old view and the new view are both visible on screen at the same time (i.e. the new view sliding in over the old view).

ideally, the new view would be appended to the wrapper, and the old view would not be removed until it is fully hidden.

i want to adopt highway, but unfortunately, the absence of this feature is a deal breaker for me. i would love to contribute and help with adding this feature, so let me know what you think!

cheers 🍻