├── images
├── logo.scale-100.png
├── logo.scale-140.png
├── logo.scale-180.png
├── logo.scale-80.png
├── smalllogo.scale-100.png
├── smalllogo.scale-140.png
├── smalllogo.scale-180.png
├── smalllogo.scale-80.png
├── storelogo.scale-100.png
├── storelogo.scale-140.png
├── storelogo.scale-180.png
├── splashscreen.scale-100.png
├── splashscreen.scale-140.png
├── splashscreen.scale-180.png
└── arrow.svg
├── README.md
├── default.html
├── package.appxmanifest
├── css
└── default.css
├── js
└── default.js
└── PullToRefresh.jsproj
/images/logo.scale-100.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dwcares/pulltorefresh/HEAD/images/logo.scale-100.png
--------------------------------------------------------------------------------
/images/logo.scale-140.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dwcares/pulltorefresh/HEAD/images/logo.scale-140.png
--------------------------------------------------------------------------------
/images/logo.scale-180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dwcares/pulltorefresh/HEAD/images/logo.scale-180.png
--------------------------------------------------------------------------------
/images/logo.scale-80.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dwcares/pulltorefresh/HEAD/images/logo.scale-80.png
--------------------------------------------------------------------------------
/images/smalllogo.scale-100.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dwcares/pulltorefresh/HEAD/images/smalllogo.scale-100.png
--------------------------------------------------------------------------------
/images/smalllogo.scale-140.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dwcares/pulltorefresh/HEAD/images/smalllogo.scale-140.png
--------------------------------------------------------------------------------
/images/smalllogo.scale-180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dwcares/pulltorefresh/HEAD/images/smalllogo.scale-180.png
--------------------------------------------------------------------------------
/images/smalllogo.scale-80.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dwcares/pulltorefresh/HEAD/images/smalllogo.scale-80.png
--------------------------------------------------------------------------------
/images/storelogo.scale-100.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dwcares/pulltorefresh/HEAD/images/storelogo.scale-100.png
--------------------------------------------------------------------------------
/images/storelogo.scale-140.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dwcares/pulltorefresh/HEAD/images/storelogo.scale-140.png
--------------------------------------------------------------------------------
/images/storelogo.scale-180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dwcares/pulltorefresh/HEAD/images/storelogo.scale-180.png
--------------------------------------------------------------------------------
/images/splashscreen.scale-100.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dwcares/pulltorefresh/HEAD/images/splashscreen.scale-100.png
--------------------------------------------------------------------------------
/images/splashscreen.scale-140.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dwcares/pulltorefresh/HEAD/images/splashscreen.scale-140.png
--------------------------------------------------------------------------------
/images/splashscreen.scale-180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dwcares/pulltorefresh/HEAD/images/splashscreen.scale-180.png
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | pulltorefresh
2 | =============
3 |
4 | A simple pull to refresh implementation in HTML. Designed specifically for HTML Windows 8 apps.
5 |
--------------------------------------------------------------------------------
/default.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Pull to Refresh
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/package.appxmanifest:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | SlideToRefresh
6 | David
7 | images\storelogo.png
8 |
9 |
10 | 6.3.0
11 | 6.3.0
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/css/default.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: -ms-grid;
3 | -ms-grid-rows: 1fr;
4 | -ms-grid-columns: 1fr;
5 | background-color: lightblue;
6 | }
7 |
8 | .outerScroller {
9 | overflow-y: auto;
10 | -ms-grid-column-align: center;
11 | width: 400px;
12 | height: 100%;
13 | -ms-scroll-snap-y: mandatory snapList(80px);
14 | -ms-overflow-style: none;
15 | }
16 |
17 | .outerScroller.loading {
18 | -ms-scroll-snap-y: proximity snapList(80px);
19 | }
20 |
21 |
22 | .innerScroller {
23 | color: lightblue;
24 | width: 100%;
25 | height: 100%;
26 | overflow: auto;
27 | -ms-overflow-style: -ms-autohiding-scrollbar;
28 | }
29 |
30 | .listItem {
31 | font-size: 20pt;
32 | font-family: 'Segoe UI Light';
33 | padding: 40px 20px 0px 55px;
34 | background-color: white;
35 | }
36 |
37 | .pullBox {
38 | width: 400px;
39 | height: 80px;
40 | font-size: 20pt;
41 | font-family: 'Segoe UI Light';
42 | display: -ms-grid;
43 | -ms-grid-rows: 80px;
44 | -ms-grid-columns: 45px 1fr;
45 | }
46 |
47 | progress.pullProgress {
48 | -ms-grid-column: 1;
49 | -ms-grid-row-align: center;
50 | -ms-grid-column-align: center;
51 |
52 | color: white;
53 | opacity: 0;
54 | width: 35px;
55 | height: 35px;
56 | }
57 |
58 | .loading .pullProgress {
59 | transition: opacity ease 0.3s;
60 | opacity: 1;
61 | }
62 |
63 | .pullArrow {
64 | -ms-grid-row-align: center;
65 | -ms-grid-column: 1;
66 |
67 | font-family: 'Segoe UI Symbol';
68 | z-index: -1;
69 | transform-origin: center center;
70 | transform: rotate(90deg);
71 | width: 45px;
72 | height: 45px;
73 | background-repeat: no-repeat;
74 | background-position: center center;
75 | background-image: url('/images/arrow.svg');
76 | }
77 |
78 | .loading .pullArrow {
79 | opacity: 0;
80 | }
81 |
82 | .pullLabel {
83 | -ms-grid-row-align: center;
84 | -ms-grid-column: 2;
85 | margin-left: 10px;
86 | }
87 |
--------------------------------------------------------------------------------
/js/default.js:
--------------------------------------------------------------------------------
1 | // For an introduction to the Blank template, see the following documentation:
2 | // http://go.microsoft.com/fwlink/?LinkId=232509
3 | (function () {
4 | "use strict";
5 |
6 | var app = WinJS.Application;
7 | var activation = Windows.ApplicationModel.Activation;
8 |
9 | var _pullBoxHeight = 80;
10 | var _outerScroller;
11 | var _innerScroller;
12 | var _pullLabel;
13 | var _pullArrow;
14 |
15 | var MS_MANIPULATION_STATE_ACTIVE = 1; // A contact is touching the surface and interacting with content
16 | var MS_MANIPULATION_STATE_INERTIA = 2; // The content is still moving, but contact with the surface has ended
17 |
18 | function init() {
19 | // Setup variables
20 | _outerScroller = document.querySelector(".outerScroller");
21 | _innerScroller = document.querySelector(".innerScroller");
22 | _pullLabel = document.querySelector(".pullLabel");
23 | _pullArrow = document.querySelector(".pullArrow");
24 |
25 | // Set the initial scroll past the pull box
26 | _outerScroller.scrollTop = _pullBoxHeight;
27 |
28 | // Update the arrow rotation based on scroll postion
29 | _outerScroller.addEventListener("scroll", onScroll);
30 |
31 | // Listen for panning events (different than scroll) and detect when we're in the over pan state
32 | _outerScroller.addEventListener("MSManipulationStateChanged", onManipualationStateChanged);
33 |
34 | // Populate the list
35 | loadItems();
36 |
37 | }
38 |
39 | function onScroll(e) {
40 | var rotationAngle = 180 * ((_pullBoxHeight - _outerScroller.scrollTop) / _pullBoxHeight) + 90;
41 | _pullArrow.style.transform = "rotate(" + rotationAngle + "deg)";
42 |
43 | // Change the label once you pull to the top
44 | if (_outerScroller.scrollTop === 0) {
45 | _pullLabel.innerText = "Release to refresh";
46 | } else {
47 | _pullLabel.innerText = "Pull to refresh";
48 | }
49 | };
50 |
51 | function onManipualationStateChanged(e) {
52 | // Check to see if they lifted while pulled to the top
53 | if (e.currentState == MS_MANIPULATION_STATE_INERTIA &&
54 | e.lastState == MS_MANIPULATION_STATE_ACTIVE &&
55 | _outerScroller.scrollTop === 0) {
56 |
57 | // Change the loading state and prevent panning
58 | WinJS.Utilities.addClass(_outerScroller, "loading");
59 | _outerScroller.disabled = true;
60 | _pullLabel.innerText = "Loading...";
61 |
62 | refreshItemsAsync().then(function () {
63 | // After the refresh, return to the default state
64 | WinJS.Utilities.removeClass(_outerScroller, "loading");
65 | _outerScroller.disabled = false;
66 |
67 | // Scroll back to the top of the list
68 | scrollTo(_outerScroller, _pullBoxHeight)
69 |
70 | });
71 | }
72 | };
73 |
74 | function scrollTo(element, position) {
75 | // msZoomTo is Windows 8.1/IE11 only
76 | if (element.msZoomTo) {
77 | element.msZoomTo({
78 | contentX: 0,
79 | contentY: position,
80 | viewporX: 0,
81 | viewportY: 0
82 | });
83 | } else {
84 | element.scrollTop = position;
85 | }
86 |
87 | }
88 |
89 | function refreshItemsAsync() {
90 | return new WinJS.Promise(function (complete, error, progress) {
91 | // Initiate the refresh (simulated delay with setTimeout)
92 | setTimeout(function () {
93 | loadItems();
94 | complete();
95 | }, 2000);
96 | });
97 | }
98 |
99 | function loadItems() {
100 | // Add random items to the list
101 | var items = document.createElement("div");
102 |
103 | for (var i = 0; i < 100; i++) {
104 | var randomNumber = (100 * Math.random()).toFixed();
105 |
106 | var element = document.createElement("div");
107 | element.className = "listItem";
108 | element.textContent = "Random item " + randomNumber;
109 | items.appendChild(element);
110 | }
111 | _innerScroller.innerHTML = items.innerHTML;
112 | }
113 |
114 | app.onactivated = function (args) {
115 | args.setPromise(WinJS.UI.processAll().then(init));
116 | };
117 |
118 | app.start();
119 | })();
120 |
--------------------------------------------------------------------------------
/images/arrow.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
89 |
--------------------------------------------------------------------------------
/PullToRefresh.jsproj:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Debug
6 | AnyCPU
7 |
8 |
9 | Debug
10 | ARM
11 |
12 |
13 | Debug
14 | x64
15 |
16 |
17 | Debug
18 | x86
19 |
20 |
21 | Release
22 | AnyCPU
23 |
24 |
25 | Release
26 | ARM
27 |
28 |
29 | Release
30 | x64
31 |
32 |
33 | Release
34 | x86
35 |
36 |
37 |
38 | c48c4014-a080-46c8-8c3f-8cf15b66f697
39 | SAK
40 | SAK
41 | SAK
42 | SAK
43 |
44 |
45 |
46 | 12.0
47 |
48 |
49 |
50 |
51 | Windows
52 | 8.1
53 | 8.1
54 | 12.0
55 | en-US
56 | SlideToRefresh_TemporaryKey.pfx
57 |
58 |
59 |
60 | Designer
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
96 |
--------------------------------------------------------------------------------