@litejs/ui 23.4.1 → 24.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,8 @@
1
+
2
+
3
+ @media not (prefers-reduced-motion) {
4
+ .smooth-scroll {
5
+ scroll-behavior: smooth;
6
+ }
7
+ }
8
+
package/el/confirm.tpl CHANGED
@@ -58,7 +58,7 @@
58
58
  // ]
59
59
  %js
60
60
  View.on("confirm", function(title, opts, next) {
61
- View.blur()
61
+ El.blur()
62
62
  if (!next && typeof opts === "function") {
63
63
  next = opts
64
64
  opts = null
@@ -84,11 +84,11 @@
84
84
  El.append(body, el)
85
85
  El.render(el, scope)
86
86
  if (scope.code) {
87
- El.findAll(el, ".js-numpad").on("click", numpad)
87
+ El.$$(".js-numpad", el).on("click", numpad)
88
88
  kbMap.backspace = kbMap.del = kbMap.num = numpad
89
89
  }
90
90
  El.addKb(kbMap, el)
91
- El.findAll(el, ".js-btn").on("click", resolve)
91
+ El.$$(".js-btn", el).on("click", resolve)
92
92
  View.one("navigation", resolve)
93
93
  if (scope.bgClose) El.on(el, "click", resolve)
94
94
  El.on(el, "wheel", Event.stop)
@@ -106,7 +106,7 @@
106
106
  var num = _num == void 0 ? e.target[El.T] : _num
107
107
  code += num
108
108
  if (num == "CLEAR" || num == "del" || num == "backspace") code = ""
109
- El.md(El.find(el, ".js-body"), code.replace(/./g, "•") || opts.body)
109
+ El.md(El.$(".js-body", el), code.replace(/./g, "•") || opts.body)
110
110
  if (typeof scope.code == "number" && code.length == scope.code && id && !sent) next(sent = code, id, resolve, reject)
111
111
  }
112
112
  function resolve(e, key) {
@@ -114,9 +114,9 @@
114
114
  var action = key || El.attr(this, "data-action")
115
115
  , result = {
116
116
  code: code,
117
- input: El.val(El.find(el, ".js-input")),
118
- inputMd: El.val(El.find(el, ".js-inputMd")),
119
- select: El.val(El.find(el, ".js-select"))
117
+ input: El.val(El.$(".js-input", el)),
118
+ inputMd: El.val(El.$(".js-inputMd", el)),
119
+ select: El.val(El.$(".js-select". el))
120
120
  }
121
121
  El.kill(el, "transparent")
122
122
  El.cls(blurEl, "Confirm--blur", el = 0)
package/el/crop.view ADDED
@@ -0,0 +1,54 @@
1
+
2
+ @css
3
+ .Crop {
4
+ position: relative;
5
+ width: 400px;
6
+ height: 300px;
7
+ overflow: hidden;
8
+ }
9
+ .Crop-img {
10
+ position: absolute;
11
+ }
12
+ .Crop:after {
13
+ position: absolute;
14
+ content: "";
15
+ width: 150px;
16
+ height: 150px;
17
+ top: 75px;
18
+ left: 125px;
19
+ border: 2px solid #fff;
20
+ border-radius: 50%;
21
+ box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
22
+ pointer-events: none;
23
+ }
24
+
25
+ @js
26
+ El.bindings.initCrop = function(img) {
27
+ var zoom = 1
28
+ , parent = img.parentNode
29
+ , imgWidth = parent.offsetWidth
30
+ El.on(parent, "wheel", function(e, delta) {
31
+ if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return
32
+ Event.stop(e)
33
+ zoom += delta / 5
34
+ if (zoom < .5) zoom = .5
35
+ else if (zoom > 50) zoom = 50
36
+ scale()
37
+ })
38
+ function scale() {
39
+ El.css(img, "width", (imgWidth * zoom) + "px")
40
+ }
41
+ scale()
42
+ }
43
+
44
+ @el Crop
45
+ .Crop
46
+ img.Crop-img[src=img/demo-1.jpg] &initCrop
47
+ &on: "move"
48
+ &on: "wheel"
49
+
50
+ @view crop public
51
+ .content
52
+ h2 Crop image
53
+ Crop
54
+