1cg

!function() {
  var doc     = document,
      htm     = doc.documentElement,
      lct     = null,   // last click target                                              
      nearest = function(elm, tag) {
        while (elm && elm.nodeName != tag) {
          elm = elm.parentNode;
        }
        return elm;
  };

1cg

Untitled CSS Library RFP

Untitled CSS Library is a CSS library that, so far as I can tell, does not exist.

It offers the following features:

• It renders well out of the box with Vanilla HTML, like a classless CSS library such as pico
• It takes advantage of semantic, lesser used tags such as nav, main and section to allow for more elaborate layouts in pure HTML
• It offers "High Power" classes that capture high level components in, as much as is possible, a single CSS class

1cg

<div ...
     _="on htmx:configRequest(parameters)
           set parameters['description'] to my innerHTML
        on click
          if my innerHTML is 'Click to edit description'
            put '' into me 
        on blur
          if my innerHTML is ''
            put 'Click to edit description' into me"
     ...>

1cg

CRSF Handling

Handling CRSF in htmx is server-side platform dependent, but typically involves something like the following to add a token to a header or parameter:

Vanilla JS

In pure javascript you can listen to the htmx:configRequest event and set the token there:

1cg

HTMX SSE Improvements Doc

Overview

The current SSE implementation is geared towards triggering events in the DOM, requiring an HTTP request to be sent up to get new content:

  <div hx-sse="connect /event_stream">
 

1cg

{
  "id": 193101922347,
  "email": "carson@asdfasdf.org",
  "closed_at": null,
  "created_at": "2018-01-02T16:39:11-06:00",
  "updated_at": "2018-01-02T16:39:16-06:00",
  "number": 16,
  "note": null,
  "token": "f0cda8b5f4333b343fb6e1d2a0dabf99",
  "gateway": "shopify_payments",

1cg

LeadDyno/Chargebee integration:


Javascript on client site (with links to chargebee):

<script>
  LeadDyno.key="YOUR PUBLIC KEY"; // public LeadDyno API key 
  LeadDyno.recordVisit();
  LeadDyno.autoWatch(); 
  LeadDyno.initChargebee(); // <-- updates all chargebee links with tracking id

1cg

<div ic-get-from="/editmymessageslist" ic-trigger-on="load" ic-src="/editmymessageslist" ic-deps="ignore" ic-id="1" class="">
  <div uk-grid="" class="uk-grid">
    <div class="uk-width-3-5 uk-first-column">
      <h4>Manage My Message Picks
        <button class="uk-button uk-button-default" ic-get-from="views/mymessage_add_form.php" ic-target="#editmymessageform" ic-src="views/mymessage_add_form.php" ic-trigger-on="default" ic-deps="ignore">Add</button>
      </h4>
      <div class="uk-width-1-1 my-message-item list-bottom-border ">
        <i class="fa fa-edit" ic-get-from="/editmymessage/15" ic-target="#editmymessageform" ic-src="/editmymessage/15" ic-trigger-on="default" ic-deps="ignore"></i>
        Test message one
        <i class="fa fa-trash fa-right" aria-hidden="true" ic-delete-from="/deletemymessage/15" ic-confirm="Are you sure?" ic-src="/deletemymessage/15" ic-verb="DELETE" ic-trigger-on="default" ic-deps="ignore" ic-id="5"></i>

1cg

def ic_form_for(record, options = {}, &block)
  ic_attribute = record.persisted? ? "ic-put-to" : "ic-post-to" 
  ic_html = {html: {ic_attribute => url_for(record)}}
  simple_form_for(record, ic_html.merge(options), &block)
end

1cg

class IntercoolerSupport

  def initialize(controller)
    @controller = controller
  end

  def request?
    @controller.request.params['ic-request'] || ic_redirect?
  end