← Back to branch summary

~widelands-dev/widelands-website/trunk

« back to all changes in this revision

Viewing changes to templates/wlscreens/index.html

  • Committer: Holger Rapp
  • Date: 2009-04-11 15:21:15 UTC
  • Revision ID: rapp@mrt.uka.de-20090411152115-qpbnxxze99td19bz
Added a first version of a screenshot application

Show diffs side-by-side

added added

removed removed

Lines of Context:
templates/wlscreens/index.html
 
1
{% extends "wlscreens/base.html" %}
 
2
{% comment %}
 
3
   vim:ft=htmldjango
 
4
{% endcomment %}
 
5
 
 
6
{% load wl_markdown %}
 
7
 
 
8
{% block extra_head %}
 
9
{{ block.super }}
 
10
 
 
11
<script type="text/javascript" src="{{ MEDIA_URL }}js/jqModal.js"></script>
 
12
<link rel="stylesheet" type="text/css" media="all" href="{{ MEDIA_URL }}css/modal_windows.css" />
 
13
 
 
14
<script type="text/javascript">
 
15
// {{{ Javascript Stuff 
 
16
var image_w = 0;
 
17
// if initial_show is true, the resize_dialog function
 
18
// will not animate the resize. This is set by the hide and show
 
19
// function of our dialog
 
20
var initial_show = true;
 
21
var current_size = "";
 
22
 
 
23
function determine_image_size() {
 
24
   // We decide by the client width which size we are going // to show
 
25
   cw = document.body.clientWidth;
 
26
   ch = document.body.clientHeight;
 
27
   
 
28
   margin = 12;
 
29
   if( (cw-80) > 1024) {
 
30
      w = 1024;
 
31
   } else if( (cw-80) > (800) ) {
 
32
      w = 800;
 
33
   } else {
 
34
      w = 640;
 
35
   }
 
36
   
 
37
   return w;
 
38
}
 
39
 
 
40
function resize_dialog() {
 
41
   if(image_w == 0) {
 
42
      image_w = determine_image_size();
 
43
   }
 
44
   cw = document.body.clientWidth;
 
45
   
 
46
   img = $(".image_display");
 
47
 
 
48
   if( current_size == image_w ) {
 
49
      return;
 
50
   }
 
51
 
 
52
   // reposition and resize the dialog
 
53
   dw = image_w+margin;
 
54
   x = (cw/2)-(dw/2);
 
55
 
 
56
   dialog = $("#dialog");
 
57
   if(initial_show) {
 
58
      dialog.css("width",dw + "px");
 
59
      dialog.css("left",x + "px");
 
60
      dialog.css("top",(document.body.scrollTop + 5) + "px");
 
61
      
 
62
      img.attr("width",w);
 
63
   } else {
 
64
      img.fadeOut( 250, 
 
65
         function() {
 
66
            dialog.animate( {
 
67
               left: x+"px",
 
68
               top: (document.body.scrollTop+5)+"px",
 
69
               width: dw +"px",
 
70
               }, 500, function() {
 
71
                  img.attr("width",w);
 
72
 
 
73
                  img.fadeIn(250);
 
74
               });
 
75
      });
 
76
   }
 
77
   
 
78
   current_size = w;
 
79
}
 
80
 
 
81
$().ready(function() {
 
82
 
 
83
      // dialog
 
84
      $('#dialog').jqm( {
 
85
          onShow: function(h) {
 
86
          /* Enter image address */
 
87
          h.w.css('opacity',1.00).fadeIn(); 
 
88
          initial_show = false;
 
89
        },
 
90
          onHide: function(h) {
 
91
          h.w.fadeOut('slow');
 
92
          h.o.fadeOut('slow',
 
93
             function() { if(h.o) h.o.remove(); })
 
94
          initial_show = true;
 
95
         }
 
96
      });
 
97
      $('.image_display').click( function() {
 
98
         $('#dialog').jqmHide();
 
99
      });
 
100
 
 
101
      // Links
 
102
      $("a.displayimage").click( function() {
 
103
         // Set the image
 
104
         src = $(this).attr("href");
 
105
         img = $(".image_display");
 
106
         img.attr("src",src);
 
107
         
 
108
         // Set the image comment
 
109
         comment = $($(this).find("span.comment")).html();
 
110
         $(".image_comment").html(comment);
 
111
 
 
112
         // Set the image title
 
113
         title = $(this).attr("name");
 
114
         $("h3.screenshot_title").html(title);
 
115
         
 
116
         resize_dialog();
 
117
 
 
118
         $('#dialog').jqmShow();
 
119
 
 
120
         return false;
 
121
      });
 
122
 
 
123
      // Resize links
 
124
      $('a.sizelink').click( function() {
 
125
            size = $(this).html().split("x");
 
126
            w = parseInt(size[0]);
 
127
            
 
128
            image_w = w;
 
129
            resize_dialog();
 
130
      });
 
131
 
 
132
});
 
133
// }}}
 
134
</script>
 
135
{% endblock %}
 
136
 
 
137
{% block content %}
 
138
<!-- Image Dialog --> 
 
139
<div class="jqmDialog" id="dialog">
 
140
   <img src="{{ MEDIA_URL }}/img/close_icon.png" alt="close" class="jqmClose" />
 
141
 
 
142
    <div class="box_title">
 
143
        <h3 class="box_title screenshot_title"></h3>
 
144
    </div>
 
145
 
 
146
    <div class="box_content">
 
147
      <div class="sizes">
 
148
         <a class="sizelink" href="#">1024 x 768</a>
 
149
         | <a class="sizelink" href="#">800 x 600</a>
 
150
         | <a class="sizelink" href="#">640 x 480</a>
 
151
      </div>
 
152
 
 
153
      <img class="image_display" src="#" />
 
154
 
 
155
      <div class="image_comment"></div>
 
156
    </div>
 
157
</div>
 
158
 
 
159
<!-- True content -->
 
160
{% for c in categories %}
 
161
 
 
162
<h1 class="category">{{ c.name }}</h1>
 
163
 
 
164
<ul class="screenshot_list">
 
165
{% for s in c.screenshots.all %}
 
166
<li>
 
167
<a class="displayimage" name="{{s.name}}" href="{{ s.screenshot.url }}"><img src="{{ s.thumbnail.url }}" />
 
168
   <span class="comment" style="display: none;">{{ s.comment|wl_markdown }}</span></a>
 
169
</li>
 
170
{% endfor %}
 
171
</ul>
 
172
 
 
173
{% endfor %}
 
174
{% endblock %}