External javascript does not work

By TuTToWeB on 30 Jun 2016 at 16:21 UTC

Dear all
I am developing my own theme and this is the libraries yml file

global-styling:
  version: 1.x
  css:
    theme:
      css/bootstrap.css: {}
      css/freelancer.css: {}
      css/font-awesome/css/font-awesome.min.css: {}
      http://fonts.googleapis.com/css?family=Montserrat:400,700: {type: external}
      http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic: {type: external}

  js:
    js/bootstrap.js: {}
    js/cbpAnimatedHeader.js: {}
    js/classie.js: {}
    js/freelancer.js: {}
    http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js: {type:external, minified: true}

  dependencies:
    - core/jquery

everything here I working fine, except the jquery.easing.min external javascript. The external css are working properly, but not this js and I don't know what I should do.

Thank you in advance for your help

Comments

You probably need to add the

Jeff Burnz commented 30 June 2016 at 23:46

You probably need to add the remote, licence and other details, heres how I have done it:

# enquire
at.enquire:
  remote: https://raw.githubusercontent.com/WickyNilliams/enquire.js
  version: "2.1.2"
  license:
    name: MIT
    url: https://raw.githubusercontent.com/WickyNilliams/enquire.js/master/LICENSE
    gpl-compatible: true
  js:
    https://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.1.2/enquire.min.js: { type: external, minified: true }
  dependencies:
    - core/jquery
    - core/matchmedia

I would not jam everything in one library like that either (for one you can't add the proper versions), split it up and create a dependencies chain.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.

Thank you for your answer,

TuTToWeB commented 5 July 2016 at 11:02

Thank you for your answer,
I am not quite familiar with this news on drupal 8.

If I create a new YAML for this library, how can I assign the dependence on this? Basically, how should I do to get the dependencies chain as you suggested?

Like this

Jeff Burnz commented 5 July 2016 at 11:23

bootstrap:
  version: 3.3.6
  css:
    theme:
      css/bootstrap.css: {}
  js:
    js/bootstrap.js: {}

fonts:
  version: 1.x
  css:
    theme:
      css/font-awesome/css/font-awesome.min.css: {}
      http://fonts.googleapis.com/css?family=Montserrat:400,700: {type: external}
      http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic: {type: external}

classie:
  version: 1.0.1
  js:
    js/classie.js: {}

cbp_animated_header:
  version: 1.x
  js:
     js/cbpAnimatedHeader.js: {}

jquery_easing:
  remote: https://github.com/gdsmith/jquery.easing
  version: 1.3
  license:
    name: BSD
    url: https://github.com/gdsmith/jquery.easing/blob/master/LICENSE
    gpl-compatible: true
  js:
    https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js: {type:external, minified: true}
  dependencies:
    - core/jquery

freelancer:
  version: 1.1.0
  css:
    theme:
      css/freelancer.css: {}
  js:
    js/freelancer.js: {}
  dependencies:
    - mytheme/bootstrap
    - mytheme/fonts
    - mytheme/classie
    - mytheme/cbp_animated_header
    - mytheme/jquery_easing

The the only library to load for your theme is "mytheme/freelancer"

EDIT: I noticed you were using the wrong URL for jQuery easing, cdnjs is always https, I fixed it in the above code - so that will be the real problem :)

https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.

Also you should really always

Jeff Burnz commented 5 July 2016 at 11:25

Also you should really always use https for Google fonts as well, if you use http its insecure and you will get mixed content warnings if you use https on your site.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.