Skip to content

Commit bf246a0

Browse files
allyrazaallyraza
committed
move gulp to commonjs
1 parent e902ff3 commit bf246a0

File tree

7 files changed

+177
-132
lines changed

7 files changed

+177
-132
lines changed

‎gulpfile.babel.js renamed to ‎gulpfile.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import browserSync from 'browser-sync';
2-
import gulp from 'gulp';
3-
import sass from 'gulp-sass';
4-
import eslint from 'gulp-eslint';
5-
import plumber from 'gulp-plumber';
6-
import rollup from 'gulp-better-rollup';
7-
import commonjs from 'rollup-plugin-commonjs';
8-
import resolve from 'rollup-plugin-node-resolve';
1+
const browserSync = require('browser-sync');
2+
const gulp = require('gulp');
3+
const sass = require('gulp-sass');
4+
const eslint = require('gulp-eslint');
5+
const plumber = require('gulp-plumber');
6+
const rollup = require('gulp-better-rollup');
7+
const commonjs = require('rollup-plugin-commonjs');
8+
const resolve = require('rollup-plugin-node-resolve');
99

1010
gulp.task('js', () => {
1111
gulp.src('./src/js/**/*.js')

‎src/index.html

Lines changed: 80 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@
1111
<style>
1212
.container {
1313
margin-top: 15px;
14-
width: 800px;
14+
width: 700px;
1515
}
16-
.listview {
16+
.grid {
1717
font-family: "Roboto", "Helvetica Neue", Helvetica, sans-serif;
1818
border: 1px solid #ddd;
1919
min-height: 500px;
@@ -31,9 +31,83 @@
3131
</head>
3232
<body>
3333

34-
<div class="container">
35-
<div class="grid"></div>
36-
<div class="grid-pager"></div>
34+
<div class="container grid-view">
35+
<div class="grid">
36+
<div class="grid-header">
37+
<div class="grid-header-columns grid-header-groups"
38+
style="width: 1000px">
39+
<div class="grid-column" style="width: 100px">
40+
<div class="grid-column-label">Affiliate Site</div>
41+
<span class="grid-column-sort"></span>
42+
<div class="grid-column-resize"></div>
43+
</div>
44+
<div class="grid-column" style="width: 300px;">
45+
<div class="grid-column-label">Impressions</div>
46+
<span class="grid-column-sort"></span>
47+
<div class="grid-column-resize"></div>
48+
</div>
49+
<div class="grid-column" style="width: 200px;">
50+
<div class="grid-column-label">Clicks</div>
51+
<span class="grid-column-sort"></span>
52+
<div class="grid-column-resize"></div>
53+
</div>
54+
<div class="grid-column">
55+
<div class="grid-column-label">Leads</div>
56+
<span class="grid-column-sort"></span>
57+
<div class="grid-column-resize"></div>
58+
</div>
59+
<div class="grid-column">
60+
<div class="grid-column-label">Sales</div>
61+
<span class="grid-column-sort"></span>
62+
<div class="grid-column-resize"></div>
63+
</div>
64+
</div>
65+
<div class="grid-header-columns" style="width: 1000px;">
66+
<div class="grid-column grid-column-sortable"
67+
style="width: 100px">
68+
<div class="grid-column-label">Name</div>
69+
<span class="grid-column-sort"></span>
70+
<div class="grid-column-resize"></div>
71+
</div>
72+
<div class="grid-column grid-column-sortable"
73+
style="width: 100px;">
74+
<div class="grid-column-label">#raw</div>
75+
<span class="grid-column-sort"></span>
76+
<div class="grid-column-resize"></div>
77+
</div>
78+
<div class="grid-column grid-column-sortable"
79+
style="width: 100px;">
80+
<div class="grid-column-label">#unique</div>
81+
<span class="grid-column-sort"></span>
82+
<div class="grid-column-resize"></div>
83+
</div>
84+
<div class="grid-column grid-column-sortable"
85+
style="width: 100px">
86+
<div class="grid-column-label">Banner</div>
87+
<span class="grid-column-sort"></span>
88+
<div class="grid-column-resize"></div>
89+
</div>
90+
<div class="grid-column grid-column-sortable"
91+
style="width: 60px">
92+
<div class="grid-column-label">#</div>
93+
<span class="grid-column-sort"></span>
94+
<div class="grid-column-resize"></div>
95+
</div>
96+
<div class="grid-column grid-column-sortable"
97+
style="width: 140px">
98+
<div class="grid-column-label">Comission</div>
99+
<span class="grid-column-sort"></span>
100+
<div class="grid-column-resize"></div>
101+
</div>
102+
</div>
103+
</div>
104+
<div class="grid-viewport">
105+
<div class="grid-canvas">
106+
</div>
107+
</div>
108+
<div class="pagination">
109+
</div>
110+
</div>
37111
</div>
38112

39113
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
@@ -42,12 +116,11 @@
42116
<script src="/node_modules/slickgrid/slick.core.js"></script>
43117
<script src="/node_modules/slickgrid/slick.formatters.js"></script>
44118
<script src="/node_modules/slickgrid/slick.editors.js"></script>
45-
<script src="/node_modules/slickgrid/slick.grid.js"></script>
46119
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
47120
<script src="/js/index.js"></script>
48121
<script type="text/javascript">
49122
$(function() {
50-
Slick.createAjaxGrid();
123+
// Slick.createAjaxGrid();
51124
});
52125
</script>
53126
</body>

‎src/js/ajax-data-provider.js

Lines changed: 18 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,17 @@ function AjaxDataProvider() {
1212
var totalCount = 0;
1313
var data = [];
1414
var url = 'http://192.168.60.167:3002/api.php';
15-
var timeout;
16-
var request;
15+
1716
var onDataLoaded = new Slick.Event();
1817
var onDataLoading = new Slick.Event();
1918
var onPaginationUpdated = new Slick.Event();
2019
var refreshHints = {};
2120

22-
function init() {}
21+
function init() {
22+
if (data.length <= 0) {
23+
prepareData();
24+
}
25+
}
2326

2427
function setRefreshHints(hints) {
2528
refreshHints = hints;
@@ -47,50 +50,27 @@ function AjaxDataProvider() {
4750
var to = from;
4851
if (resp.data.length > 0) {
4952
to = from + resp.data.length;
50-
data.concat(resp.data);
53+
data = data.concat(resp.data);
5154
}
5255

53-
request = null;
5456
onDataLoaded.notify({ from: from, to: to });
5557
}
5658

5759
function prepareData() {
58-
var from = page;
59-
var to = page * pageSize;
60-
61-
if (request) {
62-
request.abort();
63-
data.splice(from, to);
64-
}
65-
66-
if (data.length > 0) {
67-
to = Math.min(to, data.length - 1);
68-
}
69-
70-
url += '?page=' + page + '&per_page=' + pageSize;
71-
72-
if (timeout !== null) {
73-
clearTimeout(timeout);
74-
}
75-
76-
timeout = setTimeout(function requestTimeout() {
77-
data.splice(from, to);
78-
79-
onDataLoading.notify({ from: from, to: to });
80-
81-
request = $.ajax({
82-
url: url,
83-
type: 'get',
84-
dataType: 'json',
85-
cache: true,
86-
success: onSuccess,
87-
error: onError
88-
});
89-
}, 50);
60+
onDataLoading.notify({ from: page, to: page * pageSize });
61+
62+
$.ajax({
63+
url: url,
64+
type: 'get',
65+
data: { page: page, per_page: pageSize },
66+
dataType: 'json',
67+
cache: true,
68+
success: onSuccess,
69+
error: onError
70+
});
9071
}
9172

9273
function getData() {
93-
prepareData();
9474
return data;
9575
}
9676

‎src/js/grid.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ function Grid(container, data, columns, options) {
9898
// private
9999
var initialized = false;
100100
var $container;
101-
var uid = "slickgrid_" + Math.round(1000000 * Math.random());
101+
var uid = "grid-" + Math.round(1000000 * Math.random());
102102
var self = this;
103103
var $focusSink, $focusSink2;
104104
var $headerScroller;
@@ -460,9 +460,7 @@ function Grid(container, data, columns, options) {
460460
var w=canvasWidth + (viewportHasVScroll ? scrollbarDimensions.width : 0);
461461
$headerRowSpacer.width(w);
462462
if (options.createFooterRow) { $footerRowSpacer.width(w); }
463-
464-
if (canvasWidth != oldCanvasWidth || forceColumnWidthsUpdate) {
465-
applyColumnWidths();
463+
if (canvasWidth != oldCanvasWidth || forceColumnWidthsUpdate) { applyColumnWidths();
466464
}
467465
}
468466

‎src/js/index.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable */
12
/* global $ */
23
import './core';
34
import Grid from './grid';
@@ -26,9 +27,10 @@ export function createAjaxGrid() {
2627
}
2728
);
2829

29-
var pager = new Pager({ dataProvider, grid, el: $('.grid-pager') });
30+
var pager = new Pager({ dataProvider, el: $('.grid-view') });
3031

31-
dataProvider.onDataLoaded.subscribe(function renderGrid() {
32+
dataProvider.onDataLoaded.subscribe(function () {
33+
console.log( dataProvider.getData() );
3234
grid.render();
3335
});
3436

‎src/js/pager.js

Lines changed: 22 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
/* global Slick */
33

44
function Pager(options) {
5+
var $container = options.el;
56
var dataProvider = options.dataProvider;
6-
var grid = options.grid;
7-
var $el = options.el;
7+
var $el = $('<div class="grid-pager"/>');
88
var $status;
99

1010
function init() {
@@ -69,76 +69,64 @@ function Pager(options) {
6969
}
7070

7171
function render() {
72-
$el.empty();
73-
74-
var $nav = $("<span class='slick-pager-nav' />").appendTo($el);
75-
var $settings = $("<span class='slick-pager-settings' />").appendTo($el);
76-
$status = $("<span class='slick-pager-status' />").appendTo($el);
72+
var $nav = $('<ul class="pagination"/>').appendTo($el);
73+
var $settings = $('<div class="grid-pagesize pagesize"/>').appendTo($el);
74+
$status = $('<div class="grid-summary"/>').appendTo($el);
7775

7876
$settings
79-
.append("<span class='slick-pager-settings-expanded' style='display:none'>Show: <a data=0>All</a><a data='-1'>Auto</a><a data=25>25</a><a data=50>50</a><a data=100>100</a></span>");
77+
.append('<p class="pagesize-links expanded" style="display:none"><span>Show:</span><a href="#" data-pagesize="0">All</a><a href="#" data-pagesize="25">25</a><a href="#" data-pagesize="50">50</a><a href="#" data-pagesize="100">100</a></p>');
8078

81-
$settings.find("a[data]").click(function (e) {
82-
var pageSize = $(e.target).attr("data");
79+
$settings.find("a[data-pagesize]").click(function (e) {
80+
var pageSize = $(e.target).attr("data-pagesize");
8381
if (pageSize !== undefined) {
84-
if (pageSize === -1) {
85-
var vp = grid.getViewport();
86-
setPageSize(vp.bottom - vp.top);
87-
} else {
8882
setPageSize(pageSize);
89-
}
9083
}
9184
});
9285

93-
var iconPrefix = "<span class='ui-state-default ui-corner-all ui-icon-container'><span class='ui-icon ";
94-
var iconSuffix = "' /></span>";
86+
var iconPrefix = '<li class="page-item"><a href="#" class="page-link">';
87+
var iconSuffix = '</a></li>';
9588

96-
$(iconPrefix + "ui-icon-lightbulb" + iconSuffix)
89+
$('<a href="#">Per page</a>')
9790
.click(function () {
98-
$(".slick-pager-settings-expanded").toggle();
91+
$(".pagesize-links.expanded").toggle();
9992
})
10093
.appendTo($settings);
10194

102-
$(iconPrefix + "ui-icon-seek-first" + iconSuffix)
95+
$(iconPrefix + '<i class="page-icon page-icon-first"><<</i>' + iconSuffix)
10396
.click(gotoFirst)
10497
.appendTo($nav);
10598

106-
$(iconPrefix + "ui-icon-seek-prev" + iconSuffix)
99+
$(iconPrefix + '<i class="page-icon page-icon-prev"><</i>' + iconSuffix)
107100
.click(gotoPrev)
108101
.appendTo($nav);
109102

110-
$(iconPrefix + "ui-icon-seek-next" + iconSuffix)
103+
$(iconPrefix + '<i class="page-icon page-icon-next">></i>' + iconSuffix)
111104
.click(gotoNext)
112105
.appendTo($nav);
113106

114-
$(iconPrefix + "ui-icon-seek-end" + iconSuffix)
107+
$(iconPrefix + '<i class="page-icon page-icon-last">>></i>' + iconSuffix)
115108
.click(gotoLast)
116109
.appendTo($nav);
117110

118-
$el.find(".ui-icon-container")
119-
.hover(function () {
120-
$(this).toggleClass("ui-state-hover");
121-
});
122-
123-
$el.children().wrapAll("<div class='slick-pager' />");
111+
$container.append($el);
124112
}
125113

126114

127115
function updatePager(pager) {
128116
var state = getState();
129117

130-
$el.find(".slick-pager-nav span").removeClass("ui-state-disabled");
118+
$el.find(".pager-pagination .page-link").removeClass("disabled");
131119
if (!state.canGotoFirst) {
132-
$el.find(".ui-icon-seek-first").addClass("ui-state-disabled");
120+
$el.find(".page-icon-first").addClass("disabled");
133121
}
134122
if (!state.canGotoLast) {
135-
$el.find(".ui-icon-seek-end").addClass("ui-state-disabled");
123+
$el.find(".page-icon-last").addClass("disabled");
136124
}
137125
if (!state.canGotoNext) {
138-
$el.find(".ui-icon-seek-next").addClass("ui-state-disabled");
126+
$el.find(".page-icon-next").addClass("disabled");
139127
}
140128
if (!state.canGotoPrev) {
141-
$el.find(".ui-icon-seek-prev").addClass("ui-state-disabled");
129+
$el.find(".page-icon-prev").addClass("disabled");
142130
}
143131

144132
if (pager.pageSize === 0) {

0 commit comments

Comments
 (0)