Refactoring the :continue functionality. Fixes #14

README.md

@@ -32,11 +32,12 @@ Annotate reagent components with lessons describing the component and how to use
   (re-learn/with-lesson
     {:id          :purchase-button-lesson
      :description "When you're ready, click here to purchase"
-     :position    :bottom           ;; optional, defaults to :right. values are :left, :right, :bottom, :unattached and :top (experimental)
-     :version     2                 ;; optional, defaults to 1
-     :attach      [:button#some-id] ;; optional, attach lesson to a dommy selector, see https://github.com/plumatic/dommy for use
-     :continue    [:table :.tr]     ;; optional, continue when this dommy selector is clicked
-     }
+     :position    :bottom                  ;; optional, defaults to :right. values are :left, :right, :bottom, :top, :unattached, :bottom-left etc
+     :version     2                        ;; optional, defaults to 1
+     :attach      [:button#some-id]        ;; optional, position lesson relative to a dommy selector, see https://github.com/plumatic/dommy for use
+     :continue    {:event :click           ;; optional, continue when this event occurs
+                   :selector [:table :.tr]
+                   :event-filter (fn [e] ...)}}
 
     (fn [] [:button.mdl-button.mdl-button--raised "Purchase"])))
 ```

dev-resources/public/css/re-learn.css

@@ -141,6 +141,12 @@
 
 .context-controls a, .lesson-navigation a {
     cursor: pointer;
+    color: hotpink;
+}
+
+.lesson-navigation a.disabled {
+    color: gray;
+    pointer-events: none;
 }
 
 .context-controls {

example/checkout/app.cljs

@@ -44,12 +44,12 @@
 
 (def basket
   (re-learn/with-lesson
-    {:id :basket-lesson
+    {:id          :basket-lesson
      :description "This is your basket where all the items you want to purchase appear. Click on an item to continue."
-     :position :left
-     :attach [:#basket :.basket-item]
-     :continue [:#basket :.basket-item]}
-
+     :position    :left
+     :attach      [:#basket :.basket-item]
+     :continue    {:event :click
+                   :selector [:#basket :.basket-item]}}
     (fn [items]
       [:table#basket.mdl-data-table
        [:thead

example/todomvc/components/todo_input.cljs

@@ -13,8 +13,10 @@
 (def component
   (re-learn/with-lesson
     {:id :todo-input-lesson
-     :description "Add new todo items by typing here, pressing Enter to save"
-     :position :bottom}
+     :description "Add new todo items by typing here, pressing Enter to save. Try it out now!"
+     :position :bottom
+     :continue {:event :keydown
+                :event-filter (fn [e] (= helpers/enter-key (.-which e)))}}
     (with-meta
       (fn []
         (let [default ""

example/todomvc/components/todos_filters.cljs

@@ -1,13 +1,19 @@
 (ns todomvc.components.todos-filters
-  (:require [todomvc.session :as session]))
+  (:require [todomvc.session :as session]
+            [re-learn.core :as re-learn]))
 
 (defn selected-class [display-type todos-display-type]
   (if (= display-type
          todos-display-type)
     "selected" ""))
 
-(defn component []
-  [:ul#filters
-   [:li [:a {:class (selected-class :all @session/todos-display-type)  :href "#/"} "All"]]
-   [:li [:a {:class (selected-class :active @session/todos-display-type) :href "#/active"} "Active"]]
-   [:li [:a {:class (selected-class :completed @session/todos-display-type) :href "#/completed"} "Completed"]]])
+(def component
+  (re-learn/with-lesson
+    {:id :filters-lesson
+     :description "Filter your view of your list using these options"
+     :position :bottom}
+    (fn []
+      [:ul#filters
+       [:li [:a {:class (selected-class :all @session/todos-display-type)  :href "#/"} "All"]]
+       [:li [:a {:class (selected-class :active @session/todos-display-type) :href "#/active"} "Active"]]
+       [:li [:a {:class (selected-class :completed @session/todos-display-type) :href "#/completed"} "Completed"]]])))

example/todomvc/core.cljs

@@ -33,10 +33,11 @@
      :lessons [{:id :welcome
                 :description [:div
                               [:h2 "Welcome"]
-                              "Welcome to the re-learn example"]}
-               re-learn-controls
+                              "Welcome to your todo list. Let's explore what you can do!"]}
                todo-input/component
-               todos-list/component]}
+               todos-list/component
+               todos-filters/component
+               re-learn-controls]}
     (fn []
       [:div
        [:section#todoapp

src/re_learn/model.cljs

@@ -15,7 +15,7 @@
 
 (def ^:private interceptors
   [(re-frame/path state)
-   ;;re-frame/debug
+   re-frame/debug
    re-frame/trim-v
    (re-frame/after validate-schema)])
 
@@ -34,13 +34,18 @@
                           ::local-storage/save [:re-learn/lessons-learned {}]}))
 
 (re-frame/reg-fx ::on-dom-event
-                 (fn [[action selector on-event]]
-                   (dom/listen-once! (dom/sel1 selector) action on-event)))
+                 (fn [[action dom-node on-event]]
+                   (dom/listen! dom-node action on-event)))
 
-(re-frame/reg-fx ::trigger-dom-event
-                 (fn [[action selector]]
-                   (.dispatchEvent (dom/sel1 selector)
-                                   (js/MouseEvent. (name action) #js {:bubbles true}))))
+(re-frame/reg-fx ::unlisten-dom-event
+                 (fn [[action dom-node on-event]]
+                   (dom/unlisten! dom-node action on-event)))
+
+(re-frame/reg-event-fx ::deregister-dom-event
+                       interceptors
+                       (fn [{:keys [db]} [event dom-node on-event]]
+                         {:db db
+                          ::unlisten-dom-event [event dom-node on-event]}))
 
 (re-frame/reg-event-db ::highlighted-lesson
                        interceptors
@@ -84,16 +89,6 @@
                            {:db (assoc db :lessons-learned lessons-learned)
                             ::local-storage/save [:re-learn/lessons-learned lessons-learned]})))
 
-(re-frame/reg-event-fx ::trigger-lesson-learned
-                       interceptors
-                       (fn [{:keys [db]} [lesson-id]]
-                         (let [{:keys [continue]} (get-in db [:lessons lesson-id])]
-                           (if continue
-                             {::trigger-dom-event [:click continue]
-                              :db db}
-                             {:dispatch [::lesson-learned lesson-id]
-                              :db db}))))
-
 (re-frame/reg-event-fx ::lesson-unlearned
                        interceptors
                        (fn [{:keys [db]} [lesson-id]]
@@ -130,10 +125,19 @@
 (re-frame/reg-event-fx ::prepare-lesson
                        interceptors
                        (fn [{:keys [db]} [lesson-id]]
-                         (if-let [continue (get-in db [:lessons lesson-id :continue])]
-                           {:db db
-                            ::on-dom-event [:click continue #(re-frame/dispatch [::lesson-learned lesson-id])]}
-                           {:db db})))
+                         (let [lesson (get-in db [:lessons lesson-id])]
+                           (if (:continue lesson)
+                             (let [{:keys [event selector event-filter]
+                                    :or {event-filter identity}} (:continue lesson)
+                                   dom-node (when selector (dom/sel1 selector) (:dom-node lesson))]
+                               {:db db
+                                ::on-dom-event [event
+                                                dom-node
+                                                (fn listener [e]
+                                                  (when (event-filter e)
+                                                    (re-frame/dispatch [::lesson-learned lesson-id])
+                                                    (re-frame/dispatch [::deregister-dom-event event dom-node listener])))]})
+                             {:db db}))))
 
 (defn- already-learned?
   ([lessons-learned]

src/re_learn/schema.cljs

@@ -13,7 +13,9 @@
              :position                  (s/enum :left :right :top :bottom :unattached :top-left :top-right :bottom-left :bottom-right)
              (s/optional-key :dom-node) s/Any
              (s/optional-key :attach)   DommySelector
-             (s/optional-key :continue) DommySelector})
+             (s/optional-key :continue) {:event                         s/Keyword
+                                         (s/optional-key :selector)     DommySelector
+                                         (s/optional-key :event-filter) (s/pred fn?)}})
 
 (def Tutorial
   {:id          TutorialId

src/re_learn/views.cljs

@@ -108,8 +108,10 @@
         [:a {:on-click #(re-frame/dispatch [::model/lesson-unlearned (get-in @context [:previous-lesson :id])])}
          (gstring/unescapeEntities "❰")]
         [:span (str (get-in @context [:completion :learned]) "/"  (get-in @context [:completion :total]))]
-        [:a {:on-click #(re-frame/dispatch [::model/trigger-lesson-learned (get-in @context [:current-lesson :id])])}
-         (gstring/unescapeEntities "❱")]])
+        (let [lesson (get-in @context [:current-lesson])]
+          [:a {:class (when (:continue lesson) "disabled")
+               :on-click #(re-frame/dispatch [::model/lesson-learned (:id lesson)])}
+           (gstring/unescapeEntities "❱")])])
 
      [:div.context-controls
       [:a {:on-click #(re-frame/dispatch (into [::model/lesson-learned] (map :id (:to-learn @context))))}