first commit
This commit is contained in:
Olu Amey
@@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2015 boynet
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@@ -0,0 +1,42 @@
|
||||
Framework7 Indexed List Plugin
|
||||
=============================
|
||||
Demo: https://boynet.github.io/boynet/
|
||||
|
||||
|
||||
This plugin is for Indexed-List scroll like iOS and Android have, currently works only with Contacts List
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
Just grab plugin files from `dist/` folder or using bower:
|
||||
|
||||
```
|
||||
bower install framework7-indexed-list-plugin
|
||||
```
|
||||
|
||||
And link them to your app's right AFTER Framework7's scripts and styles:
|
||||
|
||||
```
|
||||
<link rel="stylesheet" href="path/to/framework7.min.css">
|
||||
<link rel="stylesheet" href="path/to/framework7.indexed-list.css">
|
||||
...
|
||||
<script src="path/to/framework7.min.js"></script>
|
||||
<script src="path/to/framework7.indexed-list.js"></script>
|
||||
```
|
||||
|
||||
## Usage
|
||||
put this html code inside .page
|
||||
````
|
||||
<ul class="list-index"></ul>
|
||||
````
|
||||
|
||||
## Demo:
|
||||
https://boynet.github.io/boynet/
|
||||
|
||||
OR:
|
||||
|
||||
Plugin comes with demo example to see how it works and looks. To make demo works you need:
|
||||
|
||||
* install bower dependencies. Go to `demo/` folder and execute in terminal `bower install`
|
||||
@@ -0,0 +1,50 @@
|
||||
.list-index {
|
||||
color: #057bf7;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position:absolute;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
position:absolute;
|
||||
z-index:199;
|
||||
top:0%;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
width: 15px;
|
||||
text-align: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-orient: vertical;
|
||||
-moz-box-orient: vertical;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.list-index li{
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
.list-index li:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
html[dir="rtl"] .list-index {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
html[dir="rtl"] .list-index li:before {
|
||||
right: auto;
|
||||
left: 100%;
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
/*
|
||||
* Framework7 Indexed List 0.2.0
|
||||
* Framework7 plugin to add Alphabet indexed list
|
||||
*
|
||||
* https://github.com/boynet/Framework7-Indexed-List-plugin
|
||||
*
|
||||
* Copyright 2015, boynet
|
||||
*
|
||||
* Licensed under MIT
|
||||
*
|
||||
* Released on: 17 Sep, 2014
|
||||
*/
|
||||
Framework7.prototype.plugins.indexedlist = function (app, params) {
|
||||
var $ = window.Dom7;
|
||||
|
||||
|
||||
function initIndexedList(page) {
|
||||
var eventsTarget = $(page.container).find('.list-index');
|
||||
if (eventsTarget.length === 0) return;
|
||||
|
||||
var pageContent = $(page.container).find('.page-content');
|
||||
buildLetters();
|
||||
var isTouched, isMoved;
|
||||
var letterToScroll;
|
||||
var elementHover;
|
||||
var fixedNavbar = pageContent.parents('.navbar-fixed').length > 0 || pageContent.parents('.navbar-through').length > 0;
|
||||
var searchBar = $(page.container).find('.searchbar').length > 0;
|
||||
|
||||
if (searchBar) {
|
||||
eventsTarget.css('margin-top', '52px');
|
||||
}
|
||||
|
||||
function handleTouchStart(e) {
|
||||
e.preventDefault();
|
||||
isTouched = true;
|
||||
|
||||
var target = $(e.target);
|
||||
if (!target.is('li')) target = target.parents('li');
|
||||
if (target.length > 0) {
|
||||
scrollToLetter(target.eq(0).data('index-letter'));
|
||||
}
|
||||
}
|
||||
|
||||
function handleTouchMove(e) {
|
||||
if (!isTouched) return;
|
||||
e.preventDefault();
|
||||
var target;
|
||||
if (e.type === 'mousemove') {
|
||||
target = $(e.target);
|
||||
}
|
||||
else {
|
||||
target = $(document.elementFromPoint(e.touches[0].pageX, e.touches[0].pageY));
|
||||
}
|
||||
if (!target.is('li')) target = target.parents('li');
|
||||
|
||||
if (target.length === 0) return;
|
||||
if (target.length > 0 && !target.is('.list-index li')) return;
|
||||
|
||||
scrollToLetter(target.eq(0).data('index-letter'));
|
||||
}
|
||||
|
||||
function handleTouchEnd(e) {
|
||||
isTouched = isMoved = false;
|
||||
}
|
||||
|
||||
$(page.container).on('click', '.list-index li', function (e) {
|
||||
var target = $(e.target);
|
||||
if (!target.is('li')) target = target.parents('li');
|
||||
if (target.length > 0) {
|
||||
scrollToLetter(target.eq(0).data('index-letter'));
|
||||
}
|
||||
});
|
||||
|
||||
function buildLetters() {
|
||||
var _letters = [];
|
||||
var lettersHtml = '';
|
||||
pageContent.find('.list-group').each(function () {
|
||||
var _letterDiv = $(this).find('ul .list-group-title');
|
||||
var _letter = _letterDiv.html().trim().charAt(0).toUpperCase();
|
||||
_letterDiv.attr('data-index-letter', _letter);
|
||||
lettersHtml += '<li data-index-letter="' + _letter + '">' + _letter + '</li>';
|
||||
_letters.push(_letter);
|
||||
});
|
||||
eventsTarget.html(lettersHtml);
|
||||
return _letters;
|
||||
}
|
||||
|
||||
function scrollToLetter(letter) {
|
||||
var scrollToEl = pageContent.find('.list-group ul li[data-index-letter="' + letter + '"]').parent();
|
||||
if (!scrollToEl.length) return;
|
||||
var scrollTop = scrollToEl.offset().top + pageContent.scrollTop() - (fixedNavbar ? 52 : 0) - (searchBar ? 52 : 0);
|
||||
pageContent.scrollTop(scrollTop);
|
||||
}
|
||||
|
||||
eventsTarget.on(app.touchEvents.start, handleTouchStart);
|
||||
eventsTarget.on(app.touchEvents.move, handleTouchMove);
|
||||
eventsTarget.on(app.touchEvents.end, handleTouchEnd);
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
hooks: {
|
||||
pageInit: initIndexedList,
|
||||
}
|
||||
};
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
.list-index{color:#057bf7;list-style:none;margin:0;padding:0;font-size:11px;font-weight:700;position:absolute;z-index:199;top:0;height:100%;right:0;background:#fff;width:15px;text-align:center;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-orient:vertical;-moz-box-orient:vertical;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.list-index li{position:relative;z-index:10}.list-index li:before{content:'';position:absolute;right:100%;width:10px;height:100%;top:0}html[dir=rtl] .list-index{right:auto;left:0}html[dir=rtl] .list-index li:before{right:auto;left:100%}
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
/*
|
||||
* Framework7 Indexed List 0.2.0
|
||||
* Framework7 plugin to add Alphabet indexed list
|
||||
*
|
||||
* https://github.com/boynet/Framework7-Indexed-List-plugin
|
||||
*
|
||||
* Copyright 2015, boynet
|
||||
*
|
||||
* Licensed under MIT
|
||||
*
|
||||
* Released on: 17 Sep, 2014
|
||||
*/
|
||||
Framework7.prototype.plugins.indexedlist=function(t,e){function n(e){function n(t){t.preventDefault(),c=!0;var e=i(t.target);e.is("li")||(e=e.parents("li")),e.length>0&&o(e.eq(0).data("index-letter"))}function a(t){if(c){t.preventDefault();var e;(e=i("mousemove"===t.type?t.target:document.elementFromPoint(t.touches[0].pageX,t.touches[0].pageY))).is("li")||(e=e.parents("li")),0!==e.length&&(e.length>0&&!e.is(".list-index li")||o(e.eq(0).data("index-letter")))}}function r(t){c=d=!1}function o(t){var e=s.find('.list-group ul li[data-index-letter="'+t+'"]').parent();if(e.length){var n=e.offset().top+s.scrollTop()-(p?52:0)-(u?52:0);s.scrollTop(n)}}var l=i(e.container).find(".list-index");if(0!==l.length){var s=i(e.container).find(".page-content");!function(){var t=[],e="";s.find(".list-group").each(function(){var n=i(this).find("ul .list-group-title"),a=n.html().trim().charAt(0).toUpperCase();n.attr("data-index-letter",a),e+='<li data-index-letter="'+a+'">'+a+"</li>",t.push(a)}),l.html(e)}();var c,d,p=s.parents(".navbar-fixed").length>0||s.parents(".navbar-through").length>0,u=i(e.container).find(".searchbar").length>0;u&&l.css("margin-top","52px"),i(e.container).on("click",".list-index li",function(t){var e=i(t.target);e.is("li")||(e=e.parents("li")),e.length>0&&o(e.eq(0).data("index-letter"))}),l.on(t.touchEvents.start,n),l.on(t.touchEvents.move,a),l.on(t.touchEvents.end,r)}}var i=window.Dom7;return{hooks:{pageInit:n}}};
|
||||
Reference in New Issue
Block a user