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) {

     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

    10

        this.refresh = false;

    11

        this.opt_key = this.opt_value = null;

    12

    },

    13

    14

    // build a URL for the given tile image

    15

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

    16

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

    17

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

    18

    19

        // the subdomain to use

    20

        var subdomain = "";

    21

    22

        if (0)

    23

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

    24

    25

        // the (x, y) co-ordinates

    26

        var x = col * this.tile_width;

    27

        var y = row * this.tile_height;

    28

    29

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

    30

    31

        if (this.refresh)

    32

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

    33

    34

        if (this.opt_key && this.opt_value)

    35

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

    36

    37

        return url;

    38

    },

    39

});

    40

    41

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

    42

var Viewport = Class.create({

    43

    initialize: function (source, viewport_id) {

    44

        this.source = source;

    45

    46

        this.id = viewport_id;

    47

        this.div = $(viewport_id);

    48

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

    49

    50

        // the stack of zoom levels

    51

        this.zoom_layers = [];

    52

    53

        // pre-populate the stack

    54

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

    55

            var zoom_layer = new ZoomLayer(source, zoom_level);

    56

    57

            this.substrate.appendChild(zoom_layer.div);

    58

            this.zoom_layers[zoom_level] = zoom_layer;

    59

        }

    60

    61

        // make the substrate draggable

    62

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

    63

            onStart: this.on_scroll_start.bind(this),

    64

            onDrag: this.on_scroll_move.bind(this),

    65

            onEnd: this.on_scroll_end.bind(this),

    66

        });

    67

    68

        // event handlers

    69

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

    70

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

    71

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

    72

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

    83

    84

        // set viewport size

    85

        this.update_size();

    86

    87

        // initial location?    

    88

        if (document.location.hash) {

    89

            // x:y:z tuple

    90

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

    91

    92

            // unpack

    93

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

    94

    95

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

    96

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

    97

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

    98

    99

            // initial view

   100

            this.zoom_scaled(

   101

                cx - this.center_offset_x, 

   102

                cy - this.center_offset_y, 

   103

                z

   104

            );

   105

   106

        } else {

   107

            // this sets the scroll offsets, zoom level, and loads the tiles

   108

            this.zoom_to(0, 0, 0);

   109

        }

   110

    },

   111

   112

    /* event handlers */

   113

   114

    // window resized

   115

    on_resize: function (ev) {

   116

        this.update_size();

   117

        this.update_tiles();

   118

    },

   119

   120

    // double-click handler

   121

    on_dblclick: function (ev) {

   122

        var offset = this.event_offset(ev);

   123

   124

        this.zoom_center_to(

   125

            this.scroll_x + offset.x,

   126

            this.scroll_y + offset.y,

   127

            1   // zoom in

   128

        );

   129

    },

   130

   131

    // mousewheel handler

   132

    on_mousewheel: function (ev) {

   133

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

   134

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

   135

        var delta;

   136

   137

        // this is browser-dependant...

   138

        if (ev.wheelDelta) {

   139

            // IE + Opera

   140

            delta = ev.wheelDelta;

   141

   142

            if (window.opera) {  

   143

                // Opera, but apparently not newer versions?

   144

                //delta = -delta;

   145

            }

   146

   147

        } else if (ev.detail) {

   148

            // Mozilla

   149

            delta = -ev.detail;

   150

   151

        } else {

   152

            // mousewheel not supported...

   153

            return;

   154

   155

        }

   156

   157

        // don't scroll the page

   158

        if (ev.preventDefault)

   159

            ev.preventDefault();

   160

   161

        // delta > 0 : scroll up, zoom in

   162

        // delta < 0 : scroll down, zoom out

   163

        delta = delta < 0 ? -1 : 1;

   164

   165

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

   166

   167

        // absolute location of the cursor

   168

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

   169

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

   170

   171

        // zoom \o/

   172

        this.zoom_center_to(x, y, delta);

   173

    },

   174

   175

    // substrate scroll was started

   176

    on_scroll_start: function (ev) {

   177

   178

    },

   179

   180

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

   181

    on_scroll_move: function (ev) {

   182

        this.update_scroll();

   183

        this.update_after_timeout();

   184

    },

   185

   186

    // substrate scroll was ended, update tiles now

   187

    on_scroll_end: function (ev) {

   188

        this.update_now();

   189

    },

   190

   191

    /* get state */

   192

   193

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

   194

    event_offset: function (ev) {

   195

        var offset = this.div.cumulativeOffset();

   196

   197

        return {

   198

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

   199

            y: ev.pointerY() - offset.top

   200

        };

   201

    },

   202

   203

    /* modify state */

   204

   205

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

   206

    scroll_to: function (x, y) {

   207

        // update it via the style

   208

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

   209

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

   210

   211

        // update these as well

   212

        this.scroll_x = x;

   213

        this.scroll_y = y;

   214

    },

   215

   216

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

   217

    scroll_center_to: function (x, y) {

   218

        return this.scroll_to(

   219

            x - this.center_offset_x,

   220

            y - this.center_offset_y

   221

        );

   222

    },

   223

   224

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

   225

    zoom_scaled: function (x, y, delta) {

   226

        if (!this.update_zoom(delta))

   227

            return false;

   228

   229

        // scroll to the new position

   230

        this.scroll_to(x, y);

   231

   232

        // update view

   233

        // XXX: ...

   234

        this.update_after_timeout();

   235

   236

        return true;

   237

    },

   238

   239

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

   240

    zoom_to: function (x, y, delta) {

   241

        return this.zoom_scaled(

   242

            scaleByZoomDelta(x, delta),

   243

            scaleByZoomDelta(y, delta),

   244

            delta

   245

        );

   246

    },

   247

   248

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

   249

    zoom_center_to: function (x, y, delta) {

   250

        return this.zoom_scaled(

   251

            scaleByZoomDelta(x, delta) - this.center_offset_x,

   252

            scaleByZoomDelta(y, delta) - this.center_offset_y,

   253

            delta

   254

        );

   255

    },

   256

   275

   276

    /* update view/state to reflect reality */

   277

   278

    // figure out the viewport dimensions

   279

    update_size: function () {

   280

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

   281

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

   282

   283

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

   284

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

   285

    },

   286

   287

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

   288

    update_scroll: function() {

   289

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

   290

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

   291

    },

   292

   293

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

   294

    update_zoom: function(delta) {

   295

        if (!this.zoom_layer) {

   296

            // first zoom operation

   297

   298

            // is the new zoom level valid?

   299

            if (!this.zoom_layers[delta])

   300

                return false;

   301

   302

            // set the zoom layyer

   303

            this.zoom_layer = this.zoom_layers[delta];

   304

   305

            // enable it

   306

            this.zoom_layer.enable(11);

   307

   308

            // no need to .update_tiles or anything like that

   309

   310

        } else {

   311

            // is the new zoom level valid?

   312

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

   313

                return false;

   314

   315

            var zoom_old = this.zoom_layer;

   316

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

   317

   318

            // XXX: ugly hack

   319

            if (this.zoom_timer) {

   320

                clearTimeout(this.zoom_timer);

   321

                this.zoom_timer = null;

   322

            }

   323

   324

            // get other zoom layers out of the way

   325

            this.zoom_layers.each(function (zl) {

   326

                zl.disable();

   327

            });

   328

   329

            // update the zoom layer

   330

            this.zoom_layer = zoom_new;

   331

   332

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

   333

            zoom_new.enable(11);

   334

            zoom_old.enable(10);

   335

   336

            // resize the tiles in the two zoom layers

   337

            zoom_new.update_tiles(zoom_new.level);

   338

            zoom_old.update_tiles(zoom_old.level);

   339

   340

            // XXX: ugly hack

   341

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

   342

        }

   343

   347

        return true;

   348

    },

   358

   359

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

   360

    update_tiles: function() {

   361

        // short names for some vars...

   362

        var x = this.scroll_x;

   363

        var y = this.scroll_y;

   364

        var sw = this.view_width;

   365

        var sh = this.view_height;

   366

        var tw = this.source.tile_width;

   367

        var th = this.source.tile_height;

   368

        var zl = this.zoom_layer.level;

   369

   370

        // figure out what set of columns are visible

   371

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

   372

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

   373

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

   374

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

   375

   376

        // loop through all those tiles

   377

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

   378

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

   379

                // the tile's id

   380

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

   381

   382

                // does the element exist already?

   383

                var t = $(id);

   384

   385

                if (!t) {

   386

                    // build a new tile

   387

                    t = Builder.node("img", {

   388

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

   389

                            id:     id,

   390

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

   391

                            // style set later

   392

                        }

   393

                    );

   394

   395

                    // set the CSS style stuff

   396

                    t.style.top = th * row;

   397

                    t.style.left = tw * col;

   398

                    t.style.display = "none";

   399

   400

                    // wait for it to load

   401

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

   402

   403

                    // store the col/row

   404

                    t.__col = col;

   405

                    t.__row = row;

   406

   407

                    // add it to the zoom layer

   408

                    this.zoom_layer.add_tile(t);

   409

   410

                } else if (this.source.reload) {

   411

                    // force the tile to reload

   412

                    touch_tile(t, col, row);

   413

   414

                }

   415

            }

   416

        }

   417

   418

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

   419

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

   420

    }, 

   421

   422

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

   423

    update_after_timeout: function () {

   424

        this._update_idle = false;

   425

   426

        if (this._update_timeout)

   427

            clearTimeout(this._update_timeout);

   428

   429

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

   430

    },

   431

   432

    _update_timeout_trigger: function () {

   433

        this._update_idle = true;

   434

   435

        this.update_tiles();

   436

    },

   437

   438

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

   439

    update_now: function () {

   440

        if (this._update_timeout)

   441

            clearTimeout(this._update_timeout);

   442

   443

        if (!this._update_idle)

   444

            this.update_tiles();

   445

    },

   446

   447

});

   448

   449

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

   450

