platforma/static/js/main.js

   1 // Teraz nieużywane
   2 function highlight(colour) {
   3     var range, sel;
   4     if (window.getSelection) {
   5         // Non-IE case
   6         sel = window.getSelection();
   7         if (sel.getRangeAt) {
   8             range = sel.getRangeAt(0);
   9         }
  10         document.designMode = "on";
  11         if (range) {
  12             sel.removeAllRanges();
  13             sel.addRange(range);
  14         }
  15         // Use HiliteColor since some browsers apply BackColor to the whole block
  16         if ( !document.execCommand("HiliteColor", false, colour) ) {
  17             document.execCommand("BackColor", false, colour);
  18         }
  19         document.designMode = "off";
  20     } else if (document.selection && document.selection.createRange) {
  21         // IE case
  22         range = document.selection.createRange();
  23         range.execCommand("BackColor", false, colour);
  24     }
  25 }
  26
  27 // function unselectThemes(themeId) {
  28 //     $('.Apple-style-span').each(function() {
  29 //         $(this).after($(this).html());
  30 //         $(this).remove();
  31 //     });
  32 // }
  33
  34 function gallery(element, url) {
  35     if (!url) {
  36         return
  37     }
  38
  39     var element = $(element);
  40     var imageDimensions = {};
  41
  42     function changePage(pageNumber) {
  43         $('img', element).attr('src', element.data('images')[pageNumber - 1]);
  44     }
  45
  46     function normalizeNumber(pageNumber) {
  47         // Numer strony musi być pomiędzy 1 a najwyższym numerem
  48         var pageCount = element.data('images').length;
  49         pageNumber = parseInt(pageNumber, 10);
  50
  51         if (!pageNumber || pageNumber == NaN || pageNumber == Infinity || pageNumber == -Infinity) {
  52             return 1;
  53         } else if (pageNumber < 1) {
  54             return 1;
  55         } else if (pageNumber > pageCount) {
  56             return pageCount;
  57         } else {
  58             return pageNumber;
  59         }
  60     }
  61
  62     $.ajax({
  63         url: url,
  64         type: 'GET',
  65         dataType: 'json',
  66
  67         success: function(data) {
  68             element.data('images', data);
  69             var pn = $('.page-number', element);
  70             pn.change(function(event) {
  71                 console.log('change!', $(this).val());
  72                 event.preventDefault();
  73                 var n = normalizeNumber(pn.val());
  74                 pn.val(n);
  75                 changePage(n);
  76             });
  77             $('.previous-page', element).click(function() {
  78                 pn.val(normalizeNumber(pn.val()) - 1);
  79                 pn.change();
  80             });
  81             $('.next-page', element).click(function() {
  82                 pn.val(normalizeNumber(pn.val()) + 1);
  83                 pn.change();
  84             });
  85
  86
  87             var image = $('img', element).attr('unselectable', 'on');
  88             var origin = {};
  89             var imageOrigin = {};
  90             var zoomFactor = 1;
  91
  92             $('.zoom-in', element).click(function() {
  93                 zoomFactor = Math.min(2, zoomFactor + 0.2);
  94                 zoom();
  95             });
  96             $('.zoom-out', element).click(function() {
  97                 zoomFactor = Math.max(0.2, zoomFactor - 0.2);
  98                 zoom();
  99             });
 100
 101             $('img', element).load(function() {
 102                 image.css({width: null, height: null});
 103                 imageDimensions = {
 104                     width: $(this).width() * zoomFactor,
 105                     height: $(this).height() * zoomFactor,
 106                     originWidth: $(this).width(),
 107                     originHeight: $(this).height(),
 108                     galleryWidth: $(this).parent().width(),
 109                     galleryHeight: $(this).parent().height()
 110                 };
 111                 console.log('load', imageDimensions)
 112                 var position = normalizePosition(
 113                     image.position().left,
 114                     image.position().top,
 115                     imageDimensions.galleryWidth,
 116                     imageDimensions.galleryHeight,
 117                     imageDimensions.width,
 118                     imageDimensions.height
 119                 );
 120                 image.css({left: position.x, top: position.y, width: $(this).width() * zoomFactor, height: $(this).height() * zoomFactor});
 121             });
 122
 123             $(window).resize(function() {
 124                 imageDimensions.galleryWidth = image.parent().width();
 125                 imageDimensions.galleryHeight = image.parent().height();
 126             });
 127
 128             function bounds(galleryWidth, galleryHeight, imageWidth, imageHeight) {
 129                 return {
 130                     maxX: 0,
 131                     maxY: 0,
 132                     minX: galleryWidth - imageWidth,
 133                     minY: galleryHeight - imageHeight
 134                 }
 135             }
 136
 137             function normalizePosition(x, y, galleryWidth, galleryHeight, imageWidth, imageHeight) {
 138                 var b = bounds(galleryWidth, galleryHeight, imageWidth, imageHeight);
 139                 return {
 140                     x: Math.min(b.maxX, Math.max(b.minX, x)),
 141                     y: Math.min(b.maxY, Math.max(b.minY, y))
 142                 }
 143             }
 144
 145             function onMouseMove(event) {
 146                 var position = normalizePosition(
 147                     event.clientX - origin.x + imageOrigin.left,
 148                     event.clientY - origin.y + imageOrigin.top,
 149                     imageDimensions.galleryWidth,
 150                     imageDimensions.galleryHeight,
 151                     imageDimensions.width,
 152                     imageDimensions.height
 153                 );
 154                 image.css({position: 'absolute', top: position.y, left: position.x});
 155                 return false;
 156             }
 157
 158             function setZoom(factor) {
 159                 zoomFactor = factor;
 160             }
 161
 162             function zoom() {
 163                 imageDimensions.width = imageDimensions.originWidth * zoomFactor;
 164                 imageDimensions.height = imageDimensions.originHeight * zoomFactor;
 165                 var position = normalizePosition(
 166                     image.position().left,
 167                     image.position().top,
 168                     imageDimensions.galleryWidth,
 169                     imageDimensions.galleryHeight,
 170                     imageDimensions.width,
 171                     imageDimensions.height
 172                 );
 173                 console.log(image.position(), imageDimensions, position);
 174                 image.css({width: imageDimensions.width, height: imageDimensions.height,
 175                     left: position.x, top: position.y});
 176
 177             }
 178
 179             window.setZoom = setZoom;
 180
 181             function onMouseUp(event) {
 182                 $(document)
 183                     .unbind('mousemove.gallery')
 184                     .unbind('mouseup.gallery');
 185                 return false;
 186             }
 187
 188             image.bind('mousedown', function(event) {
 189                 origin = {
 190                     x: event.clientX,
 191                     y: event.clientY
 192                 };
 193                 imageOrigin = image.position();
 194                 $(document)
 195                     .bind('mousemove.gallery', onMouseMove)
 196                     .bind('mouseup.gallery', onMouseUp);
 197                 return false;
 198             });
 199         }
 200     });
 201 }
 202
 203
 204 function html(element) {
 205     var element = $(element);
 206
 207     function selectTheme(themeId)
 208     {
 209         var selection = window.getSelection();
 210
 211         // remove current selection
 212         selection.removeAllRanges();
 213
 214         var range = document.createRange();
 215         var s = $(".motyw[theme-class='"+themeId+"']")[0];
 216         var e = $(".end[theme-class='"+themeId+"']")[0];
 217
 218         if(s && e) {
 219             range.setStartAfter(s);
 220             range.setEndBefore(e);
 221             selection.addRange(range);
 222         }
 223     };
 224
 225     // function openForEdit($origin)
 226     // {
 227     //     // if(this.currentOpen && this.currentOpen != $origin) {
 228     //     //     this.closeWithSave(this.currentOpen);
 229     //     // }
 230     //
 231     //     var $box = null
 232     //
 233     //     // annotations overlay their sub box - not their own box //
 234     //     if($origin.is(".annotation-inline-box"))
 235     //         $box = $("*[x-annotation-box]", $origin);
 236     //     else
 237     //         $box = $origin;
 238     //
 239     //     var x = $box[0].offsetLeft;
 240     //     var y = $box[0].offsetTop;
 241     //     var w = $box.outerWidth();
 242     //     var h = $box.innerHeight();
 243     //
 244     //     console.log("Edit origin:", $origin, " box:", $box);
 245     //     console.log("offsetParent:", $box[0].offsetParent);
 246     //     console.log("Dimensions: ", x, y, w , h);
 247     //
 248     //     // start edition on this node
 249     //     var $overlay = $('<div class="html-editarea"><textarea></textarea></div>');
 250     //
 251     //     h = Math.max(h - 20, 2*parseInt($box.css('line-height')));
 252     //
 253     //     console.log(h);
 254     //
 255     //     $overlay.css({
 256     //         position: 'absolute',
 257     //         height: h,
 258     //         left: x,
 259     //         top: y,
 260     //         right: 0
 261     //     });
 262     //
 263     //     $($box[0].offsetParent).append($overlay);
 264     //     console.log($overlay);
 265     // }
 266     //
 267     // $('.edit-button').live('click', function() {
 268     //     openForEdit($(this).parent());
 269     // });
 270     //
 271     var button = $('<button class="edit-button">Edytuj</button>');
 272     $(element).bind('mousemove', function(event) {
 273         var editable = $(event.target).closest('*[x-editable]');
 274         $('.active[x-editable]', element).not(editable).removeClass('active').children('.edit-button').remove();
 275         if (!editable.hasClass('active')) {
 276             editable.addClass('active').append(button);
 277         }
 278     });
 279
 280     $('.motyw').live('click', function() {
 281         selectTheme($(this).attr('theme-class'));
 282     });
 283 }
 284
 285
 286 $(function() {
 287     gallery('#sidebar', $('#document-meta .gallery').html());
 288     html('#html-view');
 289
 290     CodeMirror.fromTextArea('id_text', {
 291         parserfile: 'parsexml.js',
 292         path: "/static/js/lib/codemirror/",
 293         stylesheet: "/static/css/xmlcolors.css",
 294         parserConfig: {
 295             useHTMLKludges: false
 296         },
 297         iframeClass: 'xml-iframe',
 298         textWrapping: true,
 299         tabMode: 'spaces',
 300         indentUnit: 0,
 301         initCallback: function(editor) {
 302             $('#save-button').click(function(event) {
 303                 event.preventDefault();
 304                 $.blockUI({message: $('#save-dialog')});
 305             });
 306
 307             $('#save-ok').click(function() {
 308                 $.blockUI({message: 'Zapisywanie...'});
 309
 310                 var metaComment = '<!--';
 311                 $('#document-meta div').each(function() {
 312                     metaComment += '\n\t' + $(this).attr('class') + ': ' + $(this).html();
 313                 });
 314                 metaComment += '\n-->'
 315
 316                 var data = {
 317                     name: $('#document-name').html(),
 318                     text: metaComment + editor.getCode(),
 319                     revision: $('#document-revision').html(),
 320                     author: 'annonymous',
 321                     comment: $('#komentarz').val()
 322                 };
 323
 324                 console.log(data);
 325
 326                 $.ajax({
 327                     url: document.location.href,
 328                     type: "POST",
 329                     dataType: "json",
 330                     data: data,
 331                     success: function(data) {
 332                         if (data.text) {
 333                             editor.setCode(data.text);
 334                             $('#document-revision').html(data.revision);
 335                         } else {
 336                             console.log(data.errors);
 337                             alert(data.errors);
 338                         }
 339                         $.unblockUI();
 340                     },
 341                     error: function(xhr, textStatus, errorThrown) {
 342                         alert('error: ' + textStatus + ' ' + errorThrown);
 343                     },
 344                 })
 345             });
 346
 347             $('#save-cancel').click(function() {
 348                 $.unblockUI();
 349             });
 350
 351             $('#simple-view-tab').click(function() {
 352                 if ($(this).hasClass('active')) {
 353                     return;
 354                 }
 355                 $(this).addClass('active');
 356                 $('#source-view-tab').removeClass('active');
 357                 $('#source-editor').hide();
 358                 $('#simple-editor').show();
 359                 transform(editor);
 360             });
 361
 362             $('#source-view-tab').click(function() {
 363                 if ($(this).hasClass('active')) {
 364                     return;
 365                 }
 366                 $(this).addClass('active');
 367                 $('#simple-view-tab').removeClass('active');
 368                 $('#simple-editor').hide();
 369                 $('#source-editor').show();
 370                 reverseTransform(editor);
 371             });
 372
 373             $('.toolbar button').click(function(event) {
 374                 event.preventDefault();
 375                 var params = eval("(" + $(this).attr('ui:action-params') + ")");
 376                 scriptletCenter.scriptlets[$(this).attr('ui:action')](editor, params);
 377             });
 378
 379             $('.toolbar select').change(function() {
 380                 var slug = $(this).val();
 381
 382                 $('.toolbar-buttons-container').hide().filter('[data-group=' + slug + ']').show();
 383                 $(window).resize();
 384             });
 385
 386             $('.toolbar-buttons-container').hide();
 387             $('.toolbar select').change();
 388
 389             $('#simple-view-tab').click();
 390         }
 391     });
 392
 393     $(window).resize(function() {
 394         $('iframe').height($(window).height() - $('#tabs').outerHeight() - $('#source-editor .toolbar').outerHeight());
 395     });
 396
 397     $(window).resize();
 398
 399     $('.vsplitbar').click(function() {
 400         if ($('#sidebar').width() == 0) {
 401             $('#sidebar').width(480).css({right: 0}).show();
 402             $('#source-editor, #simple-editor').css({right: 495});
 403             $('.vsplitbar').css({right: 480}).addClass('active');
 404         } else {
 405             $('#sidebar').width(0).hide();
 406             $('#source-editor, #simple-editor').css({right: 15});
 407             $('.vsplitbar').css({right: 0}).removeClass('active');
 408         }
 409         $(window).resize();
 410     });
 411
 412
 413 });