TestTask3/myslider.js at master · Kiira02/TestTask3 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
YUI.add('myslider', function (Y) {

    function mySlider(config) {
        var mySliderList, app,
		    object = config['content'],
            currentPage = 0;

        Y.SliderModel = Y.Base.create('sliderModel', Y.Model, [], {}, {
            ATTRS: {
                title: { value: '' },
                content: { value: '' },
		        name: { value: ''}
            }
        });

        Y.SliderList = Y.Base.create('sliderList', Y.ModelList, [], {
            model: Y.SliderModel,
            checkPages: function (name, number) {
                var model = this.item(number),
                    modelList = this.toArray();
                if(model.get('name') != name) {
                    for(var i in modelList) {
                        if(modelList[i].get('name') == name) {
                            return modelList[i];
                        }
                    }
                }
                return model;
            }
        });

        Y.SliderView = Y.Base.create('sliderView', Y.View, [], {
            events: {
                '.next' : { click: 'nextPage' },
                '.prev' : { click: 'prevPage'}
            },
		    template: Y.one('#templateForSlider').getHTML(),
            initializer: function () {
                var model = this.get('model');
                    model.after('change', this.render, this);
               	    model.after('destroy', this.render, this);
            },
            render: function () {
                var container = this.get('container'),
                    model = this.get('model'),
                    //view = new Y.SlideView({model: model}),
                    data = {content: this.get('model').toJSON().content /**view.render().get('container')*/, title: this.get('model').toJSON().title},
                    contData = Y.Lang.sub(this.template, data);
                    //height = window.innerHeight;

                container.setHTML(contData);
                Y.one('body').appendChild(container);
                //Y.all('.slideTMPL').setStyle('height', height - 62 + 'px');
            },
            nextPage: function () {
                var numPages = mySliderList.size() - 1;
                currentPage++;
                if(currentPage > numPages) currentPage = 0;
                app.navigate('/' + mySliderList.item(currentPage).get('name'));
            },
            prevPage: function () {
                var numPages = mySliderList.size() - 1;
                currentPage--;
                if(currentPage < 0) currentPage = numPages;
                app.navigate('/' + mySliderList.item(currentPage).get('name'));
            }
        });

        /**Y.SlideView = Y.Base.create('slideView', Y.View, [], {
            initializer: function () {
                var model = this.get('model');
                    model.after('change', this.render, this);
                    model.after('destroy', this.render, this);
            },
            render: function () {
                var container = this.get('container'),
                    model = this.get('model').toJSON().content;

                container.setHTML(model);
                return this;
            }
        });*/

        mySliderList = new Y.SliderList();
        for (var i in object) {
            mySliderList.add([{ title: object[i].title, content: object[i].content, name: i }]);
        }

        app = new Y.App({
            transitions: false,
            viewConteiner: '#content',
            views: {
                slider: {
                    type: 'SliderView'
                }
                /**slide : {
                    type: 'SlideView',
                    parent: 'SliderView'
                }*/
            },
            routes: [{
                path: '/',
                callback: function () {
                    var pageModel = mySliderList.item(currentPage);
                    this.showView('slider', { model: pageModel });
                }
            }, {
                path: '/:pageName',
                callback: function (req) {
                    var pageModel = mySliderList.checkPages(req.params.pageName, currentPage);
                    this.showView('slider', { model: pageModel });
                }
            }]
        });

        app.navigate('/');
	    app.render();

        Y.on('keydown', function (e) {
            var numPages = mySliderList.size() - 1;
            if(e.keyCode == 37) {
                currentPage--;
                if(currentPage < 0) currentPage = numPages;
                app.navigate('/' + mySliderList.item(currentPage).get('name'));
            }
            if(e.keyCode == 39) {
                currentPage++;
                if(currentPage > numPages) currentPage = 0;
                app.navigate('/' + mySliderList.item(currentPage).get('name'));
            }
        }, window);
    };

    Y.namespace('MySlider').Start = function (config) {
        return new mySlider(config);
    };

}, '1.0.0', { requires: ['view', 'model', 'model-list', 'router', 'app']});