1

// A source of tile images of a specific width/height, zoom level range, and some other attributes

     2

var Source = Class.create({

     3

    initialize: function (path, tile_width, tile_height, zoom_min, zoom_max, img_width, img_height) {

     4

        this.path = path;

     5

        this.tile_width = tile_width;

     6

        this.tile_height = tile_height;

     7

        this.zoom_min = zoom_min;

     8

        this.zoom_max = zoom_max;

     9

        this.img_width = img_width;

    10

        this.img_height = img_height;

    11

    12

        this.refresh = false;

    13

        this.opt_key = this.opt_value = null;

    14

    },

    15

    16

    // build a URL for the given tile image

    17

    build_url: function (col, row, zl, sw, sh) {

    18

        // two-bit hash (0-4) based on the (col, row)

    19

        var hash = ( (col % 2) << 1 | (row % 2) ) + 1;

    20

    21

        // the subdomain to use

    22

        var subdomain = "";

    23

    24

        if (0)

    25

            subdomain = "tile" + hash + ".";

    26

    27

        // the (x, y) co-ordinates

    28

        var x = col * this.tile_width;

    29

        var y = row * this.tile_height;

    30

    31

        var url = this.path + "?x=" + x + "&y=" + y + "&zl=" + zl; // + "&sw=" + sw + "&sh=" + sh;

    32

    33

        if (this.refresh)

    34

            url += "&ts=" + new Date().getTime();

    35

    36

        if (this.opt_key && this.opt_value)

    37

            url += "&" + this.opt_key + "=" + this.opt_value;

    38

    39

        return url;

    40

    },

    41

    42

    // build an URL for a full image

    43

    build_image_url: function (cx, cy, w, h, zl) {

    44

        return (this.path + "?cx=" + cx + "&cy=" + cy + "&w=" + w + "&h=" + h + "&zl=" + zl);

    45

    }

    46

});

    47

    48

// a viewport that contains a substrate which contains several zoom layers which contain many tiles

    49

