Skip to content

Fix grunt dependencies #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
peterpeerdeman wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Fix grunt dependencies #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3619594
chore(deps): update package dependencies
peterpeerdeman May 25, 2021
77c7539
chore(dist): fresh dist and doc folder generated with new dependencies
peterpeerdeman May 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions dist/focuspoint.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@
/********************************/
.lfy-focuspoint-view {
position: relative;
-webkit-background-size: cover;
background-size: cover;
background-size: cover;
}

.lfy-focuspoint-view .lfy-focuspoint-edit {
Expand Down
2 changes: 1 addition & 1 deletion dist/focuspoint.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 1 addition & 6 deletions dist/focuspoint.min.js
View file
Open in desktop

Large diffs are not rendered by default.

98 changes: 49 additions & 49 deletions doc/-src_focuspoint.js.html → ...lopment_focuspoint_src_focuspoint.js.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@
<html>
<head>
<meta charset="utf-8">
<title>Source: /src/focuspoint.js</title>





<title>Source: /Users/peter/development/focuspoint/src/focuspoint.js</title>
<meta property="og:title" content=""/>
<meta property="og:type" content="website"/>
<meta property="og:image" content=""/>

<meta property="og:url" content=""/>

<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<script src="scripts/jquery.min.js"></script>
Expand All @@ -23,117 +23,117 @@
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="styles/jaguar.css">


<script>
var config = {"monospaceLinks":true,"cleverLinks":true,"default":{"outputSourceFiles":true},"applicationName":"Focuspoint","disqus":"","googleAnalytics":"","openGraph":{"title":"","type":"website","image":"","site_name":"","url":""},"meta":{"title":"","description":"","keyword":""},"linenums":true};
</script>





</head>
<body>
<div id="wrap" class="clearfix">

<div class="navigation">
<h3 class="applicationName"><a href="index.html">Focuspoint</a></h3>

<div class="search">
<input id="search" type="text" class="form-control input-sm" placeholder="Search Documentations">
</div>
<ul class="list">

<li class="item" data-name="Focuspoint">
<span class="title">
<a href="Focuspoint.html">Focuspoint</a>

<span class="static">static</span>

</span>
<ul class="members itemMembers">

</ul>
<ul class="typedefs itemMembers">

</ul>
<ul class="methods itemMembers">

</ul>
<ul class="events itemMembers">

</ul>
</li>

<li class="item" data-name="Focuspoint.Edit">
<span class="title">
<a href="Focuspoint.Edit.html">Focuspoint.Edit</a>

</span>
<ul class="members itemMembers">

<span class="subtitle">Members</span>

<li data-name="Focuspoint.Edit.current"><a href="Focuspoint.Edit.html#.current">current</a></li>

<li data-name="Focuspoint.Edit.kill"><a href="Focuspoint.Edit.html#.kill">kill</a></li>

<li data-name="Focuspoint.Edit.off"><a href="Focuspoint.Edit.html#.off">off</a></li>

<li data-name="Focuspoint.Edit.on"><a href="Focuspoint.Edit.html#.on">on</a></li>

<li data-name="Focuspoint.Edit.set"><a href="Focuspoint.Edit.html#.set">set</a></li>

</ul>
<ul class="typedefs itemMembers">

</ul>
<ul class="methods itemMembers">

</ul>
<ul class="events itemMembers">

</ul>
</li>

<li class="item" data-name="Focuspoint.View">
<span class="title">
<a href="Focuspoint.View.html">Focuspoint.View</a>

</span>
<ul class="members itemMembers">

<span class="subtitle">Members</span>

<li data-name="Focuspoint.View.current"><a href="Focuspoint.View.html#.current">current</a></li>

<li data-name="Focuspoint.View.kill"><a href="Focuspoint.View.html#.kill">kill</a></li>

<li data-name="Focuspoint.View.set"><a href="Focuspoint.View.html#.set">set</a></li>

</ul>
<ul class="typedefs itemMembers">

</ul>
<ul class="methods itemMembers">

</ul>
<ul class="events itemMembers">

</ul>
</li>

</ul>
</div>
<div class="main">
<h1 class="page-title" data-filename="-_Users_jessedevries_Projects_lifely-focuspoint_src_focuspoint.js.html">Source: /src/focuspoint.js</h1>


<h1 class="page-title" data-filename="-_Users_peter_development_focuspoint_src_focuspoint.js.html">Source: /Users/peter/development/focuspoint/src/focuspoint.js</h1>




<section>
<article>
<pre class="prettyprint source linenums"><code>/**
* @license Focuspoint v1.0.4
* @license Focuspoint v1.0.6
* (c) 2015 Lifely
* License: MIT
*/
Expand Down Expand Up @@ -917,10 +917,10 @@ <h1 class="page-title" data-filename="-_Users_jessedevries_Projects_lifely-focus





<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0</a> on Thu Aug 06 2015 09:45:23 GMT+0200 (CEST)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Tue May 25 2021 22:22:24 GMT+0200 (Central European Summer Time)
</footer>
</div>
</div>
Expand Down
16 changes: 8 additions & 8 deletions doc/Focuspoint.Edit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ <h4 class="name" id="Edit">


<div class="tag-source">
<a href="-_Users_jessedevries_Projects_lifely-focuspoint_src_focuspoint.js.html">/Users/jessedevries/Projects/lifely-focuspoint/src/focuspoint.js</a>, <a href="-_Users_jessedevries_Projects_lifely-focuspoint_src_focuspoint.js.html#line599">line 599</a>
<a href="-_Users_peter_development_focuspoint_src_focuspoint.js.html">/Users/peter/development/focuspoint/src/focuspoint.js</a>, <a href="-_Users_peter_development_focuspoint_src_focuspoint.js.html#line599">line 599</a>
</div>

</div>
Expand Down Expand Up @@ -488,10 +488,10 @@ <h5>Example</h5>



<pre class="prettyprint"><code><p>var edit_element = document.querySelector('.lfy-focuspoint-edit');
<pre class="prettyprint"><code><p>var edit_element = document.querySelector('.lfy-focuspoint-edit');<br>
var view_element = document.querySelector('.lfy-focuspoint-view');</p>
<p>var focuspoint = new Focuspoint.Edit(edit_element, {
view_elm: view_element
<p>var focuspoint = new Focuspoint.Edit(edit_element, {<br>
view_elm: view_element<br>
});</p></code></pre>


Expand Down Expand Up @@ -614,7 +614,7 @@ <h5>Example</h5>



<pre class="prettyprint"><code><p>focuspoint.kill();
<pre class="prettyprint"><code><p>focuspoint.kill();<br>
delete focuspoint; // To fully kill the object, use 'delete focuspoint;' afterwards</p></code></pre>


Expand Down Expand Up @@ -721,8 +721,8 @@ <h5>Example</h5>



<pre class="prettyprint"><code><p>var id = focuspoint.on('drag:end', function () {
// for example: some API call to save the new focuspoint
<pre class="prettyprint"><code><p>var id = focuspoint.on('drag:end', function () {<br>
// for example: some API call to save the new focuspoint<br>
});</p></code></pre>


Expand Down Expand Up @@ -807,7 +807,7 @@ <h5>Example</h5>


<footer>
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0</a> on Thu Aug 06 2015 09:45:23 GMT+0200 (CEST)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Tue May 25 2021 22:22:24 GMT+0200 (Central European Summer Time)
</footer>
</div>
</div>
Expand Down
14 changes: 7 additions & 7 deletions doc/Focuspoint.View.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ <h4 class="name" id="View">


<div class="tag-source">
<a href="-_Users_jessedevries_Projects_lifely-focuspoint_src_focuspoint.js.html">/Users/jessedevries/Projects/lifely-focuspoint/src/focuspoint.js</a>, <a href="-_Users_jessedevries_Projects_lifely-focuspoint_src_focuspoint.js.html#line497">line 497</a>
<a href="-_Users_peter_development_focuspoint_src_focuspoint.js.html">/Users/peter/development/focuspoint/src/focuspoint.js</a>, <a href="-_Users_peter_development_focuspoint_src_focuspoint.js.html#line497">line 497</a>
</div>

</div>
Expand Down Expand Up @@ -354,10 +354,10 @@ <h5>Example</h5>



<pre class="prettyprint"><code><p>var view_element = document.querySelector('.lfy-focuspoint-view');
var focuspoint = new Focuspoint.View(view_element, {
x: 0.752,
y: 0.251
<pre class="prettyprint"><code><p>var view_element = document.querySelector('.lfy-focuspoint-view');<br>
var focuspoint = new Focuspoint.View(view_element, {<br>
x: 0.752,<br>
y: 0.251<br>
});</p></code></pre>


Expand Down Expand Up @@ -480,7 +480,7 @@ <h5>Example</h5>



<pre class="prettyprint"><code><p>focuspoint.kill();
<pre class="prettyprint"><code><p>focuspoint.kill();<br>
delete focuspoint; // To fully kill the object, use 'delete focuspoint;' afterwards</p></code></pre>


Expand Down Expand Up @@ -563,7 +563,7 @@ <h5>Example</h5>


<footer>
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0</a> on Thu Aug 06 2015 09:45:23 GMT+0200 (CEST)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Tue May 25 2021 22:22:24 GMT+0200 (Central European Summer Time)
</footer>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion doc/Focuspoint.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ <h3 class="subsection-title">Classes</h3>


<footer>
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0</a> on Thu Aug 06 2015 09:45:23 GMT+0200 (CEST)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Tue May 25 2021 22:22:24 GMT+0200 (Central European Summer Time)
</footer>
</div>
</div>
Expand Down
42 changes: 28 additions & 14 deletions doc/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,30 +147,38 @@ <h3> </h3>


<section>
<article class="readme"><h1>The Focuspoint</h1><p>In a nutshell, the focuspoint offers a solution to view images in all different ratios after the user has defined a focuspoint (hot spot) in the image while uploading it. The focuspoint is suitable for every kind of JavaScript application.</p>
<article class="readme"><h1>The Focuspoint</h1>
<p>In a nutshell, the focuspoint offers a solution to view images in all different ratios after the user has defined a focuspoint (hot spot) in the image while uploading it. The focuspoint is suitable for every kind of JavaScript application.</p>
<p>See the <a target="_blank" href="http://htmlpreview.github.io/?https://raw.githubusercontent.com/lifelynl/focuspoint/develop/demo/demo.html" title="demo">demo here</a></p>
<h2>To install</h2><p><strong>JavaScript package:</strong>
<h2>To install</h2>
<p><strong>JavaScript package:</strong><br>
<code>bower install focuspoint</code>, then manually include /dist/focuspoint.js and /dist/focuspoint.css and the classList and requestAnimationFrame polyfills</p>
<p><strong>MeteorJS package:</strong>
<p><strong>MeteorJS package:</strong><br>
<code>meteor add lifelynl:focuspoint</code></p>
<p><strong>AngularJS module:</strong>
<p><strong>AngularJS module:</strong><br>
<code>coming soon</code></p>
<h2>What and why?</h2><p>Designing web products, used to be simple. Basically everyone experienced your website the same. Nowadays, we have to design and develop for countless different devices. Menus, textual content and icons are easy; it's just a matter of properly arranging them. Images, however, are a different story. Most photographs have a 3:2 ratio so whenever the screen ratio alters, you have to crop the photo and only the middle of the image is displayed. You'll see that most subjects are either cut off or even completely outside the frame.</p>
<h2>What and why?</h2>
<p>Designing web products, used to be simple. Basically everyone experienced your website the same. Nowadays, we have to design and develop for countless different devices. Menus, textual content and icons are easy; it's just a matter of properly arranging them. Images, however, are a different story. Most photographs have a 3:2 ratio so whenever the screen ratio alters, you have to crop the photo and only the middle of the image is displayed. You'll see that most subjects are either cut off or even completely outside the frame.</p>
<p>So we came up with the Focuspoint. Just like when you take a photograph, whenever you upload an image, you tell us where the focus should be. We then use a simple CSS rule in order to apply the best background position for every device. The benefit of the focuspoint is that the photographs, even on super small devices like a watch, will always look great.</p>
<p><strong>Concept video:</strong></p>
<p>[<img src="https://i.vimeocdn.com/video/525803207_1280.jpg" alt="IMAGE ALT TEXT HERE">]
<p>[<img src="https://i.vimeocdn.com/video/525803207_1280.jpg" alt="IMAGE ALT TEXT HERE">]<br>
(https://vimeo.com/132535449)</p>
<h2>Technical concept</h2><ul>
<h2>Technical concept</h2>
<ul>
<li>For every image, you'll have to be able to save the focuspoint as two decimal values between 0 and 1, x and y. These represent the coordinates of the focuspoint in the picture. So it is important to write some back-end code for this. That's up to you ;)</li>
<li>To apply the focuspoint to an image in your application, we just use <code>background-size: cover</code> in combination with a <code>background-position</code> CSS-rule on your element.</li>
<li>To create a focuspoint editor in your image upload module, we will render a draggable dot for you. Then you can simply read out the x and y values to save them to your database whenever you want.</li>
</ul>
<h2>API</h2><p>For the full API, please visit the <a target="_blank" href="https://github.com/lifelynl/focuspoint/wiki/API" title="/wiki/API">wiki on Github</a>.</p>
<h2>Basic example for the editor</h2><pre class="prettyprint source lang-html"><code>&lt;figure class=&quot;lfy-focuspoint-view&quot; id=&quot;view&quot; style=&quot;background-image: url('/my-image.jpg')&quot;>
<h2>API</h2>
<p>For the full API, please visit the <a target="_blank" href="https://github.com/lifelynl/focuspoint/wiki/API" title="/wiki/API">wiki on Github</a>.</p>
<h2>Basic example for the editor</h2>
<pre class="prettyprint source lang-html"><code>&lt;figure class=&quot;lfy-focuspoint-view&quot; id=&quot;view&quot; style=&quot;background-image: url('/my-image.jpg')&quot;>
&lt;div class=&quot;lfy-focuspoint-edit&quot; id=&quot;edit&quot;>
&lt;button class=&quot;lfy-focuspoint-button&quot; id=&quot;button&quot;>&lt;/button>
&lt;/div>
&lt;/figure></code></pre><p>These css-classes are quite necessary. We recommend you to always use those classes and overwrite the styling for the button to your needs.</p>
&lt;/figure>
</code></pre>
<p>These css-classes are quite necessary. We recommend you to always use those classes and overwrite the styling for the button to your needs.</p>
<pre class="prettyprint source lang-js"><code>var element = document.getElementById('edit');

var editor = new Focuspoint.Edit(element, {
Expand All @@ -181,13 +189,19 @@ <h2>Basic example for the editor</h2><pre class="prettyprint source lang-html"><

editor.on('drag:end', function(x, y) {
// your callback code here
});</code></pre><p>We look for an element with the 'lfy-focuspoint-button' class to find the button. When you don't use that classname, you can alternatively specify a <code>button_elm</code>.</p>
<h2>Basic example for viewing</h2><pre class="prettyprint source lang-html"><code>&lt;figure class=&quot;lfy-focuspoint-view&quot; id=&quot;view&quot; style=&quot;background-image: url('/my-image.jpg')&quot;>&lt;/figure></code></pre><pre class="prettyprint source lang-js"><code>var element = document.getElementById('view');
});
</code></pre>
<p>We look for an element with the 'lfy-focuspoint-button' class to find the button. When you don't use that classname, you can alternatively specify a <code>button_elm</code>.</p>
<h2>Basic example for viewing</h2>
<pre class="prettyprint source lang-html"><code>&lt;figure class=&quot;lfy-focuspoint-view&quot; id=&quot;view&quot; style=&quot;background-image: url('/my-image.jpg')&quot;>&lt;/figure>
</code></pre>
<pre class="prettyprint source lang-js"><code>var element = document.getElementById('view');

var viewer = new Focuspoint.View(element, {
x: 0.456,
y: 0.124
});</code></pre></article>
});
</code></pre></article>
</section>


Expand All @@ -198,7 +212,7 @@ <h2>Basic example for viewing</h2><pre class="prettyprint source lang-html"><cod


<footer>
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0</a> on Thu Aug 06 2015 09:45:23 GMT+0200 (CEST)
Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Tue May 25 2021 22:22:24 GMT+0200 (Central European Summer Time)
</footer>
</div>
</div>
Expand Down
Loading