Comments (4)
I'd hook this up with a stimulus controller that does the checking of whether the author is the current user against a meta tag in the head that includes the current user id. That's how we do a bunch of "when the author is X, then.." work at 37s.
from turbo.
Thanks. Would you be opening to helping piece this together? I'd be happy to turn it into a personal blog post tutorial or even an example in the official docs afterwards.
I'm not a Hey member but I did sign up for a trial to see how to piece everything together. I used your source code to get the contents of what's listed below.
Here's what I did so far:
app/views/ layouts/application.html.erb
<meta name="current-identity-id" content="<%= Current.user.id %>">
app/javascript/helpers/current_helpers.js
export const current = new Proxy({}, {
get(target, propertyName) {
const result = {}
const prefix = `current-${propertyName}-`
for (const { name, content } of document.head.querySelectorAll(`meta[name^=${prefix}]`)) {
const key = camelize(name.slice(prefix.length))
result[key] = content
}
return result
}
})
function camelize(string) {
return string.replace(/(?:[_-])([a-z0-9])/g, (_, char) => char.toUpperCase())
}
app/javascript/helpers/index.js
export * from "./current_helpers"
app/javascript/controllers/highlighter_controller.js
I'm not at the point of making this fully work yet but current
is always {}
as well.
import { Controller } from '@hotwired/stimulus'
import { current } from "../helpers"
export default class extends Controller {
connect() {
// TODO: This is an empty Proxy object
console.log(current, current.id)
// The fix is to reference `current.identity` not `current` (see my next GitHub comment)
}
This is what I get back when I console.log things in the above controller:
Proxy(Object) {}[[Handler]]: Objectget: ƒ get(target, propertyName)[[Prototype]]: Object[[Target]]: Object[[Prototype]]: Object[[IsRevoked]]: false
In your journal_params_controller
you imported current and accessed current.journal.params
in the same way I imported current and accessed current.id
in the above controller. What am I missing to allow this object to get populated?
I did notice in js/initializers/mailto_protocol_handler
you had a number of things related to awaitCurrentIdentity
but I wasn't sure how that would apply back to this use case.
from turbo.
Ah hah, I figured out the issue that led to where current
was {}
. I needed to reference current.identity
not current
. The comment in current_helpers.js
showed a reference. After making that 1 change it produced the user's ID in the above console log with no other edits.
Hooking in this controller to execute only for the current user without depending on create.turbo_stream.erb
is a different can of worms tho.
from turbo.
I'm curious how other folks handle this.
We have the ability to create custom StreamActions, which allow us to do something like this:
StreamActions.remove_later = function() {
this.targetElements.forEach((element) => element.className += this.getAttribute("class"))
setTimeout(() => {
this.targetElements.forEach((element) => element.remove())
}, this.getAttribute("after"))
}
And then in a destroy.turbo_stream.erb
we can do:
<%= turbo_stream_action_tag :remove_later, target: dom_id(@answer), after: 500, class: "transition-opacity duration-500 ease-in opacity-0" %>
Then when an element gets deleted with Turbo Streams you have a very nice fade out effect and the DOM element gets removed.
But as soon as you use any broadcast_*_to
method to broadcast the deleted element to anyone but the person deleting it, you lose this effect or more generally the ability to use custom stream actions due to the reasons described in this issue.
@dhh I hate to at-mention you directly, but what patterns can we use to leverage custom stream actions while broadcasting? Do you have any available code snippets for this? Custom stream actions feel like a great way to quickly perform custom client side work after a broadcast but with the way things are currently implemented, they don't fire.
from turbo.
Related Issues (20)
- data-turbo-permanent for cross-site / different subdomains HOT 1
- Turbo Drive form submission doesn't render exceptional 4xx page.
- Turbo frame with advance action makes wrong cache HOT 3
- Sourcemaps are included in package.json but not generated on build HOT 1
- turbo-frame tage with 'src' attribute not adding proper mimetype to fetch request HOT 1
- Preloader does not use FetchRequest and therefore does not trigger events HOT 1
- Link to a stream and advance the URL HOT 3
- connectEventSource handles incoming strings even if they aren't turbo-streams.
- Update the html lang attribute HOT 3
- Why are WS/SEE not being closed after turbo-stream-source is gone? HOT 2
- Missing TypeScript typings HOT 1
- Remove DHH for CoC Violations HOT 2
- Go back to Typescript HOT 6
- TypeScript is great, delete that PR HOT 1
- thank u for removing that stupid ts here some alternative HOT 2
- MIT != GPL
- Update readme to explain what this project about HOT 1
- Add TypeScript HOT 7
- Generate `hotwired/turbo-site` content from `hotwired/turbo` source HOT 1
- We should have some basic guarantees of types, rather than killing off it all HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from turbo.