1// Mohammad Ebrahim Vahab Aghaie 2// 99/10/24 3 4if (typeof Object.create !== 'function') { 5 Object.create = function (obj) { 6 function F() { }; 7 F.prototype = obj; 8 return new F(); 9 }; 10} 11 12(function ($, window, document, undefined) { 13 var Grid = { 14 init_: function (options, elem) { 15 var self = this; 16 17 self.elem = elem; 18 self.$elem = $(elem); 19 20 self.options = $.extend({}, $.fn.skeletonTemplate.options, options); 21 22 self.display_(); 23 }, 24 display_: function () { 25 var self = this; 26 if (self.options.gridType == true) { 27 self.$gridType = $('<div />'); 28 self.$gridType.addClass('wrapper-skeleton-grid-type'); 29 self.$gridType.append( 30 `<div class="grid-head-skeleton-boxes-grid-type"> 31 <div class="width-box-large-grid-type"> 32 <div class="skeleton skeleton-line" style="--c-w: 100px;--bg: #909598;--c-p:0px;--l-h: 17px;"></div> 33 </div> 34 <div class="width-box-grid-type"> 35 <div class="skeleton skeleton-line" style="--c-w: 100px;--bg: #909598;--c-p:0px;--l-h: 17px;"></div> 36 </div> 37 <div class="width-box-grid-type"> 38 <div class="skeleton skeleton-line" style="--c-w: 100px;--bg: #909598;--c-p:0px;--l-h: 17px;"></div> 39 </div> 40 </div> 41 <hr> 42 <div class="grid-body-skeleton-boxes-grid-type"> 43 <div class="width-box-large-grid-type"> 44 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 45 </div> 46 <div class="width-box-grid-type"> 47 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 48 </div> 49 <div class="width-box-grid-type"> 50 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 51 </div> 52 </div> 53 <hr> 54 <div class="grid-body-skeleton-boxes-grid-type"> 55 <div class="width-box-large-grid-type"> 56 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 57 </div> 58 <div class="width-box-grid-type"> 59 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 60 </div> 61 <div class="width-box-grid-type"> 62 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 63 </div> 64 </div> 65 <hr> 66 <div class="grid-body-skeleton-boxes-grid-type"> 67 <div class="width-box-large-grid-type"> 68 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 69 </div> 70 <div class="width-box-grid-type"> 71 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 72 </div> 73 <div class="width-box-grid-type"> 74 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 75 </div> 76 </div> 77 <hr> 78 <div class="grid-body-skeleton-boxes-grid-type"> 79 <div class="width-box-large-grid-type">
80 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 81 </div> 82 <div class="width-box-grid-type"> 83 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 84 </div> 85 <div class="width-box-grid-type"> 86 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 87 </div> 88 </div> 89 <hr> 90 <div class="grid-body-skeleton-boxes-grid-type"> 91 <div class="width-box-large-grid-type"> 92 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 93 </div> 94 <div class="width-box-grid-type"> 95 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 96 </div> 97 <div class="width-box-grid-type"> 98 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 99 </div> 100 </div> 101 <hr> 102 <div class="grid-body-skeleton-boxes-grid-type"> 103 <div class="width-box-large-grid-type"> 104 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 105 </div> 106 <div class="width-box-grid-type"> 107 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 108 </div> 109 <div class="width-box-grid-type"> 110 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 111 </div> 112 </div> 113 <hr> 114 <div class="grid-body-skeleton-boxes-grid-type"> 115 <div class="width-box-large-grid-type"> 116 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 117 </div> 118 <div class="width-box-grid-type"> 119 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 120 </div> 121 <div class="width-box-grid-type"> 122 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 123 </div> 124 </div> 125 <hr> 126 <div class="grid-body-skeleton-boxes-grid-type"> 127 <div class="width-box-large-grid-type"> 128 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 129 </div> 130 <div class="width-box-grid-type"> 131 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 132 </div> 133 <div class="width-box-grid-type"> 134 <div class="skeleton skeleton-line" style="--c-w: 100%;--bg: #D1D5D6;--c-p:0px;--l-h: 17px;"></div> 135 </div> 136 </div> 137 <hr>` 138 ); 139 self.$elem.html(self.$gridType) 140 }; 141 142 if (self.options.listType == true) { 143 self.$listType = $('<div />'); 144 self.$listType.addClass('wrapper-skeleton-list-type'); 145 self.$listType.append(
146 `<div class="grid-body-skeleton-boxes-list-type"> 147 <div class="width-box-list-type"> 148 <div class="skeleton skeleton-rect" style="--lines: 0;--c-w: 70px;--rect-h: 50px;--bg: #D1D5D6;--c-p: 5px;"></div> 149 <div class="line-width"> 150 <div class="skeleton skeleton-line" style="--c-w: 100px;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 151 <div class="skeleton skeleton-line" style="--c-w: 200px;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 152 </div> 153 </div> 154 <div class="width-box-large-list-type"> 155 <div class="skeleton skeleton-line" style="--c-w: 50%;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 156 <div class="skeleton skeleton-line" style="--c-w: 100%;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 157 <div class="skeleton skeleton-line" style="--c-w: 100%;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 158 </div> 159 </div> 160 <hr> 161 <div class="grid-body-skeleton-boxes-list-type"> 162 <div class="width-box-list-type"> 163 <div class="skeleton skeleton-rect" style="--lines: 0;--c-w: 70px;--rect-h: 50px;--bg: #D1D5D6;--c-p: 5px;"></div> 164 <div class="line-width"> 165 <div class="skeleton skeleton-line" style="--c-w: 100px;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 166 <div class="skeleton skeleton-line" style="--c-w: 200px;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 167 </div> 168 </div> 169 <div class="width-box-large-list-type"> 170 <div class="skeleton skeleton-line" style="--c-w: 50%;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 171 <div class="skeleton skeleton-line" style="--c-w: 100%;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 172 <div class="skeleton skeleton-line" style="--c-w: 100%;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 173 </div> 174 </div> 175 <hr> 176 <div class="grid-body-skeleton-boxes-list-type"> 177 <div class="width-box-list-type"> 178 <div class="skeleton skeleton-rect" style="--lines: 0;--c-w: 70px;--rect-h: 50px;--bg: #D1D5D6;--c-p: 5px;"></div> 179 <div class="line-width"> 180 <div class="skeleton skeleton-line" style="--c-w: 100px;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 181 <div class="skeleton skeleton-line" style="--c-w: 200px;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 182 </div> 183 </div> 184 <div class="width-box-large-list-type"> 185 <div class="skeleton skeleton-line" style="--c-w: 50%;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 186 <div class="skeleton skeleton-line" style="--c-w: 100%;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 187 <div class="skeleton skeleton-line" style="--c-w: 100%;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 188 </div> 189 </div> 190 <hr> 191 <div class="grid-body-skeleton-boxes-list-type"> 192 <div class="width-box-list-type"> 193 <div class="skeleton skeleton-rect" style="--lines: 0;--c-w: 70px;--rect-h: 50px;--bg: #D1D5D6;--c-p: 5px;"></div> 194 <div class="line-width"> 195 <div class="skeleton skeleton-line" style="--c-w: 100px;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div>
196 <div class="skeleton skeleton-line" style="--c-w: 200px;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 197 </div> 198 </div> 199 <div class="width-box-large-list-type"> 200 <div class="skeleton skeleton-line" style="--c-w: 50%;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 201 <div class="skeleton skeleton-line" style="--c-w: 100%;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 202 <div class="skeleton skeleton-line" style="--c-w: 100%;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 203 </div> 204 </div> 205 <hr> 206 <div class="grid-body-skeleton-boxes-list-type"> 207 <div class="width-box-list-type"> 208 <div class="skeleton skeleton-rect" style="--lines: 0;--c-w: 70px;--rect-h: 50px;--bg: #D1D5D6;--c-p: 5px;"></div> 209 <div class="line-width"> 210 <div class="skeleton skeleton-line" style="--c-w: 100px;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 211 <div class="skeleton skeleton-line" style="--c-w: 200px;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 212 </div> 213 </div> 214 <div class="width-box-large-list-type"> 215 <div class="skeleton skeleton-line" style="--c-w: 50%;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 216 <div class="skeleton skeleton-line" style="--c-w: 100%;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 217 <div class="skeleton skeleton-line" style="--c-w: 100%;--l-h: 10px;--c-p: 5px;--bg: #D1D5D6;"></div> 218 </div> 219 </div> 220 <hr>` 221 ); 222 self.$elem.html(self.$listType) 223 }; 224 225 if (self.options.cardType == true) { 226 self.$cardType = $('<div />'); 227 self.$cardType.addClass('wrapper-skeleton-card-type'); 228 self.$cardType.append( 229 `<div class="card-box-card-ype"> 230 <div class="rect-box-card-type"> 231 <div class="skeleton skeleton-rect" style="--c-w: 100%;--l-h: 50px;--c-p: 5px;--bg: #D1D5D6"></div> 232 </div> 233 <div class="rect-lines-card-type"> 234 <div class="skeleton skeleton-line" style="--c-w: 50%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div> 235 <div class="skeleton skeleton-line" style="--c-w: 100%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div> 236 <div class="skeleton skeleton-line" style="--c-w: 100%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div> 237 </div> 238 </div> 239 <div class="card-box-card-ype"> 240 <div class="rect-box-card-type"> 241 <div class="skeleton skeleton-rect" style="--c-w: 100%;--l-h: 50px;--c-p: 5px;--bg: #D1D5D6"></div> 242 </div> 243 <div class="rect-lines-card-type"> 244 <div class="skeleton skeleton-line" style="--c-w: 50%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div> 245 <div class="skeleton skeleton-line" style="--c-w: 100%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div> 246 <div class="skeleton skeleton-line" style="--c-w: 100%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div> 247 </div> 248 </div> 249 <div class="card-box-card-ype"> 250 <div class="rect-box-card-type"> 251 <div class="skeleton skeleton-rect" style="--c-w: 100%;--l-h: 50px;--c-p: 5px;--bg: #D1D5D6"></div> 252 </div> 253 <div class="rect-lines-card-type">
254 <div class="skeleton skeleton-line" style="--c-w: 50%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div> 255 <div class="skeleton skeleton-line" style="--c-w: 100%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div> 256 <div class="skeleton skeleton-line" style="--c-w: 100%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div> 257 </div> 258 </div> 259 <div class="card-box-card-ype"> 260 <div class="rect-box-card-type"> 261 <div class="skeleton skeleton-rect" style="--c-w: 100%;--l-h: 50px;--c-p: 5px;--bg: #D1D5D6"></div> 262 </div> 263 <div class="rect-lines-card-type"> 264 <div class="skeleton skeleton-line" style="--c-w: 50%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div> 265 <div class="skeleton skeleton-line" style="--c-w: 100%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div> 266 <div class="skeleton skeleton-line" style="--c-w: 100%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div> 267 </div> 268 </div> 269 <div class="card-box-card-ype"> 270 <div class="rect-box-card-type"> 271 <div class="skeleton skeleton-rect" style="--c-w: 100%;--l-h: 50px;--c-p: 5px;--bg: #D1D5D6"></div> 272 </div> 273 <div class="rect-lines-card-type"> 274 <div class="skeleton skeleton-line" style="--c-w: 50%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div> 275 <div class="skeleton skeleton-line" style="--c-w: 100%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div> 276 <div class="skeleton skeleton-line" style="--c-w: 100%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div> 277 </div> 278 </div> 279 <div class="card-box-card-ype"> 280 <div class="rect-box-card-type"> 281 <div class="skeleton skeleton-rect" style="--c-w: 100%;--l-h: 50px;--c-p: 5px;--bg: #D1D5D6"></div> 282 </div> 283 <div class="rect-lines-card-type"> 284 <div class="skeleton skeleton-line" style="--c-w: 50%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div> 285 <div class="skeleton skeleton-line" style="--c-w: 100%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div> 286 <div class="skeleton skeleton-line" style="--c-w: 100%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div> 287 </div> 288 </div> 289 <div class="card-box-card-ype"> 290 <div class="rect-box-card-type"> 291 <div class="skeleton skeleton-rect" style="--c-w: 100%;--l-h: 50px;--c-p: 5px;--bg: #D1D5D6"></div> 292 </div> 293 <div class="rect-lines-card-type"> 294 <div class="skeleton skeleton-line" style="--c-w: 50%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div> 295 <div class="skeleton skeleton-line" style="--c-w: 100%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div> 296 <div class="skeleton skeleton-line" style="--c-w: 100%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div> 297 </div> 298 </div> 299 <div class="card-box-card-ype"> 300 <div class="rect-box-card-type"> 301 <div class="skeleton skeleton-rect" style="--c-w: 100%;--l-h: 50px;--c-p: 5px;--bg: #D1D5D6"></div> 302 </div> 303 <div class="rect-lines-card-type"> 304 <div class="skeleton skeleton-line" style="--c-w: 50%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div> 305 <div class="skeleton skeleton-line" style="--c-w: 100%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div>
306 <div class="skeleton skeleton-line" style="--c-w: 100%; --l-h: 10px;--c-p: 5px;--bg: #D1D5D6"></div> 307 </div> 308 </div>` 309 ); 310 self.$elem.append(self.$cardType) 311 } 312 } 313 } 314 $.fn.skeletonTemplate = function (options) { 315 return this.each(function () { 316 var grid = Object.create(Grid); 317 318 grid.init_(options, this); 319 320 $.data(this, 'grid', grid); 321 322 }); 323 }; 324 325 $.fn.skeletonTemplate.options = { 326 gridType: false, 327 listType: false, 328 cardType: false 329 }; 330})(jQuery, window, document) 331 332 333
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.