Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Much simpler Plugin system. New halt(). Performance improvements. #13

Merged
merged 1 commit into from
Feb 6, 2024
Merged

Much simpler Plugin system. New halt(). Performance improvements. #13

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 27 additions & 29 deletions surreal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
// Welcome to Surreal 1.0.3
// Welcome to Surreal 1.1.0
// Documentation: https://github.com/gnat/surreal
// Locality of Behavior (LoB): https://htmx.org/essays/locality-of-behaviour/
var $ = { // You can use a different name than "$", but you must change the reference in any plugins you use!
$: this, // Convenience for core internals.
sugars: {}, // Extra syntax sugar for plugins.
plugins: [],

// Table of contents and convenient call chaining sugar. For a familiar "jQuery like" syntax. 🙂
// Check before adding new: https://youmightnotneedjquery.com/
sugar(e) {
if (e == null) { console.warn(`Surreal: Cannot use "${e}". Missing a character?`) }
if (e.hasOwnProperty('hasSurreal')) return e // Surreal already applied

// General
e.run = (value) => { return $.run(e, value) }
Expand All @@ -28,22 +29,20 @@ var $ = { // You can use a different name than "$", but you must change the refe
e.off = (name, fn) => { return $.off(e, name, fn) }
e.offAll = (name) => { return $.offAll(e, name) }
e.off_all = e.offAll
e.disable = (name) => { return $.disable(e) }
e.enable = (name) => { return $.enable(e) }
e.disable = () => { return $.disable(e) }
e.enable = () => { return $.enable(e) }
e.trigger = (name) => { return $.trigger(e, name) }
e.halt = () => { return $.halt(e) }
e.halt = (ev, keepBubbling, keepDefault) => { return $.halt(ev, keepBubbling, keepDefault) }

// Attributes.
e.attribute = (name, value) => { return $.attribute(e, name, value) }
e.attributes = e.attribute
e.attr = e.attribute

// Add all plugin sugar.
$._e = e // Plugin access to "e" for chaining.
for (const [key, value] of Object.entries(sugars)) {
e[key] = value.bind($) //e[key] = value
}
// Add all plugins.
$.plugins.forEach(function(func) { func(e) })

e.hasSurreal = 1
return e
},

Expand Down Expand Up @@ -183,16 +182,13 @@ var $ = { // You can use a different name than "$", but you must change the refe
return e
},

// Halt event / prevent default.
halt(e) {
if (e instanceof Event) {
if (!e.preventDefault) {
e.returnValue = false
} else {
e.preventDefault()
}
// Halt event. Default: Stops normal event actions and event propagation.
halt(ev, keepBubbling=false, keepDefault=false) {
if (ev instanceof Event) {
if(!keepDefault) ev.preventDefault()
if(!keepBubbling) ev.stopPropagation()
}
return e
return ev
},

// Add or remove attributes from element(s)
Expand Down Expand Up @@ -259,10 +255,10 @@ var $ = { // You can use a different name than "$", but you must change the refe
}

// 📦 Plugin: Effects
var $effects = {
function pluginEffects(e) {
// Fade out and remove element.
// Equivalent to jQuery fadeOut(), but actually removes the element!
fadeOut(e, fn=false, ms=1000, remove=true) {
function fadeOut(e, fn=false, ms=1000, remove=true) {
let thing = e
if ($.isNodeList(e)) e.forEach(_ => { fadeOut(_, fn, ms) })
if ($.isNode(e)) {
Expand All @@ -275,9 +271,9 @@ var $effects = {
if (remove) $.remove(thing) // Remove element after animation is completed?
})()
}
},
}
// Fade in an element that has opacity under 1
fadeIn(e, fn=false, ms=1000) {
function fadeIn(e, fn=false, ms=1000) {
let thing = e
if($.isNodeList(e)) e.forEach(_ => { fadeIn(_, fn, ms) })
if($.isNode(e)) {
Expand All @@ -292,14 +288,16 @@ var $effects = {
if (fn === 'function') fn(thing) // Run custom callback?
})()
}
},
$effects
}
// Add sugar
e.fadeOut = (fn, ms, remove) => { return fadeOut(e, fn, ms, remove) }
e.fade_out = e.fadeOut
e.fadeIn = (fn, ms) => { return fadeIn(e, fn, ms) }
e.fade_in = e.fadeIn
}
$ = {...$, ...$effects}
$.sugars['fadeOut'] = (fn, ms) => { return $.fadeOut($._e, fn=false, ms=1000) }
$.sugars['fadeIn'] = (fn, ms) => { return $.fadeIn($._e, fn=false, ms=1000) }
$.sugars['fade_out', 'fade_in'] = $.sugars['fadeOut', 'fadeIn']

// Add plugins...
$.plugins.push(pluginEffects)
$.globalsAdd() // Full convenience.

console.log("Surreal: Loaded.")
Expand Down
Loading