Skip to content

Latest commit

 

History

History
118 lines (82 loc) · 2.78 KB

0.5-0.6.md

File metadata and controls

118 lines (82 loc) · 2.78 KB

From 0.5 to 0.6

Important changes

  • jQuery has been removed
  • Icons are now svg based

Removing jQuery

You can read more about removing jQuery from your project here: http://youmightnotneedjquery.com/

Loading SirTrevor.Editor

var editor = new SirTrevor.Editor({
  el: $('.sir-trevor')
});

Will need to change to:

var editor = new SirTrevor.Editor({
  el: $('.sir-trevor')[0]
});

or replace with native functionality:

var editor = new SirTrevor.Editor({
  el: document.querySelector('.sir-trevor')
});

Referencing elements

Elements are now native HTMLNode elements rather than jQuery elements.

To deal with this change you'll need to modify your element refernces to not include a starting $ and wrap any elements retrieved in $(element) if you still wish to use jQuery.

Elements that have changed name

# Editor
$outer => outer
$wrapper => wrapper

# Blocks
$editor => editor
$inner => inner
$inputs => inputs

Finding inner elements

If you were using the in-built find syntax on a SirTrevor element you'll need to modify your behaviour.

# Before
this.$('.selector') => Array of jQuery elements

# Now
this.$('.selector') => NodeList
this.$('.selector')[0] => Element

Also as this returns a NodeList you'll need to update your calls to work on individual elements.

# Before
this.$('.selector').hide();

# Now
Array.prototype.forEach.call(this.$('.selector'), function(element) {
  $(element).hide();
}

Event delegation

In your blocks you might be relying on jQuery on/bind/delegate functions. If this is the case you can look at our examples to replicate this functionality in your own code.

# src/packages/events.js
element.on(selector, event) => Events.delegate(element, selector, event)

Blocks that include the fetchable mixin

We now use the built in Fetch browser Api for ajax requests. https://developer.mozilla.org/en/docs/Web/API/Fetch_API We've also included a polyfill for older browsers: https://github.com/github/fetch

When working with a different domain you'll need to bypass cors protection using the following option.

this.fetch(url, {jsonp: true})

If not using jsonp then the options get passed directly to the fetch function. A list of the available options can be found here https://developer.mozilla.org/en-US/docs/Web/API/Request

Icons are now svg based

Sir Trevor now requires an external svg file for icons rather than the embedded iconfont. You'll want to edit your sir-trevor initialiser to specify the location of this file.

SirTrevor.setDefaults({
 iconUrl: 'sir-trevor-icons.svg'
});

var editor = new SirTrevor.Editor({
  el: document.querySelector('.sir-trevor')
});

For more information see here https://css-tricks.com/svg-sprites-use-better-icon-fonts