Revision 0105abee

b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
169 169
    $('.editable input[type="text"]').keyup(function(e){
170 170
        if(e.keyCode == 13) { 
171 171
            setValue($(this));
172
            resetForm(e, $(this));
173
            
172
            resetForm(e, $(this));   
174 173
        }
175
    
176 174
    })
177 175

  
178 176
    $('html').click(function(e) {
b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/wizard-carousel.js
1
/*
2
// all functions use pixels
3
ui.wizard ={
4
	current_step: undefined,
5
	vm: {total_step: 4},
6
	current_position: undefined,
7
	relocation: undefined,
8

  
9
	// OK
10
	// sets the width and height of the carousel and its divs
11
	set_dimensions: function() {
12
		console.log('set dimentions');
13
		ui.wizard.relocation = $(window).width();
14
		console.log(ui.wizard.relocation);
15
		$('.vm-wizard-carousel').children('div').width(ui.wizard.relocation);
16
	},
17

  
18
	// sets the width and height of the carousel and its divs when the screen is resized (in PIXELS)
19
	adjust_to_resized_screen: function() {
20
		$(window).resize(function() {
21
			console.log('resized');
22
			ui.wizard.set_dimensions();
23

  
24
			if(ui.wizard.current_position<=0) {
25
				// the carousel moves to left -> this is the case that acts on resize
26
				ui.wizard.current_position = -((ui.wizard.current_step-1)*ui.wizard.relocation);
27
			}
28
			else
29
				ui.wizard.current_position = (ui.wizard.current_step-1)*ui.wizard.relocation;
30

  
31
			$('.vm-wizard-carousel').css('left', ui.wizard.current_position+'px');
32
		})
33
	},
34

  
35
	
36

  
37
	move_to_step: function(prev_btn, next_btn) {
38
		var speed =500;
39
		// when the button "next" is pressed show the next step (if there is a next step)
40
		next_btn.click(function(e){
41
			e.preventDefault();
42
			console.log('you clicked next!')
43
			if(ui.wizard.current_step < ui.wizard.vm.total_step){
44
				prev_btn.find('span').html('PREVIOUS');
45
				ui.wizard.current_step++;
46
				ui.wizard.current_position -=ui.wizard.relocation;
47
				$('.vm-wizard-carousel').animate({left: ui.wizard.current_position+'px'}, speed);
48
				ui.wizard.indicate_step(ui.wizard.current_step);
49
				ui.wizard.set_movement_tags(ui.wizard.current_step, prev_btn, next_btn);
50

  
51
				if(ui.wizard.current_step == 3) {
52
					setTimeout(function() { $('.vm-name').find('input').focus() }, speed/2);
53
				}
54

  
55
			}
56
			else {
57
				console.log('This is the last step.');
58
			}
59
		})
60

  
61
		// when the button "previous" is pressed show the previous step (if there is a previous step)
62
		prev_btn.click(function(e){
63
			e.preventDefault();
64
			if(ui.wizard.current_step > 1){
65
				ui.wizard.current_step--;
66
				ui.wizard.current_position +=ui.wizard.relocation;
67
				$('.vm-wizard-carousel').animate({left: ui.wizard.current_position+'px'}, speed);
68
				ui.wizard.indicate_step(ui.wizard.current_step);
69
				ui.wizard.set_movement_tags(ui.wizard.current_step, prev_btn, next_btn);
70
			}
71
			else {
72
				console.log('This is the 1st step.')
73
			}
74
		})
75
	},
76

  
77
	// sets the width and height of the steps and of the carousel (in PIXELS)
78
	initialize_relocation: function(){
79
			console.log('initialize_relocation');
80
			ui.wizard.adjust_to_resized_screen();
81
			ui.wizard.set_dimensions();
82
	},
1
/*	
83 2
	// for the carousel index
84 3
	indicate_step: function(step) {
85 4
		$('.wizard .top .sub-menu[data-step]').hide();
......
102 21
		}
103 22
	}
104 23
}
24
*/
105 25

  
106

  
107
$(document).ready(function(){
108

  
109
	ui.wizard.current_step =1;
110
	ui.wizard.current_position =0;
111

  
112
	var new_vm_btn =$('.new-btn, .add-new');
113
	var prev_btn = $('.bottom').find('.nav.prev');
114
	var next_btn = $('.bottom').find('.nav.next');
115
	$('.wizard .nums').click(function(e){
116
		e.preventDefault();
117
	})
118

  
119
	ui.wizard.initialize_relocation();
120
	ui.wizard.move_to_step(prev_btn, next_btn);
121
	ui.wizard.set_movement_tags(ui.wizard.current_step, prev_btn, next_btn);
122

  
123

  
124
});
26
/*
27
kpap:
28
Πώς κάνω extend κάτι;
29
Πχ θέλω στο carousel να ενσωματώσω το πάνω μενου...
125 30
*/
126 31

  
32

  
127 33
/*
128 34
Wrapper element must have set width and overflow hidden properties;
129 35
Item elements should have no margin
......
137 43
		'prev': $('.carousel-prev'),
138 44
		'speed': 1000,
139 45
		'current_step': 1,
46
		// αυτά δεν τα θέλω εδώ
47
		'cancel_text': 'CANCEL',
48
		'previous_text': 'PREVIOUS',
49
		'submit_text': 'SUBMIT',
50
		'next_text': 'NEXT',
140 51
	}
52

  
141 53
	this.options = _.defaults(options,defaults);
54
	// TODO with _.map
142 55
	this.wrapper = options.wrapper;
143 56
	this.container = options.container;
144 57
	this.item = options.item;
145 58
	this.next = options.next;
146 59
	this.prev = options.prev;
147 60
	this.speed = options.speed;
61
	this.cancel_text = options.cancel_text;
62
	this.previous_text = options.previous_text;
63
	this.submit_text = options.submit_text;
64
	this.next_text = options.next_text;
148 65
	this.current_step = options.current_step;
149 66
	this.total_items = this.item.length;
150 67
	this.initEvents();
151 68
}
152 69

  
70
Carousel.prototype.alterNav = function () {
71
	var self = this;
72
	this.prev.find('span').html(this.previous_text);
73
	this.next.find('span').html(this.next_text);
74
	if ( this.current_step == 1) {
75
		self.prev.find('span').html(self.cancel_text);
76
	}
77
	else if (this.current_step == this.total_items ) {
78
		self.next.find('span').html(self.submit_text);
79
	}
80
}
81

  
82
Carousel.prototype.resetForm = function () {
83
	console.log('dummy form reset');
84
}
85

  
86
Carousel.prototype.submitForm = function () {
87
	console.log('dummy form submit');
88
}
89

  
90
Carousel.prototype.closeOverlay = function () {
91
	$('.overlay-area, .overlay-div').hide();
92
}
93

  
153 94
Carousel.prototype.setDimensions = function (){
154 95
	this.wrapper.css('width', 100*this.total_items+'%');
155 96
	this.container.find(this.item).css('width', 100/this.total_items+'%');
156 97
}
157 98

  
99
Carousel.prototype.move = function () {
100
	var percentage = -(this.current_step-1)/this.total_items*100+'%';
101
	this.container.stop().animate({ 'left': percentage }, this.speed);
102
}
103

  
104
// if is_clicked is true, -duh- something has been clicked
105
Carousel.prototype.moveNext = function (is_clicked) {
106
	var self = this;
107
	if (this.current_step < this.total_items) {
108
		self.current_step = self.current_step + 1;
109
		self.move();
110
	} else {
111
		if (is_clicked) {
112
			self.closeOverlay();
113
			self.submitForm();			
114
		}
115
	}
116
	self.alterNav();
117
} 
118

  
119
// if is_clicked is true, -duh- something has been clicked
120
Carousel.prototype.movePrev = function (is_clicked) {
121
	var self = this;
122
	if (this.current_step > 1) {
123
		this.current_step = this.current_step - 1;
124
		self.move();
125
	} else {
126
		if (is_clicked) {
127
			self.closeOverlay();
128
			self.resetForm();			
129
		}
130
	}
131
	self.alterNav();
132
} 
133

  
158 134
Carousel.prototype.initEvents = function () {
159 135
	var self = this;
160
	console.log(this.options);
161 136
	this.setDimensions();
137
	this.alterNavText();
162 138

  
163 139
	this.next.click(function(e){
164 140
		e.preventDefault();
141
		self.moveNext(true);
165 142
	})
166
}
167 143

  
144
	this.prev.click(function(e){
145
		e.preventDefault();
146
		self.movePrev(true);
147
	})
168 148

  
149
	$('body').keydown(function(e) {
150
	  if(e.keyCode == 37) { // left
151
	  	e.preventDefault();
152
	    self.movePrev(false);
153
	  }
154
	  else if(e.keyCode == 39) { // right
155
	  	e.preventDefault();
156
	    self.moveNext(false);
157
	  }
158
	  else if(e.keyCode == 27) { // ESC
159
	  	e.preventDefault();
160
	  	self.closeOverlay();
161
	  }
162
	});
163
}
169 164

  
170 165
$(document).ready(function(){ 
171 166
	carousel_options = { 
172 167
		'wrapper': $('.wizard-content'),
173 168
		'container': $('.vm-wizard-carousel'),
174 169
		'item': $('.step'),
175
		'next' : $('.bottom').find('.nav.next');
176
		'prev' : $('.bottom').find('.nav.prev');
170
		'next' : $('.bottom').find('.nav.next'),
171
		'prev' : $('.bottom').find('.nav.prev'),
177 172
	}
178 173

  
179 174
	$('.wizard-content').width($(window).width());
180 175
	var carousel = new Carousel(carousel_options);
181
	window.car = carousel;
182 176
});
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_wizard-carousel.scss
3 3
	width:100%;
4 4
	.vm-wizard-carousel {
5 5
		position:relative;
6
		left:0;
6 7
		.step {
7 8
			float:left;
8 9
		}
b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
8845 8845
/* line 4, ../sass/_wizard-carousel.scss */
8846 8846
.wizard-content .vm-wizard-carousel {
8847 8847
  position: relative;
8848
  left: 0;
8848 8849
}
8849
/* line 6, ../sass/_wizard-carousel.scss */
8850
/* line 7, ../sass/_wizard-carousel.scss */
8850 8851
.wizard-content .vm-wizard-carousel .step {
8851 8852
  float: left;
8852 8853
}

Also available in: Unified diff