feat(cropper): remove Hammer.js

A-l-y-l-e · Jul 3, 2020 · aa4a54d · aa4a54d
1 parent 33b6ff7
commit aa4a54d
Show file tree

Hide file tree

Showing 7 changed files with 253 additions and 94 deletions.
diff --git a/src/api/docs/components/image-cropper.html b/src/api/docs/components/image-cropper.html
@@ -68,21 +68,22 @@ <h2 id="cropper-with-dialog">Cropper With Dialog</h2>
   <aui-cropper-with-dialog></aui-cropper-with-dialog>
 </demo-view>
 <h2 id="cropper-image-from-url">Cropper image from URL</h2>
-<p>We can use the <code class="ttm ttx"><span class="tt18 tta3">setImageUrl</span><span class="tt18 ttae">(</span>src<span class="tt18 ttb0">:</span>&nbsp;<span class="tt18 ttcj">string</span><span class="tt18 ttae">,</span> fn<span class="tt18 ttb0">?</span><span class="tt18 ttb0">:</span>&nbsp;<span class="tt18 ttae">(</span><span class="tt18 ttae">)</span>&nbsp;<span class="tt18 ttb0">=></span>&nbsp;<span class="tt18 tt1j">void</span><span class="tt18 ttae">)</span></code> method.</p>
+<p>You can use the <code class="ttm ttx"><span class="tt18 tta3">setImageUrl</span><span class="tt18 ttae">(</span>src<span class="tt18 ttb0">:</span>&nbsp;<span class="tt18 ttcj">string</span><span class="tt18 ttae">,</span> fn<span class="tt18 ttb0">?</span><span class="tt18 ttb0">:</span>&nbsp;<span class="tt18 ttae">(</span><span class="tt18 ttae">)</span>&nbsp;<span class="tt18 ttb0">=></span>&nbsp;<span class="tt18 tt1j">void</span><span class="tt18 ttae">)</span></code> method.</p>
 <demo-view path="docs/components/image-cropper-demo/image-cropper-example-01">
   <image-cropper-example-01></image-cropper-example-01>
 </demo-view>
 <h2 id="crop-circle">Crop Circle</h2>
+<p>For this just add the <code class="ttm ttx">border-radius: 50%</code> styles to the cropper area.</p>
 <demo-view path="docs/components/image-cropper-demo/crop-circle">
   <aui-crop-circle></aui-crop-circle>
 </demo-view>
 <h2 id="just-crop-image">Just crop image</h2>
-<p>Just crop the output image and it is not resized.</p>
+<p>Just crop the output image and it is not resized. </p>
 <demo-view path="docs/components/image-cropper-demo/image-cropper-example-02">
   <image-cropper-example-02></image-cropper-example-02>
 </demo-view>
 <h2 id="set-output-image">Set output image</h2>
-<p>Just resize the output image.</p>
+<p>If you want the image output to be equal to the size of the cropping area, for example if the cropping area is <code class="ttm ttx">300x300</code> then the output image will be <code class="ttm ttx">300x300</code></p>
 <demo-view path="docs/components/image-cropper-demo/image-cropper-example-03">
   <image-cropper-example-03></image-cropper-example-03>
 </demo-view>
diff --git a/src/api/docs/customization/color.html b/src/api/docs/customization/color.html
@@ -5,24 +5,24 @@ <h1 id="color">Color</h1>
 <h2 id="supported-values">Supported values</h2>
 <pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> color <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/color'</span><span class="tt18 ttae">;</span>
 
