Jump to content

Mad_Griffith

Members
  • Posts

    146
  • Joined

  • Last visited

Everything posted by Mad_Griffith

  1. I was able to use the destroy('all') method, as indicated here. Setting a method is apparently standard practice among jQuery plugin devs.
  2. Hi, I'd like to extend a jQuery plugin after it has already been instantiated. In some file I cannot change I have: var defaults = { property1: 1, property2: 2 } $('#fullpage').fullpage(defaults); In a separate file I have: var defaultsExtended = { property2: 3 } var settings = $.extend({}, defaults, defaultsExtended); $('#fullpage').fullpage(settings); I was thinking about making the fullpage method NULL and unbinding everything, but how do I find a list of methods and properties that have been bound / added by a particular fullpage.js plugin's instance?
  3. Thank you! Great, I thought that wouldn't work with jquery document.ready().
  4. Ok. How can this be done by editing FILES1 too?
  5. How can I change the second bit to make the second variable override the previous one?
  6. Hi, I am trying to have FILE2.JS override FILE1.JS, but can't find the right syntax to do this (please also note I should first try and modify FILE2.JS only): FILE1.JS $(document).ready(function () { var weare = [ "Young and free" ]; }); FILE2.JS (function (jQuery) { var weare = [ "inspired by music" ]; })(jQuery)
  7. Thank you. Following your advice, I realised I had to apply a more general condition for the 404 error to trigger properly, so this ended up bein the final code: require( 'pages/' . (!in_array($pageName, $pageNames) && $pageName !== 'home'? '404' : ( $uriCount === 1 ? $pageName : ( $uriCount === 3 ? $pageType : '' ) )) . '.php' );
  8. Hi, this would be the final one, but it does not work: $pageChoice = $uriCount === 1 ? $pageName : $uriCount === 3 ? $pageType : '404'; require( 'pages/' . $pageChoice . '.php' ); I managed to have the ternary partially work with this syntax: ( $uriCount === 1 ? $pageName : ( $uriCount === 3 ? $pageType : '404' ) ) I said "partially", because the else clause still does not trigger :\
  9. Hi, I am building a basic routing system and I am now trying to get the ternary operator equivalent of: if( $explodedUriCount === 1 ) { echo $pageName; } else if (explodedUriCount === 3) { echo $pageType; } else { echo '404'; } What would it be? Thank you.
  10. Thanks for your help. In the end I fixed it by passing the event from the click handler to the object method, but I didn't solve the original problem. Basically, when I click on the left or right arrow in the slideshow, there is an animation lasting a few milliseconds. During such animation, if the user clicks a second time on the same button, this ends up destroying the slideshow pretty badly (as in: the last slide, be it on the left or on the right, ends up outside the viewport). How could I make only the first click matter or at least wait until the sliding animation is done?
  11. Thank you! I edited the code but it doesn't work. I consolelogged the event and this is what I get: I have also tried doing the following, unsuccessfully: var that = this; this.sliding = function(e) { // blah blah } element.find('.article-previous, .article-next').off('click').on('click', function(e){ e.stopImmediatePropagation(); that.sliding(); });
  12. Hi, below, I am creating a slider. I am passing the sliding method to the click handler, but such method doesn't fire when I call it. Do you have any idea why? Thank you this.sliding = function(e) { that.slide_width = $(that.article).width(); that.slide_number = $(that.article).size(); that.max_pos = that.slide_width * (that.slide_number - 1); that.left_pos = $(that.inner).position().left; if ($(this).hasClass('article-previous') && that.left_pos < 0) { $(that.inner).css({ 'left': '+=' + that.slide_width + 'px' }); } if ($(this).hasClass('article-next') && -that.left_pos < that.max_pos) { $(that.inner).css({ 'left': '-=' + that.slide_width + 'px' }); that.animateSkills(); } }; element.find('.article-previous, .article-next').off('click').on('click', { slidingAction : this.sliding}, function(e){ e.stopImmediatePropagation; e.data.slidingAction; // doesn't fire! });
  13. Yes, the reference appears to be correct. I found out that commenting out context.save() and context.restore() (like in the code below) allows profileImg to be rotated and translated, but the side effect is that renderBadgeImg(), which renders an overlay image on the profileImg, is also affected - and it shouldn't. var orientation; EXIF.getData(profileImg, function() { orientation = EXIF.getTag(this, "Orientation"); // alert(orientation); }); //context.save(); orientateContext(orientation); (function animationLoop(event) { renderProfileImg(event); //context.restore(); renderBadgeImg(); requestAnimationFrame(animationLoop, profileImg); })()
  14. I took it from here, it should work... https://github.com/blueimp/JavaScript-Load-Image/blob/master/js/load-image-orientation.js
  15. thank you, I could troubleshoot and the orientation number is 6: the picture is rotated 90° to the right. In the code I posted at the beginning of this thread I have now something like the following and it should fix the rotation I reckon, but it doesn't! case 6: // 90° rotate right context.rotate(0.5 * Math.PI); context.translate(0, -canvas.height); break;
  16. I am now using this and at least I manage to alert the ":)". The context is not rotated nor translated, though... function orientateContext(orientation) { switch (orientation) { case 0, undefined && (screen.innerHeight > screen.innerWidth): alert(':)'); context.rotate(0.5 * Math.PI); context.translate(0, -canvas.height); break; ...
  17. Hi! I am using the exif.js library to detect the input image's EXIF, to cope with the mobile devices camera orientations. The trouble I am encountering is that I don't seem to be able to override EXIF case "0", the standard portrait mode for both front and back camera. This is my relevant code: var orientation; EXIF.getData(profileImg, function() { orientation = EXIF.getTag(this, "Orientation") }); context.save(); orientateContext(); (function animationLoop(event) { renderProfileImg(event); context.restore(); renderBadgeImg(); requestAnimationFrame(animationLoop, profileImg); })() ... function orientateContext(orientation) { switch (orientation) { case 2: // horizontal flip context.translate(canvas.width, 0); context.scale(-1, 1); break; case 3: // 180° rotate left context.translate(canvas.width, canvas.height); context.rotate(Math.PI); break; case 4: // vertical flip context.translate(0, canvas.height); context.scale(1, -1); break; case 5: // vertical flip + 90 rotate right context.rotate(0.5 * Math.PI); context.scale(1, -1); break; case 0, 6, 90: // 90° rotate right context.rotate(0.5 * Math.PI); context.translate(0, -canvas.height); break; case 7: // horizontal flip + 90 rotate right context.rotate(0.5 * Math.PI); context.translate(canvas.width -canvas.height); context.scale(-1, 1); break; case 8, -90: // 90° rotate left context.rotate(-0.5 * Math.PI); context.translate(-canvas.width, 0); break; default: break; } }
  18. Thanks. How efficient is the latter?
  19. Thanks a lot! I got it now. Also good to know about the efficiency improvement (it was in fact downloading the picture at every loop iteration... I hope my bill won't be too high at the end of the month ! ). One more thing is that the orientation I am doing also inverts the dragging... is there any native html5 method I can use to prevent such a behaviour or do I have to stick with adding an exception to dragProfileImg() ?
  20. here it is. The processProfileImg() is where I am having the problem at the moment: window.onload = drawCanvas; var canvas = document.getElementById('composition-image'), context = canvas.getContext('2d'), distanceFromRightSide = 990, distanceFromBottomSide = 520, startX = 0, startY = 0, drag = false, sliderPrevPos = parseInt($('#zoom input[type="range"]').attr('value')), zoomSpeed = 3.5; function drawCanvas() { canvasImg = new Image(); canvas.width = 1200; canvas.height = 900; canvasImg.onload = function() { context.drawImage(canvasImg, 0, 0); } canvasImg.src = './img/bg.jpg'; mouseActions(); fileIsUploaded(); } function fileIsUploaded() { $('input[type="file"]').change(function() { files = this.files[0]; openUploadedFile(files); }); } function openUploadedFile(file) { try { var openedFile = new FileReader(); openedFile.readAsDataURL(file); openedFile.onload = processProfileImg; } catch (error) { // Fail silently if user cancels the 'Browse' window } } function processProfileImg(event) { profileImg = new Image(); profileImg.src = event.target.result; profileImg.onload = function() { setAspectRatio(); profileImgX = canvas.width - distanceFromRightSide - ((profileImg.width - 183) / 2), profileImgY = canvas.height - distanceFromBottomSide - ((profileImg.height - 242) / 2); EXIF.getData(profileImg, function() { orientateProfileImg(); }); (function animationLoop(event) { save.context(); renderProfileImg(event); requestAnimationFrame(animationLoop, profileImg); drawOverlay(); })() hideDefaultProfileImg(); } enableZoomSlider(); drawProfileImgBoundaries(); resetZoom(); } function drawOverlay() { overlayImg = new Image(); overlayImg.src = './img/profile_default_red_frame.png'; context.drawImage(overlayImg, canvas.width - distanceFromRightSide, canvas.height - distanceFromBottomSide, 183, 242); } function drawProfileImgBoundaries() { context.rect(canvas.width - distanceFromRightSide, canvas.height - distanceFromBottomSide, 183, 242); context.clip(); } function renderProfileImg(event) { context.clearRect(210, 380, 183, 242); var leftBoundary = 210, rightBoundary = 393, topBoundary = 380, bottomBoundary = 622, left = profileImgX, right = profileImgX + profileImg.width, top = profileImgY, bottom = profileImgY + profileImg.height; dragProfileImg(left, right, top, bottom, leftBoundary, rightBoundary, topBoundary, bottomBoundary); zoomProfileImg(leftBoundary, rightBoundary, topBoundary, bottomBoundary); context.drawImage(profileImg, profileImgX, profileImgY, profileImg.width, profileImg.height); } /** * Clicks **/ function mouseActions() { mouseX = 0, mouseY = 0, mousePressed = false; dragging = false; canvas.onmousemove = function(e) { mouseX = e.offsetX; mouseY = e.offsetY; } $(document).mousedown(function() { mousePressed = true; }).mouseup(function() { mousePressed = false; dragging = false; }); $('#profile-blue').click( function() { $('#panel1').css({ 'display': 'block' }); } ); $('#continue-button').click( function() { $('#panel1').css({ 'display': 'none' }); $('#panel2').css({ 'display': 'block' }); } ); $('#back-button').click( function() { $('#panel2').css({ 'display': 'none' }); } ); $('#facebook').click(function() { canvasToData(); formData.append('message', $('input[type="file"]')[0].files.length !== 0 ? 'I’ve joined team remain for the EU Referendum. Which side are you on? http://www.euwhichsideareyouon.com' : 'It’s time to decide which side are you on for the EU Referendum. Choose you team here: http://www.euwhichsideareyouon.com'); FB.login(function(response) { var auth = response.authResponse; $.ajax({ url: 'https://graph.facebook.com/' + auth.userID + '/photos?access_token=' + auth.accessToken, type: 'POST', data: formData, processData: false, contentType: false, cache: false, beforeSend: function(formData) { $('#facebook').addClass('facebook-beforesend'); }, complete: function() { $('#facebook').removeClass('facebook-beforesend'); $('#facebook').addClass('facebook-success'); setTimeout( function() { $('#facebook').removeClass('facebook-success'); }, 3000); } }); }, { scope: 'publish_actions' }); }); $('#twitter').click(function() { canvasToData(); formData.append('message', $('input[type="file"]')[0].files.length !== 0 ? 'photo' : 'nophoto'); $.ajax({ url: './twitter/tweet-with-media.php', type: 'POST', data: formData, processData: false, contentType: false, cache: false, beforeSend: function() { $('#twitter').addClass('twitter-beforesend'); } }).then(function(data) { window.open(data); // authorisation URL }).done(function() { $('#twitter').removeClass('twitter-beforesend'); $('#twitter').addClass('twitter-success'); setTimeout( function() { $('#twitter').removeClass('twitter-success'); }, 3000); }); }); function facebook() { window.fbAsyncInit = function() { FB.init({ appId: '1851476801746058', xfbml: true, version: 'v2.5' }); }; (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) { return; } js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); } facebook(); } /** * Helpers **/ function resetZoom() { sliderPrevPos = $('#zoom input[type="range"]')[0].defaultValue; $('#zoom input[type="range"]')[0].value = $('#zoom input[type="range"]')[0].defaultValue; } function zoomProfileImg(leftBoundary, rightBoundary, topBoundary, bottomBoundary) { $('#zoom input[type="range"]').change(function() { var sliderCurrPos = parseInt(this.value), zoomDelta = parseInt(Math.abs(sliderCurrPos - sliderPrevPos) * zoomSpeed); if (sliderCurrPos > sliderPrevPos) { profileImg.width += zoomDelta; profileImg.height += zoomDelta; } else if (sliderCurrPos < sliderPrevPos) { profileImg.width -= zoomDelta; profileImg.height -= zoomDelta; } sliderPrevPos = sliderCurrPos; }); } function orientateProfileImg() { orientation = EXIF.getTag(this, "Orientation"); switch (orientation) { case 0: // 90° rotate left context.translate(canvas.width / 2 + 183, canvas.height / 2 - 242); context.rotate(90 * (Math.PI / 180)); break; case 2: // horizontal flip context.scale(-1, 1); break; case 3: // 180° rotate left context.rotate(Math.PI); break; case 4, -90: // vertical flip context.translate(0, 1000); context.scale(1, -1); break; case 5: // vertical flip + 90 rotate right context.translate(0, 1000); context.rotate(-90 * (Math.PI / 180)); context.scale(1, -1); break; case 6: // 90° rotate right context.rotate(-90 * (Math.PI / 180)); break; case 7: // horizontal flip + 90 rotate right context.rotate(-90 * (Math.PI / 180)); context.scale(-1, 1); break; case 8, 90: // 90° rotate left context.translate(canvas.width / 2 + 183, canvas.height / 2 - 242); context.rotate(90 * (Math.PI / 180)); break; default: // vertical flip context.translate(0, 1000); context.scale(1, -1); break; } } function setAspectRatio() { profileImg.width = profileImg.naturalWidth; profileImg.height = profileImg.naturalHeight; if (profileImg.width > profileImg.height) { profileImg.width = 242 * profileImg.width / profileImg.height; profileImg.height = 242; } else if (profileImg.width < profileImg.height) { profileImg.height = 183 * profileImg.height / profileImg.width; profileImg.width = 183; } else if (profileImg.height == profileImg.width) { profileImg.width = 242; profileImg.height = 242; } } function dragProfileImg(left, right, top, bottom, leftBoundary, rightBoundary, topBoundary, bottomBoundary) { if (mouseX < rightBoundary && mouseX > leftBoundary && mouseY < bottomBoundary && mouseY > topBoundary) { canvas.style.cursor = 'move'; } else { canvas.style.cursor = 'default'; drag = false; } if (mousePressed) { if (!drag) { startX = mouseX - profileImgX; startY = mouseY - profileImgY; } if (mouseX < right && mouseX > left && mouseY < bottom && mouseY > top) { if (!dragging) { dragging = true; drag = true; } } } else { drag = false; } if (drag) { profileImgX = mouseX - startX; profileImgY = mouseY - startY; } if (profileImgX > leftBoundary) { profileImgX = leftBoundary; } if ((profileImgX + profileImg.width) < rightBoundary) { profileImgX = rightBoundary - profileImg.width; } if (profileImgY > topBoundary) { profileImgY = topBoundary; } if ((profileImgY + profileImg.height) < bottomBoundary) { profileImgY = bottomBoundary - profileImg.height; } } function hideDefaultProfileImg() { $('#profile-red').fadeOut('fast'); } function enableZoomSlider() { $('#zoom input[type="range"]').prop("disabled", false); } function canvasToData() { canvasDataUrl = canvas.toDataURL("image/jpeg"), canvasBlob = dataURItoBlob(canvasDataUrl); formData = new FormData(); formData.append("canvasToData", canvasBlob); } function dataURItoBlob(dataURI) { var byteString = atob(dataURI.split(',')[1]), mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0], ab = new ArrayBuffer(byteString.length), ia = new Uint8Array(ab); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } var bb = new Blob([ab], { "type": mimeString }); return bb; }
  21. I am using two different ways for scaling. In the orientation(), I am using the scale() method as a means to actually flip the picture horizontally/vertically, whereas in the zoom() I am increasing the image object width and height.
  22. The scaling in my case would to be done only once, when the image is loaded, because the image size is then manipulated again (the user can zoom in and out).
  23. Hi guys, I have a question concerning saving and restoring the canvas after scaling. This is the scenario: Photo is loaded Context is scaled Animation Loop Photo is drawn Overlay Image is drawn RequestAnimationFrame Where should I put context.save() and context.restore() to prevent the scaling from affecting the Overlay Image? I tried a few solutions but to no avail. Thanks!
×
×
  • Create New...