Bliss includes several static methods (on the Bliss or $ object). For example, to copy all properties of an object onto another object, you would call $.extend():
var yolo = $.extend({foo: 1}, {bar: 2}); // or Bliss.extend(…)
+ let yolo = $.extend({foo: 1}, {bar: 2}); // or Bliss.extend(…)
// yolo is {foo: 1, bar: 2}
Many of Bliss’ methods take an element or an array of elements as their first argument. For example, to set both the width and padding of an element to 0, you could use the $.style() method:
@@ -206,7 +206,7 @@ $()
Select an element by selector. Mainly a shortcut for element.querySelector().
- var element = $(selector [, context])
+ let element = $(selector [, context])
- selector
@@ -219,32 +219,30 @@ $()
- The matched element or
null if none found.
- // return the first element with a class of .foo
+ // Return the first element with a class of .foo
// that is inside the first element with a class of .bar
-var ret = $(".foo", $(".bar"));
+let ret = $(".foo", $(".bar"));
// Return the first element with a class of .foo
// that is inside any element with a class of .bar
-var ret = $(".bar .foo");
+let ret = $(".bar .foo");// Get the first element with a class of .foo
-// and set its title attribute to "yolo"
+// and set its title attribute to "yolo".
// If there is no such element, this will throw an exception!
$(".foo").setAttribute("title", "yolo");null. This could cause an exception if methods are called on the result.
You might previously check if the element exists by caching the node in a variable
- into an if statement:if statement or use the optional chaining operator ?.
+ (for supporting browsers):
// Check if the .foo element exists
-// and set an attribute by using a variable "foo"
-// as a reference of the element
-var foo = $(".foo");
-if (foo) {
- foo.setAttribute("title", "yolo");
-}// Get the first element with a class of .foo
+// and, if it exists, set its title attribute to "yolo".
+// If there is no such element, this will return "undefined"
+$(".foo")?.setAttribute("title", "yolo");Get all elements that match a given selector as an array. Similar to element.querySelectorAll() but returns an Array instead of a NodeList, so it has all of the convenience methods we’ve come to love on arrays.
var array = $$(selector [, context])let array = $$(selector [, context])var array = $$(collection)let array = $$(collection)// Add an id to all <h1> headings that don’t already have one
-$$("h1:not([id])").forEach(function(h1){
- h1.id = h1.textContent.replace(/\W/g, "");
-});// Get an array with all ids on the page
-var ids = $$("[id]").map(function(element){
- return element.id;
-});// Get all of an element’s attributes starting with data-bliss-
-$$(element.attributes).filter(function(attribute){
- return attribute.name.indexOf("data-bliss-") === 0;
-}).map(function(attribute){
- return attribute.name;
-});Create an element.
-var element = $.create([tag,] [options]);let element = $.create([tag,] [options]);var paragraph = $.create("p");let paragraph = $.create("p");var div = $.create();let div = $.create();document.createElement(tag)Clone an element including its descendants, with events and data. This function is deprecated and will be removed in the next version of Bliss
- -var clone = $.clone(subject)var clone = subject._.clone()var button = $("button");
-button.addEventListener("click", function() { console.log("Click from listener!"); });
-button.onclick = function() { console.log("Click from inline event!"); };
-var button2 = button._.clone();
-// If clicked, button2 will print both messageselement.cloneNode()Set multiple CSS properties with a transition and execute code after the transition is finished.
-var promise = $.transition(subject, properties [, duration])var promise = subject._.transition(properties [, duration])let promise = $.transition(subject, properties [, duration])let promise = subject._.transition(properties [, duration])Execute code after the DOM is ready.
-var promise = $.ready([context], [callback])let promise = $.ready([context], [callback])Defer code until an event fires.
-var promise = $.when(subject, type [, test])var promise = subject._.when(type [, test])let promise = $.when(subject, type [, test])let promise = subject._.when(type [, test])Run a method on all elements of an array, get the results as an array.
-var ret = $.all(array, method [, args...])var ret = array._.all(method [, args...])let ret = $.all(array, method [, args...])let ret = array._.all(method [, args...])Helper for defining OOP-like “classes”, for those who have been irreparably damaged by Java-like languages.
-var myClass = $.Class(options);let myClass = $.Class(options);Loop over properties of an object and map them onto another object.
-var ret = $.each(obj, callback [, ret]);let ret = $.each(obj, callback [, ret]);var o1 = {foo: 1, bar:2}
+ let o1 = {foo: 1, bar:2}
o2 = $.extend(o1, {foo: 3, baz: 4});
// o2 is {foo: 3, bar: 2, baz: 4}
// Get typography-related computed style on <body>
-var type = $.extend({},
+let type = $.extend({},
getComputedStyle(document.body),
/^font|^lineHeight$/);
@@ -1235,7 +1200,7 @@ type
Determine the internal JavaScript [[Class]] of an object.
- var type = $.type(object)
+ let type = $.type(object)
- object
@@ -1256,7 +1221,7 @@ type
value
Get the value of a nested property reference if it exists, and undefined without any errors if not.
- var val = $.value([obj, ] property1, [property2 [,...[, propertyN]]])
+ let val = $.value([obj, ] property1, [property2 [,...[, propertyN]]])
- obj
@@ -1280,7 +1245,7 @@ fetch
Helper for AJAX calls, inspired by the new Fetch API.
- var promise = $.fetch(url, options)
+ let promise = $.fetch(url, options)
- url
@@ -1331,7 +1296,7 @@ load
Include a CSS or JS resource dynamically, only once, and run code after it has loaded.
- var promise = $.load(url [, base])
+ let promise = $.load(url [, base])
- url
@@ -1352,7 +1317,7 @@ include
Include a script file conditionally and run code after it has loaded.
- var promise = $.include([condition,] url)
+ let promise = $.include([condition,] url)
- condition
@@ -1366,16 +1331,16 @@ include
// Load ES5-shim if needed
-var url = "https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.3.1/es5-sham.min.js";
+let url = "https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.3.1/es5-sham.min.js";
$.include(Array.prototype.forEach, url).then(function(){
$$("div").forEach(function(){
// some code here
});
});
// Load dropbox.js from a CDN if it’s not already loaded and run some code that uses it
-var url = "https://cdnjs.cloudflare.com/ajax/libs/dropbox.js/0.10.2/dropbox.min.js";
+let url = "https://cdnjs.cloudflare.com/ajax/libs/dropbox.js/0.10.2/dropbox.min.js";
$.include(self.Dropbox, url).then(function(){
- var client = new Dropbox.Client({ key: key });
+ let client = new Dropbox.Client({ key: key });
// ...
});
@@ -1439,7 +1404,7 @@ overload
- var method = Bliss.overload(function (key, val) {
+ let method = Bliss.overload(function (key, val) {
console.log(key + " " + val);
}, 0);
method('name', 'Lea');
@@ -1449,7 +1414,7 @@ overload
// lang javascript
- var method = Bliss.overload(function (param1, param2, key, val) {
+ let method = Bliss.overload(function (param1, param2, key, val) {
console.log(key + " " + val);
}, 2);
method(param, param, 'name', 'Lea');
diff --git a/index.html b/index.html
index 8058740..a510112 100644
--- a/index.html
+++ b/index.html
@@ -49,12 +49,12 @@ A quick look
Show the #banner-message element that is hidden with display:none in its CSS when any button in #button-container is clicked [example credit]
- var hiddenBox = document.querySelector("#banner-message");
+ let hiddenBox = document.querySelector("#banner-message");
document.querySelector("#button-container button")
.addEventListener("click", function(event) {
hiddenBox.style.display = "block";
});
- var hiddenBox = $("#banner-message");
+ let hiddenBox = $("#banner-message");
$("#button-container button")
.addEventListener("click", function(event) {
hiddenBox.style.display = "block";
@@ -66,10 +66,10 @@ A quick look
Remove the following pink <pre> element from the DOM with a fade out and shrink transition, then display a message:
- var demo = document.querySelector("#transition-demo");
+ let demo = document.querySelector("#transition-demo");
demo.style.transitionProperty = "opacity, transform";
demo.style.transitionDuration = "400ms";
-var callback = function() {
+let callback = function() {
demo.removeEventListener("transitionend", callback);
clearTimeout(t);
this.parentNode.removeChild(this);
@@ -77,7 +77,7 @@ A quick look
};
demo.addEventListener("transitionend", callback);
// Failsafe
-var t = setTimeout(callback, 450);
+let t = setTimeout(callback, 450);
demo.style.opacity = "0";
demo.style.transform = "scale(0)";
$("#transition-demo")._.transition({
@@ -91,10 +91,10 @@ A quick look
Wrap all headings with links to their section (check this section’s heading after running):
- var h1s = document.querySelectorAll("section[id] > h1");
-for (var i=0; i<h1s.length; i++) {
- var h1 = h1s[i];
- var a = document.createElement("a");
+ let h1s = document.querySelectorAll("section[id] > h1");
+for (let i=0; i<h1s.length; i++) {
+ let h1 = h1s[i];
+ let a = document.createElement("a");
a.href = "#" + h1.parentNode.id;
a.title = "Permalink";
a.className = "permalink";
@@ -133,11 +133,11 @@ A quick look
Look up the UK postcode with postcodes.io and print the results here:
- var txt = document.querySelector("#postcode");
-var out = document.querySelector("#uk-area");
+ let txt = document.querySelector("#postcode");
+let out = document.querySelector("#uk-area");
(txt.oninput = function() {
- var url = "http://api.postcodes.io/postcodes/"+txt.value;
- var xhr = new XMLHttpRequest();
+ let url = "http://api.postcodes.io/postcodes/"+txt.value;
+ let xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = "json";
@@ -149,7 +149,7 @@ A quick look
if (xhr.status === 0
|| xhr.status >= 200 && xhr.status < 300
|| xhr.status === 304) {
- var json = xhr.response.result;
+ let json = xhr.response.result;
out.textContent = [
json.parliamentary_constituency,
@@ -166,10 +166,10 @@ A quick look
};
xhr.send(null);
})();
- var txt = $("#postcode");
-var out = $("#uk-area");
+ let txt = $("#postcode");
+let out = $("#uk-area");
(txt.oninput = function() {
- var url = "http://api.postcodes.io/postcodes/"+txt.value;
+ let url = "http://api.postcodes.io/postcodes/"+txt.value;
$.fetch(url, {
responseType: "json"
@@ -182,7 +182,7 @@ A quick look
- var json = xhr.response.result;
+ let json = xhr.response.result;
out.textContent = [
json.parliamentary_constituency,