var Viewport = Class.create({

    50

    initialize: function (source, viewport_id) {

    51

        this.source = source;

    52

    53

        this.id = viewport_id;

    54

        this.div = $(viewport_id);

    55

        this.substrate = this.div.down("div.substrate");

    56

    57

        // the stack of zoom levels

    58

        this.zoom_layers = [];

    59

    60

        // pre-populate the stack

    61

        for (var zoom_level = source.zoom_min; zoom_level <= source.zoom_max; zoom_level++) {

    62

            var zoom_layer = new ZoomLayer(source, zoom_level);

    63

    64

            this.substrate.appendChild(zoom_layer.div);

    65

            this.zoom_layers[zoom_level] = zoom_layer;

    66

        }

    67

    68

        // make the substrate draggable

    69

        this.draggable = new Draggable(this.substrate, {

    70

            onStart: this.on_scroll_start.bind(this),

    71

            onDrag: this.on_scroll_move.bind(this),

    72

            onEnd: this.on_scroll_end.bind(this),

    73

        });

    74

    75

        // event handlers

    76

        Event.observe(this.substrate, "dblclick", this.on_dblclick.bindAsEventListener(this));

    77

        Event.observe(this.substrate, "mousewheel", this.on_mousewheel.bindAsEventListener(this));

    78

        Event.observe(this.substrate, "DOMMouseScroll", this.on_mousewheel.bindAsEventListener(this));     // mozilla

    79

        Event.observe(document, "resize", this.on_resize.bindAsEventListener(this));

    80

    81

        // zoom buttons

    82

        this.btn_zoom_in = $("btn-zoom-in");

    83

        this.btn_zoom_out = $("btn-zoom-out");

    84

    85

        if (this.btn_zoom_in)

    86

            Event.observe(this.btn_zoom_in, "click", this.zoom_in.bindAsEventListener(this));

    87

    88

        if (this.btn_zoom_out)

    89

            Event.observe(this.btn_zoom_out, "click", this.zoom_out.bindAsEventListener(this));

    90

    91

        // set viewport size

    92

        this.update_size();

    93

    94

        // this comes after update_size, since it must be updated once we have the size and zoom layer...

    95

        this.image_link = $("lnk-image");

    96

    97

        // initial location

    98

        var cx = 0, cy = 0, z = 0;

    99

   100

        // initial location?    

   101

        if (document.location.hash) {

   102

            // x:y:z tuple

   103

            var pt = document.location.hash.substr(1).split(":");

   104

   105

            // unpack    

   106

            if (pt.length) cx = parseInt(pt.shift());

   107

            if (pt.length) cy = parseInt(pt.shift());

   108

            if (pt.length) z = parseInt(pt.shift());

   109

   110

        } else {

   111

            // start in the center

   112

            cx = this.source.img_width / 2;

   113

            cy = this.source.img_height / 2;

   114

            z = 0; // XXX: xy unscaled: (this.source.zoom_min + this.source.zoom_max) / 2;

   115

        }

   116

   117

        // initial view

   118

        this.zoom_scaled(

   119

            cx - this.center_offset_x, 

   120

            cy - this.center_offset_y, 

   121

            z

   122

        );

   123

    },

   124

   125

    /* event handlers */

   126

   127

    // window resized

   128

    on_resize: function (ev) {

   129

        this.update_size();

   130

        this.update_tiles();

   131

    },

   132

   133

    // double-click handler

   134

    on_dblclick: function (ev) {

   135

        var offset = this.event_offset(ev);

   136

   137

        this.zoom_center_to(

   138

            this.scroll_x + offset.x,

   139

            this.scroll_y + offset.y,

   140

            1   // zoom in

   141

        );

   142

    },

   143

   144

    // mousewheel handler

   145

    on_mousewheel: function (ev) {

   146

        // this works in very weird ways, so it's based on code from http://adomas.org/javascript-mouse-wheel/

   147

        // (it didn't include any license, so this is written out manually)

   148

        var delta;

   149

   150

        // this is browser-dependant...

   151

        if (ev.wheelDelta) {

   152

            // IE + Opera

   153

            delta = ev.wheelDelta;

   154

   155

            if (window.opera) {  

   156

                // Opera, but apparently not newer versions?

   157

                //delta = -delta;

   158

            }

   159

   160

        } else if (ev.detail) {

   161

            // Mozilla

   162

            delta = -ev.detail;

   163

   164

        } else {

   165

            // mousewheel not supported...

   166

            return;

   167

   168

        }

   169

   170

        // don't scroll the page

   171

        if (ev.preventDefault)

   172

            ev.preventDefault();

   173

   174

        // delta > 0 : scroll up, zoom in

   175

        // delta < 0 : scroll down, zoom out

   176

        delta = delta < 0 ? -1 : 1;

   177

   178

        // Firefox's DOMMouseEvent's pageX/Y attributes are broken. layerN is for mozilla, offsetN for IE, seems to work

   179

   180

        // absolute location of the cursor

   181

        var x = parseInt(ev.target.style.left) + (ev.layerX ? ev.layerX : ev.offsetX);

   182

        var y = parseInt(ev.target.style.top) + (ev.layerY ? ev.layerY : ev.offsetY);

   183

   184

        // zoom \o/

   185

        this.zoom_center_to(x, y, delta);

   186

    },

   187

   188

    // substrate scroll was started

   189

    on_scroll_start: function (ev) {

   190

   191

    },

   192

   193

    // substrate was scrolled, update scroll_{x,y}, and then update tiles after 100ms

   194

    on_scroll_move: function (ev) {

   195

        this.update_scroll();

   196

        this.update_after_timeout();

   197

    },

   198

   199

    // substrate scroll was ended, update tiles now

   200

    on_scroll_end: function (ev) {

   201

        this.update_now();

   202

    },

   203

   204

    /* get state */

   205

   206

    // return the absolute (x, y) coords of the given event inside the viewport

   207

    event_offset: function (ev) {

   208

        var offset = this.div.cumulativeOffset();

   209

   210

        return {

   211

            x: ev.pointerX() - offset.left, 

   212

            y: ev.pointerY() - offset.top

   213

        };

   214

    },

   215

   216

    /* modify state */

   217

   218

    // scroll the view to place the given absolute (x, y) co-ordinate at the top left

   219

    scroll_to: function (x, y) {

   220

        // update it via the style

   221

        this.substrate.style.top = "-" + y + "px";

   222

        this.substrate.style.left = "-" + x + "px";

   223

   224

        // update these as well

   225

        this.scroll_x = x;

   226

        this.scroll_y = y;

   227

    },

   228

   229

    // scroll the view to place the given absolute (x, y) co-ordinate at the center

   230

    scroll_center_to: function (x, y) {

   231

        return this.scroll_to(

   232

            x - this.center_offset_x,

   233

            y - this.center_offset_y

   234

        );

   235

    },

   236

   237

    // zoom à la delta such that the given (zoomed) absolute (x, y) co-ordinates will be at the top left

   238

    zoom_scaled: function (x, y, delta) {

   239

        if (!this.update_zoom(delta))

   240

            return false;

   241

   242

        // scroll to the new position

   243

        this.scroll_to(x, y);

   244

   245

        // update view

   246

        // XXX: ...

   247

        this.update_after_timeout();

   248

   249

        return true;

   250

    },

   251

   252

    // zoom à la delta such that the given (current) absolute (x, y) co-ordinates will be at the top left

   253

    zoom_to: function (x, y, delta) {

   254

        return this.zoom_scaled(

   255

            scaleByZoomDelta(x, delta),

   256

            scaleByZoomDelta(y, delta),

   257

            delta

   258

        );

   259

    },

   260

   261

    // zoom à la delta such that the given (current) absolute (x, y) co-ordinates will be at the center

   262

    zoom_center_to: function (x, y, delta) {

   263

        return this.zoom_scaled(

   264

            scaleByZoomDelta(x, delta) - this.center_offset_x,

   265

            scaleByZoomDelta(y, delta) - this.center_offset_y,

   266

            delta

   267

        );

   268

    },

   269

   270

    // zoom à la delta, keeping the view centered

   271

    zoom_centered: function (delta) {

   272

        return this.zoom_center_to(

   273

            this.scroll_x + this.center_offset_x,

   274

            this.scroll_y + this.center_offset_y,

   275

            delta

   276

        );

   277

    },

   278

   279

    // zoom in one level, keeping the view centered

   280

    zoom_in: function () {

   281

        return this.zoom_centered(+1);

   282

    },

   283

   284

    // zoom out one leve, keeping the view centered

   285

    zoom_out: function () {

   286

        return this.zoom_centered(-1);

   287

    },

   288

   289

    /* update view/state to reflect reality */

   290

   291

    // figure out the viewport dimensions

   292

    update_size: function () {

   293

        this.view_width = this.div.getWidth();

   294

        this.view_height = this.div.getHeight();

   295

   296

        this.center_offset_x = Math.floor(this.view_width / 2);

   297

        this.center_offset_y = Math.floor(this.view_height / 2);

   298

   299

        this.update_image_link();

   300

    },

   301

   302

    // figure out the scroll offset as absolute pixel co-ordinates at the top left

   303

    update_scroll: function() {

   304

        this.scroll_x = -parseInt(this.substrate.style.left);

   305

        this.scroll_y = -parseInt(this.substrate.style.top);

   306

    },

   307

   308

    // wiggle the ZoomLevels around to match the current zoom level

   309

    update_zoom: function(delta) {

   310

        if (!this.zoom_layer) {

   311

            // first zoom operation

   312

   313

            // is the new zoom level valid?

   314

            if (!this.zoom_layers[delta])

   315

                return false;

   316

   317

            // set the zoom layyer

   318

            this.zoom_layer = this.zoom_layers[delta];

   319

   320

            // enable it

   321

            this.zoom_layer.enable(11);

   322

   323

            // no need to .update_tiles or anything like that

   324

   325

        } else {

   326

            // is the new zoom level valid?

   327

            if (!this.zoom_layers[this.zoom_layer.level + delta])

   328

                return false;

   329

   330

            var zoom_old = this.zoom_layer;

   331

            var zoom_new = this.zoom_layers[this.zoom_layer.level + delta];

   332

   333

            // XXX: ugly hack

   334

            if (this.zoom_timer) {

   335

                clearTimeout(this.zoom_timer);

   336

                this.zoom_timer = null;

   337

            }

   338

   339

            // get other zoom layers out of the way

   340

            this.zoom_layers.each(function (zl) {

   341

                zl.disable();

   342

            });

   343

   344

            // update the zoom layer

   345

            this.zoom_layer = zoom_new;

   346

   347

            // apply new z-indexes, preferr the current one over the new one

   348

            zoom_new.enable(11);

   349

            zoom_old.enable(10);

   350

   351

            // resize the tiles in the two zoom layers

   352

            zoom_new.update_tiles(zoom_new.level);

   353

            zoom_old.update_tiles(zoom_old.level);

   354

   355

            // XXX: ugly hack

   356

            this.zoom_timer = setTimeout(function () { zoom_old.disable()}, 1000);

   357

        }

   358

   359

        // update UI

   360

        this.update_zoom_ui();

   361

   362

        return true;

   363

    },

   364

   365

    // keep the zoom buttons, if any, updated

   366

    update_zoom_ui: function () {

   367

        if (this.btn_zoom_in)

   368

            (this.zoom_layer.level >= this.source.zoom_max) ? this.btn_zoom_in.disable() : this.btn_zoom_in.enable();

   369

   370

        if (this.btn_zoom_out)

   371

            (this.zoom_layer.level <= this.source.zoom_min) ? this.btn_zoom_out.disable() : this.btn_zoom_out.enable();

   372

   373

        this.update_image_link();

   374

    },

   375

   376

    // ensure that all tiles that are currently visible are loaded

   377

    update_tiles: function() {

   378

        // short names for some vars...

   379

        var x = this.scroll_x;

   380

        var y = this.scroll_y;

   381

        var sw = this.view_width;

   382

        var sh = this.view_height;

   383

        var tw = this.source.tile_width;

   384

        var th = this.source.tile_height;

   385

        var zl = this.zoom_layer.level;

   386

   387

        // figure out what set of columns are visible

   388

        var start_col = Math.max(0, Math.floor(x / tw));

   389

        var start_row = Math.max(0, Math.floor(y / th));

   390

        var end_col = Math.floor((x + sw) / tw);

   391

        var end_row = Math.floor((y + sh) / th);

   392

   393

        // loop through all those tiles

   394

        for (var col = start_col; col <= end_col; col++) {

   395

            for (var row = start_row; row <= end_row; row++) {

   396

                // the tile's id

   397

                var id = "tile_" + this.zoom_layer.level + "_" + col + "_" + row;

   398

   399

                // does the element exist already?

   400

                var t = $(id);

   401

   402

                if (!t) {

   403

                    // build a new tile

   404

                    t = Builder.node("img", {

   405

                            src:    this.source.build_url(col, row, zl, sw, sh),

   406

                            id:     id,

   407

                            title:  "(" + col + ", " + row + ")",

   408

                            // style set later

   409

                        }

   410

                    );

   411

   412

                    // set the CSS style stuff

   413

                    t.style.top = th * row;

   414

                    t.style.left = tw * col;

   415

                    t.style.display = "none";

   416

   417

                    // wait for it to load

   418

                    Event.observe(t, "load", _tile_loaded.bindAsEventListener(t));

   419

   420

                    // store the col/row

   421

                    t.__col = col;

   422

                    t.__row = row;

   423

   424

                    // add it to the zoom layer

   425

                    this.zoom_layer.add_tile(t);

   426

   427

                } else if (this.source.reload) {

   428

                    // force the tile to reload

   429

                    touch_tile(t, col, row);

   430

   431

                }

   432

            }

   433

        }

   434

   435

        this.update_scroll_ui();

   436

    }, 

   437

   438

    // update scroll-dependant UI elements

   439

    update_scroll_ui: function () {

   440

        // update link-to-image

   441

        this.update_image_link();

   442

   443

        // update the link-to-this-page thing

   444

        document.location.hash = "#" + (this.scroll_x + this.center_offset_x) + ":" + (this.scroll_y + this.center_offset_y) + ":" + this.zoom_layer.level;

   445

    },

   446

   447

    // update image link with size, zoom, pos

   448

    update_image_link: function () {

   449

        if (!this.image_link)

   450

            return;

   451

   452

        this.image_link.href = this.source.build_image_url(

   453

            this.scroll_x + this.center_offset_x,

   454

            this.scroll_y + this.center_offset_y,

   455

            this.view_width, this.view_height,

   456

            this.zoom_layer.level

   457

        );

   458

   459

        this.image_link.innerHTML = this.view_width + "x" + this.view_height + "@" + this.zoom_layer.level;

   460

    },

   461

   462

    // do update_tiles after 100ms, unless we are called again

   463

    update_after_timeout: function () {

   464

        this._update_idle = false;

   465

   466

        if (this._update_timeout)

   467

            clearTimeout(this._update_timeout);

   468

   469

        this._update_timeout = setTimeout(this._update_timeout_trigger.bind(this), 100);  

   470

    },

   471

   472

    _update_timeout_trigger: function () {

   473

        this._update_idle = true;

   474

   475

        this.update_tiles();

   476

    },

   477

   478

    // call update_tiles if it hasn't been called due to update_after_timeout

   479

    update_now: function () {

   480

        if (this._update_timeout)

   481

            clearTimeout(this._update_timeout);

   482

   483

        if (!this._update_idle)

   484

            this.update_tiles();

   485

    },

   486

   487

});

   488

   489

// used by Viewport.update_tiles to make a tile visible after it has loaded

   490

function _tile_loaded (ev) {

   491

    this.style.display = "block";

   492

}

   493

   494

// a zoom layer containing the tiles for one zoom level

   495

var ZoomLayer = Class.create({

   496

    initialize: function (source, zoom_level) {

   497

        this.source = source;

   498

        this.level = zoom_level;

   499

        this.div = Builder.node("div", { id: "zl_" + this.level, style: "position: relative; display: none;"});

   500

   501

        // our tiles

   502

        this.tiles = [];

   503

    },

   504

   505

    // add a tile to this zoom layer

   506

    add_tile: function (tile) {

   507

        this.div.appendChild(tile);

   508

        this.tiles.push(tile);

   509

    },

   510

   511

    // make this zoom layer visible with the given z-index

   512

    enable: function (z_index) {

   513

        this.div.style.zIndex = z_index;

   514

        this.div.show();

   515

    },

   516

   517

    // hide this zoom layer

   518

    disable: function (z_index) {

   519

        this.div.hide();

   520

    },