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
|
//but I tool a procedural approach, and I wanted to make something more like OOP. just didn't know
//how do deal with the fact that $.fancybox is a class...a singleton class is totally fine.
//like colorpicker_iframe. just need to know what it would look like
//well in this case you might not need oop approach, as it doesn't solve any issues here. its fine to use procedural code then you
//don't need oop. also js is sort of using procedural way then asking to provide onclick code and other methods like .click() in jquery,
//so it's kind of callback\procedural oriented, and oop doesn't fit in very well. you can wrap it in oop if really want, it will look like:
//
//function ColorPicker(){
// this.element = $(".something");
// this.init = function(){
// this.options = options
// this.element.click(this.onclick);
// this.myfancybox = $.fancybox;
// this.myfancybox_iframe = ".fancybox-iframe";
// }
// this.onclick = function(){
// this.myfancybox.open(
// do I do something like this
// _.extend({ autoDimensions: false,
// autoDimensions: false,
// beforeShow: this.fancybox_cb_1, //something like this? yes ok I think that it's the right thing for methods
// to reach for these classes for trivial things for a while, so that I can used to thinking this way.
// I understand that there are no real benefits performance/readability-wise here, but it's a different paradigm,
// right? yes ok cool. Well
// }, options) //? yep
//
// this.options
// ...
// callback: funciton(){ this.color_picked = ...from fancybox .. }
// callback: this.callback,
// );
// }
// this.color_picked = function()
// this.color_picked_as_hex = function()
// this.color_picked_as_rgb = function()
// this.callback = function(){
// $(this.myfancybox_iframe). ....
// }
//}
//and so on yeah good
//
function launch_iframe(input_target){
$.fancybox.open({
href : '/im/colors/index.html',
width : 1100, // set the width
height : 710,
fitToView : true,
autoDimensions:false,
autoSize:false,
type : 'iframe',
closeBtn : false,
padding : 5,
beforeShow : function(){
$('.fancybox-iframe').contents().find('#submitvalue').click(function(){
$('.fancybox-iframe').contents().find('form').submit();
$.fancybox.close();
});
},
beforeClose : function(){
x = $('.fancybox-iframe').contents().find('#namespace').val();
},
afterClose: function(){
$(input_target).val(x);
}
});
}
$(document).ready(function(){
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
return;
}
var element_list = [".color1", ".color2"]
element_list.forEach(
function(l){
console.log("a"+l)
$("a"+l).click(function(event){
event.preventDefault();
launch_iframe("input"+l)
});
}
)
})
|
