Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. dirtyred57890
    D
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    dirtyred57890

    @dirtyred57890

    0
    Reputation
    4
    Posts
    611
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    dirtyred57890 Follow

    Posts made by dirtyred57890

    • Using Onsen in Production with Angular 1 and Cordova
      myApp.config(['$compileProvider', function ($compileProvider) {
        $compileProvider.debugInfoEnabled(false);
      }]);
      

      that breaks onsen and is recommended for production angular - guess im SOL there.

      Also, what files do i need to include in my compiled cordova project?

      0_1521658881272_Screen Shot 2018-03-21 at 12.00.43 PM.png

      would it be safe to simply drop all un minified files? Im not sure i use any of the font awesome stuff - but i did use a couple ionicons

      Also - what JS files are required? here are my current includes in index.html

      <link rel="stylesheet" href="lib/onsenui/css/onsenui.min.css"/>
      <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.min.css"/>
      <script src="lib/onsenui/js/onsenui.min.js"></script>
      <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
      

      the app works great so is it safe to simply drop all files from production build that i didn’t explicitly include?

      posted in Onsen UI
      D
      dirtyred57890
    • RE: Custom Drop Animation for Onsen 2.5.1 for Angular 1.X

      That works like a charm! Thank you very much - glad to see ONSEN is still kicking butt. Cheers

      posted in Onsen UI
      D
      dirtyred57890
    • RE: Custom Drop Animation for Onsen 2.5.1 for Angular 1.X

      thanks for the reply - following the docs i got the animation to successfully drop when PUSHING a page - but i am not successful to get the page to LIFT back up from whence it came on a POP event.

      on a POP event the page simply disappears instantly.

      Here is my code so far - any guidance would be greatly appreciated.

      var dropAnimator = function(options) {
        options = options || {};
      
        this.timing = options.timing || 'ease';
        this.duration = options.duration || 0.4;
        this.delay = options.delay || 0;
      
        var div = document.createElement('div');
        div.innerHTML = '<div style="position: absolute; width: 100%; height: 100%; z-index: 2; background-color: black; opacity: 0;"></div>';
        this.backgroundMask = div.firstChild;
        this.blackMaskOpacity = 0.4;
      };
      
      dropAnimator.prototype = Object.create(ons.NavigatorElement.NavigatorTransitionAnimator.prototype);
      
      dropAnimator.prototype.push = function(enterPage, leavePage, done) {
          this.backgroundMask.remove();
          leavePage.parentNode.insertBefore(this.backgroundMask, leavePage);
      
          const maskClear = ons.animit(this.backgroundMask)
            .wait(this.delay + this.duration)
            .queue(done => {
              this.backgroundMask.remove();
              done();
            });
      
          ons.animit.runAll(
              maskClear,
              ons.animit(enterPage)
                .saveStyle()
                .queue({
                  css: {
                    transform: 'translate3D(0px, -100%, 0px)',
                    opacity: 0.9
                  },
                  duration: 0
                })
                .wait(this.delay)
                .queue({
                  css: {
                    transform: 'translate3D(0px, 0px, 0px)',
                    opacity: 1.0
                  },
                  duration: this.duration,
                  timing: this.timing
                })
                .restoreStyle(),
              done()
      
          );
      };
      
      dropAnimator.prototype.pop = function(enterPage, leavePage, done) {
          this.backgroundMask.remove();
          enterPage.parentNode.insertBefore(this.backgroundMask, enterPage);
      
          ons.animit.runAll(
              ons.animit(leavePage)
                .queue({
                  css: {
                    transform: 'translate3D(0px, 0px, 0px)'
                  },
                  duration: 0
                })
                .wait(this.delay)
                .queue({
                  css: {
                    transform: 'translate3D(0px, -100%, 0px)'
                  },
                  duration: this.duration,
                  timing: this.timing
                }),
              done()
          );
      };
      
      // register animation name
      ons.NavigatorElement.registerAnimator('drop', dropAnimator);
      
      posted in Onsen UI
      D
      dirtyred57890
    • Custom Drop Animation for Onsen 2.5.1 for Angular 1.X

      Id like an animation for the Navigator that is the opposite of Lift… so a DROP animation.

      Re: Custom Navigation Animation (fall/drop)

      i got the previous example to work when Onsen was pre 2.0 release…

      Now I’m stuck again. I have no idea how to register the new animation so it can be used with the Navigator.

      i found this aberrant CODEPEN that shows how to register a name for an animation - but the resulting animation is always a SLIDE regardless of what i change the animators too.

      angular.module('onsen').run(function(NavigatorView, SimpleSlideTransitionAnimator) {
        NavigatorView.registerTransitionAnimator('foo', new SimpleSlideTransitionAnimator())
      });
      

      i have my previous animation code ready - i just need a way to hook into onsen’s navigator for use.

      Please help!
      Thank you
      Dan

      posted in Onsen UI
      D
      dirtyred57890