summaryrefslogtreecommitdiff
path: root/swat.obsolete/apps/qooxdoo-examples/example/GalleryList_1.html
blob: 1dae618f1847dd8cdd63745856ebf8d61983b04f (plain)
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
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>qooxdoo &raquo; Demo</title>
  <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
  <!--[if IE]>
  <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
  <![endif]-->
  <script type="text/javascript" src="../../script/qx.js"></script>

  <style type="text/css">
.qx.ui.embed.GalleryList{
  position: absolute;
  visibility: visible;
}

.qx.ui.embed.GalleryList .galleryFrame{
  padding: 2px;
}

.qx.ui.embed.GalleryList .galleryCell{
  margin: 2px;
  padding-bottom: 2px;
  border: 1px solid #EEE;

  background: #fff;
  overflow: hidden;
  white-space: normal;

  font-family: Tahoma, Verdana, sans-serif;
  font-size: 12px;

  cursor: default;

  -moz-user-select: none;
  user-select: none;

  position: relative;
}

.qx.ui.embed.GalleryList .galleryCell img{
  vertical-align: bottom;
  display: block;
}

.qx.ui.embed.GalleryList .galleryNumber{
  width: 45px;
  padding: 4px;

  position: absolute;
  top: 0px;
  left: 0px;
}

.qx.ui.embed.GalleryList .galleryImageContainer{
  position: absolute;
  top: 0px;
  left: 50px;
}

.qx.ui.embed.GalleryList .galleryText{
  padding: 4px;
  position: absolute;
  top: 0px;
  left: 130px;
}

.qx.ui.embed.GalleryList .galleryNumber,
.qx.ui.embed.GalleryList .galleryText h3{
  font-weight: bold;
  font-size: 11px;
}

.qx.ui.embed.GalleryList .galleryText p{
  font-size: 10px;
}

.qx.ui.embed.GalleryList .galleryCell-Selected{
  background: #9BBCFF;
  border-color: #3B7CFF;
}
  </style>
</head>
<body>
  <script type="text/javascript" src="../../script/layout.js"></script>

  <div id="demoDescription">
    <p>ListSort implementation</p>
  </div>

  <script type="text/javascript">
    qx.core.Init.getInstance().defineMain(function()
    {
      var imgPath = qx.manager.object.AliasManager.getInstance().resolvePath("icon/48/bug.png");

      var galleryData = [];

      for (var i=0; i<100; i++)
      {
        galleryData.push({
          display : "bmzN9ci5",
          width : 350,
          height : 350,
          thumbWidth : 48,
          thumbHeight : 48,
          title : "gohome.png",
          timestamp : Math.random().toString(),
          comment : "Cool Comment sadas asd dsa asdas dasd asd asdas dasdasdasd sadasdas dsds as",
          id : "7686191121780974-10682",
          src : imgPath,
          number : "#" + i
        });
      };

      var galleryList = new qx.ui.embed.GalleryList(galleryData);

      galleryList.setWidth(400);
      galleryList.setTop(48);
      galleryList.setBottom(48);
      galleryList.setLeft(250);

      galleryList.setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
      galleryList.setBackgroundColor("white");

      qx.ui.core.ClientDocument.getInstance().add(galleryList);
    });
  </script>
</body>
</html>