add extjs 6.0.1 sources

[extjs.git] / extjs / templates / admin-dashboard / app / view / profile / Timeline.js

Ext.define('Admin.view.profile.Timeline', {\r
    extend: 'Ext.DataView',\r
    xtype: 'profiletimeline',\r
\r
    cls: 'timeline-items-wrap',\r
\r
    scrollable: false,\r
\r
    bind: '{userTimeline}',\r
\r
    itemSelector: '.timeline-item',\r
\r
    itemTpl: [\r
        '<div class="timeline-item{userId:this.cls(values,parent[xindex-2],xindex-1,xcount)}">' +\r
            '{date:this.epoch(values,parent[xindex-2],xindex-1,xcount)}' +\r
            '<div class="profile-pic-wrap">' +\r
                '<img src="resources/images/user-profile/{userId}.png" alt="Smiley face">' +\r
                '<div>{date:this.elapsed} ago</div>' +\r
            '</div>' +\r
            '<tpl if="notificationType == \'image_sharing\'">' +\r
                '<div class="line-wrap">' +\r
                    '<div class="contents-wrap">' +\r
                        '<div class="shared-by"><a href="#">{name}</a> shared an image</div>' +\r
                        '<img src="resources/images/img2.jpg" class="shared-img" alt="Smiley face">' +\r
                    '</div>' +\r
                '</div>' +\r
            '<tpl elseif="notificationType == \'job_meeting\'">' +\r
                '<div class="line-wrap">' +\r
                    '<div class="contents-wrap">' +\r
                        '<div class="job-meeting"><a href="#">Job Meeting</a></div>' +\r
                        '<div>{content}</div>' +\r
                    '</div>' +\r
                '</div>' +\r
            '<tpl elseif="notificationType == \'comment_reply\'">' +\r
                '<div class="line-wrap">' +\r
                    '<div class="contents-wrap">' +\r
                        '<div class="shared-by"><a href="#">{name}</a> commented on The Article</div>' +\r
                        '<div class="article-comment"><span class="x-fa fa-quote-left"></span>{content}</div>' +\r
                    '</div>' +\r
                '</div>' +\r
            '<tpl elseif="notificationType == \'new_follower\'">' +\r
                '<div class="line-wrap">' +\r
                    '<div class="contents-wrap">' +\r
                        '<div class="followed-by">' +\r
                            '<img src="resources/images/user-profile/10.png" alt="Smiley face">' +\r
                            '<div class="followed-by-inner"><a href="#">{name}</a> followed you.</div>' +\r
                        '</div>' +\r
                    '</div>' +\r
                '</div>' +\r
            '<tpl elseif="notificationType == \'comment\'">' +\r
                '<div class="line-wrap">' +\r
                    '<div class="contents-wrap">' +\r
                        '<div class="shared-by"><a href="#">Lorem ipsum dolor sit amet</a></div>' +\r
                        '<div>{content}</div>' +\r
                    '</div>' +\r
                '</div>' +\r
            '<tpl elseif="notificationType == \'like\'">' +\r
                '<div class="line-wrap">' +\r
                    '<div class="contents-wrap">' +\r
                        '<div class="followed-by">' +\r
                            '<img src="resources/images/user-profile/1.png" alt="Smiley face">' +\r
                            '<div class="followed-by-inner"><a href="#">{name}</a> Like The Article.</div>' +\r
                        '</div>' +\r
                    '</div>' +\r
            '</tpl>' +\r
        '</div>',\r
        {\r
            cls: function (value, record, previous, index, count) {\r
                var cls = '';\r
\r
                if (!index) {\r
                    cls += ' timeline-item-first';\r
                }\r
                if (index + 1 === count) {\r
                    cls += ' timeline-item-last';\r
                }\r
\r
                return cls;\r
            },\r
\r
            elapsed: function (value) {\r
                var now = Date.now();\r
                now = +new Date('2015/08/23 21:15:00'); // 9:15 PM (For demo only)\r
\r
                var seconds = Math.floor((now - value) / 1000),\r
                    minutes = Math.floor(seconds / 60),\r
                    hours = Math.floor(minutes / 60),\r
                    days = Math.floor(hours / 24),\r
                    weeks = Math.floor(days / 7),\r
                    months = Math.floor(days / 30),\r
                    years = Math.floor(days / 365),\r
                    ret;\r
\r
                months %= 12;\r
                weeks %= 52;\r
                days %= 365;\r
                hours %= 24;\r
                minutes %= 60;\r
                seconds %= 60;\r
\r
                if (years) {\r
                    ret = this.part(years, 'Year');\r
                    ret += this.part(months, 'Month', ' ');\r
                } else if (months) {\r
                    ret = this.part(months, 'Month');\r
                    ret += this.part(days, 'Day', ' ');\r
                } else if (weeks) {\r
                    ret = this.part(weeks, 'Week');\r
                    ret += this.part(days, 'Day', ' ');\r
                } else if (days) {\r
                    ret = this.part(days, 'Day');\r
                    ret += this.part(hours, 'Hour', ' ');\r
                } else if (hours) {\r
                    ret = this.part(hours, 'Hour');\r
                } else if (minutes) {\r
                    ret = this.part(minutes, ' Minute');\r
                } else {\r
                    ret = this.part(seconds, 'Second');\r
                }\r
\r
                return ret;\r
            },\r
\r
            epoch: function (value, record, previous, index, count) {\r
                var previousValue = previous &&\r
                            (previous.isModel ? previous.data : previous)['date'];\r
\r
                // TODO use previousValue and value to determine "Yesterday", "Last week",\r
                // "Last month", etc...\r
\r
                if (index === 4) {\r
                    return '<div class="timeline-epoch">Yesterday</div>';\r
                }\r
\r
                return '';\r
            },\r
\r
            part: function (value, type, gap) {\r
                var ret = value ? (gap || '') + value + ' ' + type : '';\r
                if (value > 1) {\r
                    ret += 's';\r
                }\r
                return ret;\r
            }\r
        }\r
    ]\r
});\r