-<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._dccmo2dq{background:rgb(255,255,0);opacity:1;}._dccmo2dq *{color:#202020 !important;}</style><span class="_dccmo2dq"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>  <span class="tt18 tt3o">// rgb</span>
-<span class="tt18 tt1j">const</span> Black  <span class="tt18 ttb0">=</span> <style>._4tjeo0th{background:rgb(0,0,0);opacity:1;}._4tjeo0th *{color:white !important;}</style><span class="_4tjeo0th"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>            <span class="tt18 tt3o">// number</span>
-<span class="tt18 tt1j">const</span> White  <span class="tt18 ttb0">=</span> <style>._bhg9pl5i{background:rgb(255,255,255);opacity:1;}._bhg9pl5i *{color:#202020 !important;}</style><span class="_bhg9pl5i"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>     <span class="tt18 tt3o">// hex</span>
-<span class="tt18 tt1j">const</span> Text   <span class="tt18 ttb0">=</span> <style>._gruk75hg{background:rgba(0,0,0,0.87);opacity:0.87;}._gruk75hg *{color:white !important;}</style><span class="_gruk75hg"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">.87</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// rgba</span>
+<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._6qsxnd4p{background:rgb(255,255,0);opacity:1;}._6qsxnd4p *{color:#202020 !important;}</style><span class="_6qsxnd4p"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>  <span class="tt18 tt3o">// rgb</span>
+<span class="tt18 tt1j">const</span> Black  <span class="tt18 ttb0">=</span> <style>._hecr9a08{background:rgb(0,0,0);opacity:1;}._hecr9a08 *{color:white !important;}</style><span class="_hecr9a08"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>            <span class="tt18 tt3o">// number</span>
+<span class="tt18 tt1j">const</span> White  <span class="tt18 ttb0">=</span> <style>._dlkgb8ag{background:rgb(255,255,255);opacity:1;}._dlkgb8ag *{color:#202020 !important;}</style><span class="_dlkgb8ag"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>     <span class="tt18 tt3o">// hex</span>
+<span class="tt18 tt1j">const</span> Text   <span class="tt18 ttb0">=</span> <style>._9pd3z293{background:rgba(0,0,0,0.87);opacity:0.87;}._9pd3z293 *{color:white !important;}</style><span class="_9pd3z293"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">.87</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// rgba</span>
 </code></pre>
 <p>Note that a 6-digit hexadecimal is different from a 3-digit hexadecimal.</p>
-<pre class="ttb"><code prsm class="ttm"><style>._g5v5tycr{background:rgb(255,255,255);opacity:1;}._g5v5tycr *{color:#202020 !important;}</style><span class="_g5v5tycr"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span> <span class="tt18 ttb0">!==</span> <style>._dpuhv9uz{background:rgb(0,15,255);opacity:1;}._dpuhv9uz *{color:white !important;}</style><span class="_dpuhv9uz"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xfff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// true</span>
+<pre class="ttb"><code prsm class="ttm"><style>._cg1s656t{background:rgb(255,255,255);opacity:1;}._cg1s656t *{color:#202020 !important;}</style><span class="_cg1s656t"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span> <span class="tt18 ttb0">!==</span> <style>._751m6qw2{background:rgb(0,15,255);opacity:1;}._751m6qw2 *{color:white !important;}</style><span class="_751m6qw2"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xfff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// true</span>
 </code></pre>
 <h2 id="how-to-use-color">How to use <code class="ttm ttx">color</code></h2>
 <p><code class="ttm ttx">color</code> and the previously mentioned methods returns an immutable <code class="ttm ttx">Color</code>.</p>
 <pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> color <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/color'</span><span class="tt18 ttae">;</span>
 
-<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._cfmjzvq9{background:rgb(255,255,0);opacity:1;}._cfmjzvq9 *{color:#202020 !important;}</style><span class="_cfmjzvq9"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
+<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._4orki428{background:rgb(255,255,0);opacity:1;}._4orki428 *{color:#202020 !important;}</style><span class="_4orki428"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
 </code></pre>
 <p>Using methods:</p>
-<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._hdlgc9uk{background:rgb(255,255,0);opacity:1;}._hdlgc9uk *{color:#202020 !important;}</style><span class="_hdlgc9uk"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
+<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._isfdpiy1{background:rgb(255,255,0);opacity:1;}._isfdpiy1 *{color:#202020 !important;}</style><span class="_isfdpiy1"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
 Yellow<span class="tt18 ttae">.</span><span class="tt18 tta3">darken</span><span class="tt18 ttae">(</span><span class="tt18 ttap">2</span><span class="tt18 ttae">)</span><span class="tt18 ttae">.</span><span class="tt18 tta3">alpha</span><span class="tt18 ttae">(</span><span class="tt18 ttap">.94</span><span class="tt18 ttae">)</span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgba(145,156,0,0.94)</span>
 </code></pre>
-<pre class="ttb"><code prsm class="ttm"><style>._dog47mgw{background:rgb(255,255,255);opacity:1;}._dog47mgw *{color:#202020 !important;}</style><span class="_dog47mgw"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> 1</span>
-<style>._8ubl63cx{background:rgb(255,255,255);opacity:1;}._8ubl63cx *{color:#202020 !important;}</style><span class="_8ubl63cx"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0.5</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgb(194,194,0)</span>
+<pre class="ttb"><code prsm class="ttm"><style>._ab6kfw5w{background:rgb(255,255,255);opacity:1;}._ab6kfw5w *{color:#202020 !important;}</style><span class="_ab6kfw5w"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> 1</span>
+<style>._7ny6sud2{background:rgb(255,255,255);opacity:1;}._7ny6sud2 *{color:#202020 !important;}</style><span class="_7ny6sud2"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0.5</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgb(194,194,0)</span>
 </code></pre>