├── .eslintignore ├── .gitignore ├── .editorconfig ├── src ├── test │ ├── main.less │ ├── index.html.pug │ └── main.js ├── demo │ ├── index.html.pug │ ├── main.less │ └── main.js └── jquery.fracs.js ├── package.json ├── README.md ├── ghu.js ├── .eslintrc.yml └── dist ├── jquery.fracs.min.js └── jquery.fracs.js /.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /coverage/ 3 | /dist/ 4 | /vendor/ 5 | /node_modules/ 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /coverage/ 3 | /local/ 4 | /node_modules/ 5 | /npm-debug.log 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | 6 | [*] 7 | charset = utf-8 8 | indent_style = space 9 | indent_size = 4 10 | end_of_line = lf 11 | insert_final_newline = true 12 | trim_trailing_whitespace = true 13 | 14 | 15 | [{*.json,*.yml}] 16 | indent_size = 2 17 | 18 | 19 | [{*.md,*.pug}] 20 | trim_trailing_whitespace = false 21 | 22 | 23 | [*.svg] 24 | insert_final_newline = false 25 | -------------------------------------------------------------------------------- /src/test/main.less: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | // @include "../../node_modules/normalize.css/normalize.css" 4 | 5 | h1 { 6 | margin: 16px; 7 | font-family: "Ubuntu Mono", monospace; 8 | font-size: 20px; 9 | } 10 | 11 | #test-elements { 12 | .box { 13 | position: absolute; 14 | left: 100px; 15 | top: 100px; 16 | width: 100px; 17 | height: 100px; 18 | border: 0px solid #000; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/test/index.html.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang="en") 3 | head 4 | meta(charset='utf-8') 5 | title #{pkg.title} #{pkg.version} Test Suite 6 | meta(name='description', content=`Test suite for ${pkg.title} (${pkg.homepage})`) 7 | meta(name='viewport', content='width=device-width, initial-scale=1') 8 | link(href='main.css', rel='stylesheet') 9 | 10 | body 11 | h1 #{pkg.title} #{pkg.version} Test Suite 12 | 13 | div#test-elements 14 | 15 | script(src='jquery.min.js') 16 | script(src=`../jquery.fracs-${pkg.version}.js`) 17 | script(src='scar.min.js') 18 | script(src='main.js') 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-fracs", 3 | "title": "jQuery.fracs", 4 | "version": "1.0.2", 5 | "description": "Determine the visible fractions of HTML elements.", 6 | "homepage": "https://larsjung.de/jquery-fracs/", 7 | "author": "Lars Jung (https://larsjung.de)", 8 | "license": "MIT", 9 | "repository": "github:lrsjng/jquery-fracs", 10 | "scripts": { 11 | "lint": "eslint .", 12 | "build": "node ghu.js release", 13 | "precommit": "npm run -s lint && npm run -s build" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "7.10.5", 17 | "@babel/preset-env": "7.10.4", 18 | "eslint": "7.5.0", 19 | "ghu": "0.26.0", 20 | "jquery": "3.5.1", 21 | "normalize.css": "8.0.1", 22 | "scar": "2.3.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/demo/index.html.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang="en") 3 | head 4 | meta(charset='utf-8') 5 | title #{pkg.title} #{pkg.version} Demo 6 | meta(name='description', content=`Demo for ${pkg.title} (${pkg.homepage})`) 7 | meta(name='viewport', content='width=device-width, initial-scale=1') 8 | link(href='main.css', rel='stylesheet') 9 | 10 | body 11 | div#panel 12 | h1 13 | a(href=`${pkg.homepage}` title=`${pkg.title} project page`) #{pkg.title} 14 | | #{pkg.version} Demo 15 | 16 | section 17 | ul#fracs 18 | li.header 19 | span.idx # 20 | span.info possible 21 | span.info visible 22 | span.info viewport 23 | 24 | h2 Dimensions 25 | ul#dims 26 | li #[span doc:]#[span.info.doc undef.] 27 | li #[span viewport:]#[span.info.vp undef.] 28 | 29 | h2 ScrollState 30 | ul#scrollstate 31 | li #[span width:]#[span.info.width undef.] 32 | li #[span height:]#[span.info.height undef.] 33 | li #[span left:]#[span.info.left undef.] 34 | li #[span top:]#[span.info.top undef.] 35 | li #[span right:]#[span.info.right undef.] 36 | li #[span bottom:]#[span.info.bottom undef.] 37 | 38 | script(src='jquery.min.js') 39 | script(src=`../jquery.fracs-${pkg.version}.js`) 40 | script(src='main.js') 41 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jQuery.fracs 2 | 3 | [![license][license-img]][github] [![web][web-img]][web] [![github][github-img]][github] 4 | 5 | jQuery plugin to determine the visible fractions of HTML elements. 6 | 7 | 8 | ## License 9 | The MIT License (MIT) 10 | 11 | Copyright (c) 2020 Lars Jung (https://larsjung.de) 12 | 13 | Permission is hereby granted, free of charge, to any person obtaining a copy 14 | of this software and associated documentation files (the "Software"), to deal 15 | in the Software without restriction, including without limitation the rights 16 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 17 | copies of the Software, and to permit persons to whom the Software is 18 | furnished to do so, subject to the following conditions: 19 | 20 | The above copyright notice and this permission notice shall be included in 21 | all copies or substantial portions of the Software. 22 | 23 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 24 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 25 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 26 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 27 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 28 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 29 | THE SOFTWARE. 30 | 31 | 32 | [web]: https://larsjung.de/jquery-fracs/ 33 | [github]: https://github.com/lrsjng/jquery-fracs 34 | 35 | [license-img]: https://img.shields.io/badge/license-MIT-a0a060.svg?style=flat-square 36 | [web-img]: https://img.shields.io/badge/web-larsjung.de/jquery--fracs-a0a060.svg?style=flat-square 37 | [github-img]: https://img.shields.io/badge/github-lrsjng/jquery--fracs-a0a060.svg?style=flat-square 38 | -------------------------------------------------------------------------------- /src/demo/main.less: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | // @include "../../node_modules/normalize.css/normalize.css" 4 | 5 | body { 6 | font-family: "Ubuntu Mono", monospace; 7 | font-size: 16px; 8 | color: #333; 9 | position: absolute; 10 | } 11 | 12 | a, a:visited, a:active { 13 | color: #1d77c2; 14 | text-decoration: none; 15 | 16 | &:hover { 17 | color: #555; 18 | } 19 | } 20 | 21 | .box { 22 | position: relative; 23 | margin: 30px; 24 | border: 2px solid #333; 25 | height: 250px; 26 | overflow: hidden; 27 | cursor: pointer; 28 | 29 | .label { 30 | position: relative; 31 | display: inline-block; 32 | overflow: hidden; 33 | margin: 10px; 34 | padding: 8px; 35 | border-radius: 4px; 36 | background-color: rgba(255,255,255,0.5); 37 | } 38 | 39 | .idx { 40 | font-weight: bold; 41 | font-size: 1.8em; 42 | color: rgba(0,0,0,0.7); 43 | } 44 | 45 | ul { 46 | list-style: none; 47 | margin: 1em 0 0 0; 48 | padding: 0; 49 | } 50 | 51 | li { 52 | margin: 0.4em 0; 53 | } 54 | } 55 | 56 | #panel { 57 | font-size: 0.85em; 58 | position: fixed; 59 | top: 8px; 60 | right: 8px; 61 | background-color: #fff; 62 | z-index: 1; 63 | border: 2px solid #555; 64 | padding: 8px; 65 | width: 320px; 66 | 67 | h1 { 68 | font-size: 1.2em; 69 | text-align: center; 70 | margin: 0.6em 0 1em 0; 71 | } 72 | 73 | h2 { 74 | font-size: 1em; 75 | text-align: left; 76 | margin: 1em 0 0.6em 0; 77 | } 78 | } 79 | 80 | #fracs { 81 | list-style: none; 82 | margin: 0; 83 | padding: 0; 84 | 85 | li { 86 | margin: 0; 87 | padding: 0; 88 | cursor: pointer; 89 | margin-bottom: 2px; 90 | 91 | } 92 | 93 | .header { 94 | font-weight: bold; 95 | margin-bottom: 4px; 96 | } 97 | 98 | span { 99 | display: inline-block; 100 | margin: 0; 101 | padding: 0; 102 | width: 94px; 103 | text-align: right; 104 | } 105 | 106 | .idx { 107 | width: 30px; 108 | text-align: center; 109 | } 110 | } 111 | 112 | #dims, #scrollstate { 113 | list-style: none; 114 | margin: 0; 115 | padding: 0; 116 | 117 | li { 118 | display: inline-block; 119 | margin: 0 8px; 120 | width: 144px; 121 | } 122 | 123 | span { 124 | display: inline-block; 125 | margin: 0; 126 | padding: 0; 127 | width: 50%; 128 | overflow: hidden; 129 | } 130 | 131 | .info { 132 | text-align: right; 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /ghu.js: -------------------------------------------------------------------------------- 1 | const {resolve} = require('path'); 2 | const {ghu, babel, includeit, pug, less, cssmin, jszip, mapfn, read, remove, uglify, wrap, write} = require('ghu'); 3 | 4 | const NAME = 'jquery-fracs'; 5 | 6 | const ROOT = resolve(__dirname); 7 | const SRC = resolve(ROOT, 'src'); 8 | const BUILD = resolve(ROOT, 'build'); 9 | const DIST = resolve(ROOT, 'dist'); 10 | 11 | ghu.defaults('release'); 12 | 13 | ghu.before(runtime => { 14 | runtime.pkg = Object.assign({}, require('./package.json')); 15 | runtime.comment = `${runtime.pkg.name} v${runtime.pkg.version} - ${runtime.pkg.homepage}`; 16 | runtime.commentJs = `/*! ${runtime.comment} */\n`; 17 | 18 | console.log(runtime.comment); 19 | }); 20 | 21 | ghu.task('clean', 'delete build folder', () => { 22 | return remove(`${BUILD}, ${DIST}`); 23 | }); 24 | 25 | ghu.task('build:scripts', runtime => { 26 | return read(`${SRC}/*.js`) 27 | .then(babel({presets: ['@babel/preset-env']})) 28 | .then(wrap(runtime.commentJs)) 29 | .then(write(mapfn.p(SRC, DIST), {overwrite: true})) 30 | .then(write(mapfn.p(SRC, BUILD).s('.js', `-${runtime.pkg.version}.js`), {overwrite: true})) 31 | .then(uglify()) 32 | .then(wrap(runtime.commentJs)) 33 | .then(write(mapfn.p(SRC, DIST).s('.js', '.min.js'), {overwrite: true})) 34 | .then(write(mapfn.p(SRC, BUILD).s('.js', `-${runtime.pkg.version}.min.js`), {overwrite: true})); 35 | }); 36 | 37 | ghu.task('build:other', runtime => { 38 | return Promise.all([ 39 | read(`${SRC}/**/*.pug`) 40 | .then(pug({pkg: runtime.pkg})) 41 | .then(write(mapfn.p(SRC, BUILD).s('.pug', ''), {overwrite: true})), 42 | read(`${SRC}/**/*.less`) 43 | .then(includeit()) 44 | .then(less()) 45 | .then(cssmin()) 46 | .then(write(mapfn.p(SRC, BUILD).s('.less', '.css'), {overwrite: true})), 47 | read(`${SRC}/demo/*.js, ${SRC}/test/*.js`) 48 | .then(babel({presets: ['@babel/preset-env']})) 49 | .then(uglify()) 50 | .then(wrap(runtime.commentJs)) 51 | .then(write(mapfn.p(SRC, BUILD), {overwrite: true})), 52 | 53 | read(`${ROOT}/node_modules/scar/dist/scar.min.js`) 54 | .then(write(`${BUILD}/test/scar.min.js`, {overwrite: true})), 55 | read(`${ROOT}/node_modules/jquery/dist/jquery.min.js`) 56 | .then(write(`${BUILD}/demo/jquery.min.js`, {overwrite: true})) 57 | .then(write(`${BUILD}/test/jquery.min.js`, {overwrite: true})), 58 | 59 | read(`${ROOT}/*.md`) 60 | .then(write(mapfn.p(ROOT, BUILD), {overwrite: true})) 61 | ]); 62 | }); 63 | 64 | ghu.task('build', ['build:scripts', 'build:other']); 65 | 66 | ghu.task('zip', ['build'], runtime => { 67 | return read(`${BUILD}/**/*`) 68 | .then(jszip({dir: BUILD, level: 9})) 69 | .then(write(`${BUILD}/${NAME}-${runtime.pkg.version}.zip`, {overwrite: true})); 70 | }); 71 | 72 | ghu.task('release', ['clean', 'zip']); 73 | -------------------------------------------------------------------------------- /src/demo/main.js: -------------------------------------------------------------------------------- 1 | (() => { 2 | const WIN = window // eslint-disable-line 3 | const $ = WIN.jQuery; 4 | 5 | const round = Math.round; 6 | 7 | const generate_content = () => { 8 | const $body = $('body'); 9 | const $panel_fracs = $('#fracs'); 10 | const get_scrollto_fn = $target => () => $target.fracs('scrollToThis', 50, 50, 500); 11 | 12 | for (let i = 1; i <= 9; i += 1) { 13 | const $section = $('
') 14 | .appendTo($body) 15 | .width(i * 300) 16 | .height(round(Math.random() * 600 + 100)); 17 | 18 | const $label = $('
#' + i + '
') 19 | .appendTo($section); 20 | 21 | $('