function _tile_loaded (ev) {

   451

    this.style.display = "block";

   452

}

   453

   454

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

   455

var ZoomLayer = Class.create({

   456

    initialize: function (source, zoom_level) {

   457

        this.source = source;

   458

        this.level = zoom_level;

   459

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

   460

   461

        // our tiles

   462

        this.tiles = [];

   463

    },

   464

   465

    // add a tile to this zoom layer

   466

    add_tile: function (tile) {

   467

        this.div.appendChild(tile);

   468

        this.tiles.push(tile);

   469

    },

   470

   471

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

   472

    enable: function (z_index) {

   473

        this.div.style.zIndex = z_index;

   474

        this.div.show();

   475

    },

   476

   477

    // hide this zoom layer

   478

    disable: function (z_index) {

   479

        this.div.hide();

   480

    },

   481

   482

    // update the tiles in this zoom layer so that they are in the correct position and of the correct size when

   483

    // viewed with the given zoom level

   484

    update_tiles: function (zoom_level) {

   485

        var zd = zoom_level - this.level;

   486

   487

        var tw = scaleByZoomDelta(this.source.tile_width, zd);

   488

        var th = scaleByZoomDelta(this.source.tile_height, zd);

   489

   490

        var tiles = this.tiles;

   491

        var tiles_len = tiles.length;

   492

        var t, ts;

   493

   494

        for (var i = 0; i < tiles_len; i++) {

   495

            t = tiles[i];

   496

            ts = t.style;

   497

   498

            ts.width = tw;

   499

            ts.height = th;

   500

            ts.top = th*t.__row;

   501

            ts.left = tw*t.__col;

   502

        }

   503

    },

   504

   505

   506

   507

});

   508

   509

// scale the given co-ordinate by a zoom delta. If we zoom in (dz > 0), n will become larger, and if we zoom 

   510

// out (dz < 0), n will become smaller.

   511

function scaleByZoomDelta (n, dz) {

   512

    if (dz > 0)

   513

        return n << dz;

   514

    else

   515

        return n >> -dz;

   516

}

   517