<commit_before>;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) 2015-2016 <NAME> <<EMAIL>>
;; Copyright (c) 2015-2016 <NAME> <<EMAIL>>

(ns uxbox.main.ui.workspace.sidebar.options.page
  "Page options menu entries."
  (:require [lentes.core :as l]
            [potok.core :as ptk]
            [cuerdas.core :as str]
            [uxbox.main.store :as st]
            [uxbox.main.constants :as c]
            [uxbox.main.refs :as refs]
            [uxbox.main.data.pages :as udp]
            [uxbox.main.data.workspace :as udw]
            [uxbox.main.data.lightbox :as udl]
            [uxbox.builtins.icons :as i]
            [uxbox.main.ui.workspace.colorpicker]
            [rumext.core :as mx :include-macros true]
            [uxbox.util.data :refer [parse-int]]
            [uxbox.util.spec :refer [color?]]
            [uxbox.util.dom :as dom]))

(mx/defcs measures-menu
  {:mixins [mx/static mx/reactive]}
  [own menu]
  (let [{:keys [id metadata] :as page} (mx/react refs/selected-page)
        metadata (merge c/page-metadata metadata)]
    (letfn [(on-size-change [attr]
              (when-let [value (-> (mx/ref-node own (name attr))
                                   (dom/get-value)
                                   (parse-int nil))]
                (st/emit! (->> (assoc metadata attr value)
                               (udp/update-metadata id)))))

            (on-color-change []
              (when-let [value (-> (mx/ref-node own "color")
                                   (dom/get-value)
                                   (#(if (color? %) % nil)))]
                (->> (assoc metadata :background value)
                     (udp/update-metadata id)
                     (st/emit!))))

            (on-name-change []
              (when-let [value (-> (mx/ref-node own "name")
                                   (dom/get-value)
                                   (str/trim))]
                (st/emit! (->> (assoc page :name value)
                               (udp/update-page id)))))

            (show-color-picker [event]
              (let [x (.-clientX event)
                    y (.-clientY event)
                    opts {:x x :y y
                          :default "#ffffff"
                          :transparent? true
                          :attr :background}]
                (udl/open! :workspace/page-colorpicker opts)))]
      [:div.element-set
       [:div.element-set-title (:name menu)]
       [:div.element-set-content
        [:span "Name"]
        [:div.row-flex
         [:div.input-element
          [:input.input-text
           {:type "text"
            :ref "name"
            :on-change on-name-change
            :value (:name page)
            :placeholder "page name"}]]]

        [:span "Size"]
        [:div.row-flex
         [:div.input-element.pixels
          [:input.input-text
           {:type "number"
            :ref "width"
            :on-change #(on-size-change :width)
            :value (:width metadata)
            :placeholder "width"}]]
         [:div.input-element.pixels
          [:input.input-text
           {:type "number"
            :ref "height"
            :on-change #(on-size-change :height)
            :value (:height metadata)
            :placeholder "height"}]]]
        [:span "Background color"]
        [:div.row-flex.color-data
         [:span.color-th
          {:style {:background-color (:background metadata)}
           :on-click show-color-picker}]
         [:div.color-info
          [:input
           {:on-change on-color-change
            :ref "color"
            :value (:background metadata)}]]]]])))

(mx/defcs grid-options-menu
  {:mixins [mx/static mx/reactive]}
  [own menu]
  (let [{:keys [id metadata] :as page} (mx/react refs/selected-page)
        metadata (merge c/page-metadata metadata)]
    (letfn [(on-x-change []
              (when-let [value (-> (mx/ref-node own "x-axis")
                                   (dom/get-value)
                                   (parse-int nil))]
                (st/emit!
                 (->> (assoc metadata :grid-x-axis value)
                      (udw/update-metadata id)))))
            (on-y-change []
              (when-let [value (-> (mx/ref-node own "y-axis")
                                   (dom/get-value)
                                   (parse-int nil))]
                (st/emit!
                 (->> (assoc metadata :grid-y-axis value)
                      (udw/update-metadata id)))))
            (on-color-change []
              (when-let [value (-> (mx/ref-node own "color")
                                   (dom/get-value)
                                   (#(if (color? %) % nil)))]
                (->> (assoc metadata :grid-color value)
                     (udp/update-metadata id)
                     (st/emit!))))
            (show-color-picker [event]
              (let [x (.-clientX event)
                    y (.-clientY event)
                    opts {:x x :y y
                          :transparent? true
                          :default "#cccccc"
                          :attr :grid-color}]
                (udl/open! :workspace/page-colorpicker opts)))]
      [:div.element-set
       [:div.element-set-title (:name menu)]
       [:div.element-set-content
        [:span "Size"]
        [:div.row-flex
         [:div.input-element.pixels
          [:input.input-text
           {:type "number"
            :ref "x-axis"
            :value (:grid-x-axis metadata)
            :on-change on-x-change
            :placeholder "x"}]]
         [:div.input-element.pixels
          [:input.input-text
           {:type "number"
            :ref "y-axis"
            :value (:grid-y-axis metadata)
            :on-change on-y-change
            :placeholder "y"}]]]
        [:span "Color"]
        [:div.row-flex.color-data
         [:span.color-th
          {:style {:background-color (:grid-color metadata)}
           :on-click show-color-picker}]
         [:div.color-info
          [:input
           {:on-change on-color-change
            :ref "color"
            :value (:grid-color metadata "#cccccc")}]]]]])))
<commit_msg>fix(frontend): adapt page options sidebar to new react<commit_after>;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) 2015-2016 <NAME> <<EMAIL>>
;; Copyright (c) 2015-2016 <NAME> <<EMAIL>>

(ns uxbox.main.ui.workspace.sidebar.options.page
  "Page options menu entries."
  (:require [lentes.core :as l]
            [potok.core :as ptk]
            [cuerdas.core :as str]
            [uxbox.main.store :as st]
            [uxbox.main.constants :as c]
            [uxbox.main.refs :as refs]
            [uxbox.main.data.pages :as udp]
            [uxbox.main.data.workspace :as udw]
            [uxbox.main.data.lightbox :as udl]
            [uxbox.builtins.icons :as i]
            [uxbox.main.ui.workspace.colorpicker]
            [rumext.core :as mx :include-macros true]
            [uxbox.util.data :refer [parse-int]]
            [uxbox.util.spec :refer [color?]]
            [uxbox.util.dom :as dom]))

(mx/defcs measures-menu
  {:mixins [mx/static mx/reactive]}
  [own menu]
  (let [{:keys [id metadata] :as page} (mx/react refs/selected-page)
        metadata (merge c/page-metadata metadata)]
    (letfn [(on-size-change [attr]
              (when-let [value (-> (mx/ref-node own (name attr))
                                   (dom/get-value)
                                   (parse-int nil))]
                (st/emit! (->> (assoc metadata attr value)
                               (udp/update-metadata id)))))

            (on-color-change []
              (when-let [value (-> (mx/ref-node own "color")
                                   (dom/get-value)
                                   (#(if (color? %) % nil)))]
                (->> (assoc metadata :background value)
                     (udp/update-metadata id)
                     (st/emit!))))

            (on-name-change []
              (when-let [value (-> (mx/ref-node own "name")
                                   (dom/get-value)
                                   (str/trim))]
                (st/emit! (->> (assoc page :name value)
                               (udp/update-page id)))))

            (show-color-picker [event]
              (let [x (.-clientX event)
                    y (.-clientY event)
                    opts {:x x :y y
                          :default "#ffffff"
                          :transparent? true
                          :attr :background}]
                (udl/open! :workspace/page-colorpicker opts)))]
      [:div.element-set
       [:div.element-set-title (:name menu)]
       [:div.element-set-content
        [:span "Name"]
        [:div.row-flex
         [:div.input-element
          [:input.input-text
           {:type "text"
            :ref "name"
            :on-change on-name-change
            :value (str (:name page))
            :placeholder "page name"}]]]

        [:span "Size"]
        [:div.row-flex
         [:div.input-element.pixels
          [:input.input-text
           {:type "number"
            :ref "width"
            :on-change #(on-size-change :width)
            :value (str (:width metadata))
            :placeholder "width"}]]
         [:div.input-element.pixels
          [:input.input-text
           {:type "number"
            :ref "height"
            :on-change #(on-size-change :height)
            :value (str (:height metadata))
            :placeholder "height"}]]]

        [:span "Background color"]
        [:div.row-flex.color-data
         [:span.color-th
          {:style {:background-color (:background metadata)}
           :on-click show-color-picker}]
         [:div.color-info
          [:input
           {:on-change on-color-change
            :ref "color"
            :value (:background metadata)}]]]]])))

(mx/defcs grid-options-menu
  {:mixins [mx/static mx/reactive]}
  [own menu]
  (let [{:keys [id metadata] :as page} (mx/react refs/selected-page)
        metadata (merge c/page-metadata metadata)]
    (letfn [(on-x-change []
              (when-let [value (-> (mx/ref-node own "x-axis")
                                   (dom/get-value)
                                   (parse-int nil))]
                (st/emit!
                 (->> (assoc metadata :grid-x-axis value)
                      (udw/update-metadata id)))))
            (on-y-change []
              (when-let [value (-> (mx/ref-node own "y-axis")
                                   (dom/get-value)
                                   (parse-int nil))]
                (st/emit!
                 (->> (assoc metadata :grid-y-axis value)
                      (udw/update-metadata id)))))
            (on-color-change []
              (when-let [value (-> (mx/ref-node own "color")
                                   (dom/get-value)
                                   (#(if (color? %) % nil)))]
                (->> (assoc metadata :grid-color value)
                     (udp/update-metadata id)
                     (st/emit!))))
            (show-color-picker [event]
              (let [x (.-clientX event)
                    y (.-clientY event)
                    opts {:x x :y y
                          :transparent? true
                          :default "#cccccc"
                          :attr :grid-color}]
                (udl/open! :workspace/page-colorpicker opts)))]
      [:div.element-set
       [:div.element-set-title (:name menu)]
       [:div.element-set-content
        [:span "Size"]
        [:div.row-flex
         [:div.input-element.pixels
          [:input.input-text
           {:type "number"
            :ref "x-axis"
            :value (:grid-x-axis metadata)
            :on-change on-x-change
            :placeholder "x"}]]
         [:div.input-element.pixels
          [:input.input-text
           {:type "number"
            :ref "y-axis"
            :value (:grid-y-axis metadata)
            :on-change on-y-change
            :placeholder "y"}]]]
        [:span "Color"]
        [:div.row-flex.color-data
         [:span.color-th
          {:style {:background-color (:grid-color metadata)}
           :on-click show-color-picker}]
         [:div.color-info
          [:input
           {:on-change on-color-change
            :ref "color"
            :value (:grid-color metadata "#cccccc")}]]]]])))

{'fraction_non_alphanumeric': 0.1452984722003465, 'fraction_numerical': 0.003150102378327296, 'mean_word_length': 1.2684887459807075, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 51, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 24, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5711252', 'n_tokens_mistral': 3848, 'n_tokens_neox': 3637, 'n_words': 828}