How to disappear sidemenu without button in swift 4

2018-04-17 06:03 chen imported from Stackoverflow

I have some question. i made side menu in swift4.

when i clicked button, side menu appear and disappear.

but i want make disappear side menu without button.

for example, when i clicked another view (not side menu), disappear sidemenu.

my code like this.

class ContainerVC: UIViewController {

@IBOutlet weak var constaint: NSLayoutConstraint!
var sideMenuOpen = false

override func viewDidLoad() {
    super.viewDidLoad()

    NotificationCenter.default.addObserver(self,  selector: #selector(toggleSideMenu), name: NSNotification.Name("ToggleSideMenu"), object: nil)
}

@objc func toggleSideMenu(){

    if sideMenuOpen {

        sideMenuOpen = false
        constaint.constant = -130

    }else {
        sideMenuOpen = true
        constaint.constant = 0

    }
    UIView.animate(withDuration: 0.3){
        self.view.layoutIfNeeded()
    }
}

enter image description here

when i click white background (view) , disappear side menu. Thanks.

1 answer

answered 2018-04-17 06:21 aBilal17

You can use code something like that, please add following code in viewDidLoad()

let tap = UITapGestureRecognizer(target: self, action: #selector(dismiss(fromGesture:)))
    self.view.addGestureRecognizer(tap)

Then create a function for dismiss

@objc func OpenSideMenu(){
    sideMenuOpen = true
    constaint.constant = 0
    UIView.animate(withDuration: 0.3){
        self.view.layoutIfNeeded()
    }
}

@objc func closeSideMenu(){
    sideMenuOpen = false
    constaint.constant = -130
    UIView.animate(withDuration: 0.3){
        self.view.layoutIfNeeded()
    }
}

@objc func dismiss(fromGesture gesture: UISwipeGestureRecognizer) {
    closeSideMenu()
}

Hope this will work.

See also questions close to this topic

How to bound UITableView Header and also want to show or hide tableview cells by clicking tableview header programatically in swift

I want to add a view in tableView header. I already tried by different ways but achieved the goal. My code is given below for adding a view in headerView.

func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    return arrSupport[section]
}

func tableView(_ tableView: UITableView, willDisplayHeaderView view:UIView, forSection: Int) {
    if let tableViewHeaderFooterView = view as? UITableViewHeaderFooterView {
        tableViewHeaderFooterView.textLabel?.textColor = UIColor.white
        tableViewHeaderFooterView.textLabel?.font = UIFont.systemFont(ofSize: 16, weight: .medium)
        tableViewHeaderFooterView.contentView.backgroundColor = UIColor(red: 39.0 / 255.0, green: 41.0 / 255.0, blue: 53.0 / 255.0, alpha: 1.0)
        let headerView = UIView()
        headerView.frame = CGRect(x: tblSupport.frame.origin.x-10, y: 10, width: tblSupport.frame.size.width-20, height: 60)
        tableViewHeaderFooterView.contentView.frame = CGRect(x: 10, y: 0, width: tableView.frame.size.width-20, height: 50)
        headerView.addSubview(tableViewHeaderFooterView)
    }
}

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {

    let headerView = UIView()
    headerView.frame = CGRect(x: tblSupport.frame.origin.x-10, y: 10, width: tblSupport.frame.size.width-20, height: 60)
    headerView.backgroundColor = UIColor(red: 39.0 / 255.0, green: 41.0 / 255.0, blue: 53.0 / 255.0, alpha: 1.0)
    return headerView
}`

And also I want to show or hide tableview cells by clicking on respective headerview also need to decrease width of headerview like desire status

Current Status:

Desired Status:

How to use multiple spacing in single UILabel
I have an array of strings, I make a string from the array objects
```
let stringForLabel = arrayContaingStrings.joined(separator: "\n")
```
But when I show this it in a single UILabel, it is hard to read as below

The 6th and 7th lines in the above label are a single line as
```
 Nowy Dwor Mazowiecki, Poland
```
But due to screen width is shown in 2 lines. So I would display it in the following format

How can I achieve this spacing in UIlabel? I have tried increasing line spacing in storyboard but then it increases all line spacing in the label. (The content in both images are different, I just wanted to show the line spacing in both cases)
iOS Webview input box change to emoji keyboard app crash

I am working with my web team, and I provide a webview to calling there web page. Inside the webpage there are some input box to fill-in information with user. When user change the keyboard to emoji. The app crash with

Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[NSTaggedPointerString count]: unrecognized selector sent to instance 0xa00000000006e652'

How can I fix it on my side or any suggestion to my web team?

NSButton not callable after CATransform3DMakeTranslation

I have a strange issue never seen on iOS but present on macOS Swift development.

I have a NSButton which is added with an addSubview method to a custom NSView. The button has a target function. It is impossible to click on this button when it's added to the customView. If I add it to the global "view" works fine directly.

Any idea why this could be?

//Infos View
self.infosView.wantsLayer = true
self.infosView.layer?.backgroundColor = NSColor.darkGray.cgColor

self.view.addSubview(self.infosView)

 //TestButton
let myButtonRect = CGRect(x: 100, y: 100, width: 200, height: 200)
self.testButton = NSButton.init(frame: myButtonRect)

// !!!!
// this line doesn't work
// !!!!
self.infosView.addSubview(testButton)

// !!!!
// but this line works fine
// !!!!
self.view.addSubview(testButton)

self.testButton.target = self
self.testButton.action = #selector(ViewController.printSomething)

Update : The testButton is not clickable after a CATransform

self.infosView.layer?.transform = CATransform3DMakeTranslation(500, 0, 0)

Doesn't work after this..

Calling a func of GameViewController from GameScene

I want to call a func of GameViewController from the GameScene. -> If the game Ends I want to call GameViewController().GameOver()

I tried now a lot of different things like this one: LINK (I tried every answer more than once, still not working)

But doesn't matter what I tried it doesn't even call the func.

Hope anyone can help me with this.

CODE: GameViewController:

class GameViewController: UIViewController {

    @IBOutlet weak var Button: UIButton!

    override func viewDidLoad() {
    super.viewDidLoad()
        if let view = self.view as! SKView? {
        // Load the SKScene from 'GameScene.sks'
        if let scene = GameScene(fileNamed: "GameScene") {
            // Set the scale mode to scale to fit the window
                if UIDevice().userInterfaceIdiom == .phone {
                    scene.scaleMode = .aspectFill
                }else{
                    scene.scaleMode = .aspectFit
                }


            // Present the scene
            view.presentScene(scene)

            skView = view



        }

        view.ignoresSiblingOrder = true

        view.showsFPS = false
        view.showsNodeCount = false


    }

     ... 
    @IBAction func Button(_ sender: Any) {

    animation()



         if let gameScene = skView.scene as? GameScene { // check to see if the current scene is the game scene
             gameScene.start()
         }
    }

func animation(){
    UIButton.animate(withDuration: 1, animations: {
        self.Button?.alpha = 0
    })
}

    func GameOver(){
        UIButton.animate(withDuration: 1, animations: {
            self.Button?.alpha = 1
        })
    }
}

GameScene:

class GameScene: SKScene, SKPhysicsContactDelegate {

   ...

   func torpedoDidCollideWithAlien (torpedoNode:SKSpriteNode, alienNode:SKSpriteNode) {

     GameViewController().GameOver()
     removeAllActions()
     removeAllChildren()

  }
}

Error "unrecognized selector sent to instance" when trying to use UserDefaults

I am trying to store a custom object into UserDefaults using this method mentioned in another answer.

 var userDefaults = UserDefaults.standard
 let encodedData: Data = NSKeyedArchiver.archivedData(withRootObject: categories[indexPath.row])
 userDefaults.set(encodedData, forKey: "selectedCategory")
 userDefaults.synchronize()

and am retrieving them like this

if let category = UserDefaults.standard.value(forKey: "selectedCategory") as? Data {
    self.categoryDisplayed = NSKeyedUnarchiver.unarchiveObject(with: category) as! Category
    tableView.reloadData()
}

however, in doing this I am arriving at an error of "unrecognised selector sent to instance". Can someone please tell me where I am going wrong?

iOS how to start a viewcontroller from framework
I have created my private framework successfully. It has no error. I have created a project now I want a simple thing but I do not have clue. Following is what I want

I want to start the Framework view controller. You can think it is the whole app. I want to start its first view controller. and then the app flow is as per business logic. I want to exit app when user exit the Framework main view controller. Actually it was the complete app but I decided to make it framework for different clients because only small modifications are needed for different clients but I do not know how it should be done.

here is how I am trying to start first view controller in my Client project but it does not recognize that controller.
```
 @IBAction func onClickBtnStartOver(_ sender: Any)
 {
     let storyBoard : UIStoryboard = UIStoryboard(name: "Storyboard", bundle:nil)            
     let nextViewController = storyBoard.instantiateViewControllerWithIdentifier("idFrameworkVC") as FwViewController
     self.presentViewController(nextViewController, animated:true, completion:nil)
 }
```
It gives me error like "Use of undeclared type 'FwViewController'"

So what should I do to start the first viewcontroller of framework.

Note: I have viewcontrollers in one Storyboard namely Storyboard inside Framework

TypeError: Cannot read property '$parent' of undefined

angular-material-sidemenu version: 1.0.5

I am using gulp to build and serve my web app. When I am using gulp-serve the project is starting from my root/src/main/ folder and angular-material-sidemenu is working properly.

but when I do gulp-build, a build is getting generated and saved in root/build/www and angular-material-sidemenu is getting compressed and saved in vendor.js file.

<md-sidemenu-group>
  <md-sidemenu-button ui-sref="journal">
      <md-icon md-svg-src="content/images/PL_Services.svg">book</md-icon>
      <span data-translate="sidebar.menu.journal">journal</span>
  </md-sidemenu-button>
</md-sidemenu-group>

This is working correctly and journal state is loaded, but

<md-sidemenu-group>
    <md-sidemenu-content collapse-other="true"
            md-svg-icon="content/images/PL_Contacts.svg"
            md-heading="{{'sidebar.menu.contacts.title'|translate}}"
            md-arrow="true">
      <md-sidemenu-button ui-sref="contacts">
        <md-icon class="ng-binding ng-scope material-icons" role="img">
            person
        </md-icon>
        <span data-translate="sidebar.menu.contacts.view">View</span>
      </md-sidemenu-button>

      <md-sidemenu-button ui-sref="trustContact">
        <md-icon class="ng-binding ng-scope material-icons" role="img">person_add</md-icon>
        <span data-translate="sidebar.menu.contacts.new">
            Add
        </span>
      </md-sidemenu-button>
    </md-sidemenu-content>
  </md-sidemenu-group>

this is not expanding and showing the two buttons inside the md-sidemenu-content.

It's throwing error TypeError: Cannot read property '$parent' of undefined.

bootstrap 3 side menu

I have a pretty awesome navigation made in bootstrap three. I want have that navigation appear but underneath the navigation on only one page I would like to display a side menu on the far left side of the page. When the page goes down to a small break point I would like that side menu to disappear and have a toggle button to activate this. Again underneath the original navigation as it will only display on one page and wont be put in the header file. Any ideas on how to accomplish such a thing. I have tried using collapse but it doesn't give the desired effect. heres the original navigation. Header.php

<?php ob_start(); session_start();
if (isset($_SESSION['activated'])) {
    $activated = $_SESSION['activated'];
  }
  if (isset($_SESSION['success']) and $_SESSION['success'] == true) {
    $success=true;
  }
  else {
    $success=false;
  }

?>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
       <!--vuejs-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <link href="https://fonts.googleapis.com/css?family=Raleway:400,700,800" rel="stylesheet">
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
          <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="custom.js"></script>
    <link rel="stylesheet" href="custom.css">
    </head>
    <body>
        <div id="logInApp" v-cloak>
        <nav class="navbar navbar-fixed-top">
        <div class="container">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
             <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
             </button>
             <a class="navbar-brand" href="index.php"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 171 171" style="enable-background:new 0 0 171 171;" xml:space="preserve">
                    <path class="st0" d="M153.4,91l-30.2,8c-4.2,11.5-13.5,20.6-26.1,24.1c-20.7,5.7-42.2-6.5-48-27.2c-5.7-20.7,6.5-42.2,27.2-48
                        c15.9-4.4,32.5,0.9,41.9,15.1l-19.5,5.3c-3.4-2.4-7.6-3.8-12-3.8c-11.6,0-20.9,9.4-20.9,20.9s9.4,20.9,20.9,20.9
                        c8.5,0,15.8-5.1,19.1-12.3L153.5,81l0.7,0l11.4-6.7L163,62.6l-13.1-1.3l-4.3-9.1l7.3-11l-7.4-9.4l-12.4,4.5l-7.9-6.4l1.8-13.1
                        l-10.7-5.2l-9.2,9.5l-9.8-2.3l-4-12.6L81.3,6.1l-4.2,12.5l-9.9,2.2l-9.1-9.6l-10.8,5.1L49,29.4l-7.9,6.2L28.7,31l-5.2,6.4l-2.3,2.9
                        v0l7.2,11.1l-0.9,1.8l-3.6,7.3l-13.2,1.1L8,73.1L19.3,80l-0.1,10.1L7.9,96.9l2.6,11.6l13.1,1.3l4.3,9.1l-7.3,11v0l3.7,4.7l3.7,4.7
                        l12.4-4.5l0.2,0.1l0,0l5.8,4.7l1.9,1.5l-1.8,13.1l10.7,5.2l9.2-9.5l9.8,2.3l4,12.6l11.9,0.1l4.2-12.5l9.9-2.2l9.1,9.6l10.8-5.1
                        l-1.6-13.1l7.9-6.2l12.4,4.7l7.5-9.3l-7.2-11.1l4.4-9.1l13.2-1.1l2.7-11.6L154.1,91L153.4,91z"/>
                    <text transform="matrix(1 0 0 1 145.3561 17.4842)">TM</text>
                </svg>
     <span class="logo-text">CreativeEngine</span></a>
            </div><!--end .navbar-header-->
            <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li v-show="admin==true"><a href="adminMenu.php">Admin</a></li>
                <li><a href="#">Subscriptions</a></li>
                <li><a href="#">Templates</a></li>
                <li><a href="#">Stock</a></li>
                <li v-show="sesloggedin==true"><a href="#">Profile</a></li>
                <li v-show="sesloggedin==false"><a href="#" data-toggle="modal" data-target="#loginModal">Login</a></li>
                <li v-show="sesloggedin==true"><a href="logout.php">Logout</a></li>
                <li><a href="signup.php">Signup</a></li>
                </ul>
            </div><!--end #navbar-->
         </div><!--end container-->
        </nav>
     <div class="container">
      <div id="loginModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
            <!--modal header-->
                <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">X</button>
                <h2 class="modal-title">Login</h2><!--end modal-title-->
                </div>
                <!--end modal-header-->
                <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <label for="username">Username/Email</label>
                        <input v-on:click="error=false; loginSub=false;" v-model="userName" type="text" class="form-control" placeholder="Username/Email" id="username" name="userName" v-on:keyup.enter="submit">
                        <a href="#">Forgot Username</a>
                    </div><!--end username-->
                    <div class="form-group">
                        <label for="password">Password</label>
                    <input v-on:click="error=false; loginSub=false;" v-model="password" type="password"  v-on:keyup.enter="submit" class="form-control" placeholder="Password" name="password" id="password">
                        <a href="#">Forgot Password</a>
                    </div><!--end password-->

                    </form>
                 <div v-show="error==true || userName.length<=7 && loginSub==true || password.length<=7 && loginSub==true"><small class="error">Username/Email or password was incorrect...Try again</small>
                    </div><!--end incorrect password message-->
                </div><!--end modal-body-->
                <div class="modal-footer">
                <button type="button" v-on:click="submit" class="btn btn-primary btn-block">Login</button>
                </div><!--end modal-footer-->
            </div><!--end modal-content-->
            </div><!--End modal-dialog-->
        </div><!-- End #loginModal -->

          <div class="modal fade" id="notActivatedModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
            <a href="logout.php" role="button" class="close" data-dismiss="modal">X</a>
          <h2 class="modal-title">Please Activate your account</h2>
        </div>
        <div class="modal-body">
          <p>Please check your email and click on the activation link before signing in.</p>
        </div>
        <div class="modal-footer">
          <a href="logout.php" role="button" class="btn btn-primary btn-block">Ok</a>     
          </div><!--end .modal-footer-->
        </div><!--end .modal-header-->
        </div><!--end modal-dialog-->
         </div><!-- end #notActivatedModal-->
        </div><!-- End .container-->
    </div><!-- End #loginApp-->

    <?php //Make the activation modal work so that they cant click off of it and forces them to activate their account.   
    if (isset($activated) && $activated == 0) {
      echo "<script>
      $('#notActivatedModal').modal('show');
      $('#notActivatedModal').modal({backdrop: 'static', keyboard: false});</script>";
  }
?>
        <script>
  var app = new Vue({
    el: '#logInApp',
    data: {
      userName: '',
      password: '',
      success: '<?php echo $success;?>',
      error: '',
      loginSub: '',
      response: [],
      sesusername: '<?php if (isset($_SESSION['username'])) {echo $_SESSION['username'];}?>',
      sesemail: '<?php if (isset($_SESSION['email'])) { echo $_SESSION['email'];}?>',
      sesloggedin: '<?php if (isset($_SESSION['loggedin'])) {echo $_SESSION['loggedin'];}?>',
      sesfirstname: '<?php if (isset($_SESSION['firstname'])) {echo $_SESSION['firstname'];}?>',
      seslastname: '<?php if (isset($_SESSION['lastname'])) {echo $_SESSION['lastname'];}?>',
      sesphone: '<?php if (isset($_SESSION['phonenumber'])) {echo $_SESSION['phonenumber'];}?>',
      sescompanyname: '<?php  if (isset($_SESSION['companyname'])) {echo $_SESSION['companyname'];}?>',
      admin: '<?php if (isset($_SESSION['admin'])) {echo $_SESSION['admin'];}?>'
    },
    created: function() {
      this.loginSub = false;
    },
    methods: {
      submit: function() {
        this.loginSub = true;
        if (this.userName.length >= 8 && this.password.length >= 8) {
          var jsonString = JSON.stringify({
            userName: this.userName,
            password: this.password
          });
          $.ajax({
            url: "login.php",
            method: "POST",
            dataType: "JSON",
            data: jsonString,
            success: function(data) {
              var vueapp = this;
              vueapp.response = data;
              vueapp.error = data.error;
              if(this.error==false){
                  $('#loginModal').hide();
              }
              if(data.success==true){location.reload();}
              console.log(data);
            }.bind(this)
          });
        }
      }
    }
  });
</script>

heres the page I want the side nav to be on: templates.php

    <style>
        .categoryButtonSelected{background-color: #1c71b9 !important; color: white !important;}
        .headertitle{text-align: center; margin: 0; padding: 0;}
    </style>
    <?php
    require_once('database.php');

    if ($result = $mysqli->query("SELECT t.*, GROUP_CONCAT(c.category) categories, GROUP_CONCAT(k.keyword) keywords FROM dataclayTemplates t LEFT JOIN dataclayCategoryLink cl JOIN dataclayCategories c ON cl.categoryId=c.id ON t.id=cl.templateId LEFT JOIN dataclayKeywordLink kl JOIN dataclayKeywords k ON kl.keywordId=k.id ON t.id=kl.templateId GROUP BY t.id"))
    {
      while($row = $result->fetch_array(MYSQL_ASSOC)) {
        if($row["categories"] == null) {
          $row["categoryArray"] = [];
        } else {
          $row["categoryArray"] = array_unique(explode(",",$row["categories"]));
        }
        unset($row["categories"]);
        if($row["keywords"] == null) {
          $row["keywordArray"] = [];
        } else {
          $row["keywordArray"] = array_unique(explode(",",$row["keywords"]));
        }
        unset($row["keywords"]);
        $templateArray[] = $row;
      }
    }

    $result->close();

    $categoryArray = array();

    if ($result = $mysqli->query("SELECT category FROM creative_engine.dataclayCategories;"))
    {
      while($row = $result->fetch_array(MYSQL_ASSOC)) {
        array_push($categoryArray, $row['category']);
      }
    }

    $result->close();

    $keywordArray = array();

    if ($result = $mysqli->query("SELECT keyword FROM creative_engine.dataclayKeywords;"))
    {
      while($row = $result->fetch_array(MYSQL_ASSOC)) {
        array_push($keywordArray, $row['keyword']);
      }
    }

    $result->close();

    $mysqli->close();

    include('header.php');

    ?>
    <div class="container content">
        <div class="row">
        <button class="btn btn-primary pull-left" data-toggle="collapse" data-target="#templateMenu">Template Menu</button>
        </div>
    </div>
      <div v-cloak id="templates" class="container">

          <div class="col-md-3" id="templateMenu">
              <form role="form">
          <div class="form-group">
              <label for="searchBar">Search</label>
               <input v-model="searchquery" type="text" placeholder="Search Tempates" id="searchBar" autocomplete="off" class="form-control">
              </div>
              <div class="form-group">
              <label id="">Sort By</label>
                   <select v-model="sortBy" class="form-control">
              <option value="renderTime">Render Time</option>
              <option value="az">A-Z</option>
              <option value="dateAdded">Newest</option>
            </select>
              </div>
                  <div class="form-group">
                  <h5>Categories</h5>
                      <div v-for="category in categories" :id="category + 'Button'" v-on:click.prevent="selectCategory(category)" class="btn btn-default categoryButton">
              {{category}}
            </div>
                  </div>
                  <div class="form-group">
                      <h5>Keywords</h5>
                       <div v-for="keyword in keywords" :id="keyword + 'Button'" v-on:click.prevent="selectKeyword(keyword)" class="btn btn-default categoryButton">
              {{keyword}}
            </div>
                  </div>
              </form>
          </div>
  <div class="col-md-9">
 <div class="row"><h1 class="headertitle">Creative Engine Templates</h1></div>
      <div class="row">
      <div v-cloak v-bind:key="template.itemId + '_' + index" v-for="(template, index) in searchResults" class="col-md-4">
        <div class="card">
            <div class="card-body">
                          <video muted :src="'CreativeEngine/'+template.itemId+'/'+template.thumbName+'.mp4'" controls preload="none" controlsList="nodownload nofullscreen" :poster="'CreativeEngine/'+template.itemId+'/'+template.thumbName+'.jpg'" loop="loop"></video>
                <div class="card-title">{{template.itemName}}</div><!--end card-title-->
                <div v-show="displaycount==0" class="card-text">Please create a display to customize</div><!--end user has no display card-text-->
                <div v-show="displaycount>0" class="card-text">Custom Text, Custom Colors, Upload Logo</div><!--end user has display card text-->
                <div class="card-text">{{template.renderTime}} minutes</div>
                <a href="#" v-show="loggedin==1 && displaycount>0" class="btn btn-primary btn-block">Customize</a><!--logged in and has display button-->
                <a href="#" v-show="loggedin==0" class="btn btn-primary btn-block" disabled>Customize</a><!--not logged in button-->
                 <a href="getCustomer.php?showAddDisplayForm=1" v-show="loggedin==1 && displaycount==0" class="btn btn-primary btn-block">Create A Display</a>
            </div><!--end card-body-->
        </div><!--end card-->
      </div><!-- end col-md-4-->
      </div><!--end row-->
  </div><!--end col-lg-9-->
</div><!--end templates app-->
<script>
var app = new Vue({
  el: '#templates',
  data: {
    loggedin:'',
    displaycount:'<?php if(isset($_SESSION['displaycount'])){echo $_SESSION['displaycount'];} else{echo 0;}?>',
    searchquery:'',
    templateArray: <?php echo json_encode($templateArray); ?>,
    filteredTemplateArray: <?php echo json_encode($templateArray); ?>,
    categories: <?php echo json_encode($categoryArray); ?>,
    selectedCategories: [],
    keywords: <?php echo json_encode($keywordArray); ?>,
    selectedKeywords: [],
    sortBy: ''
  },
  computed: {
      searchResults: function(){
          return this.filteredTemplateArray.filter((template)=>{
            return template.itemName.toLowerCase().includes(this.searchquery.toLowerCase());
          })
      }
  },
  created: function() {
    this.loggedin=<?php if(isset($_SESSION['loggedin'])){echo $_SESSION['loggedin'];} else {echo 0;}?>;
    this.filteredTemplateArray.sort(function(a,b) {
      return parseInt(a.renderTime) - parseInt(b.renderTime);
    });
  },
  watch: {
    sortBy: function() {
      if(this.sortBy == "az") {
        this.filteredTemplateArray.sort(function(a,b) {
          if(a.itemName > b.itemName) {
            return 1;
          }
          if(a.itemName < b.itemName) {
            return -1;
          }
          return 0;
        });
      }

      if(this.sortBy == "dateAdded") {
        this.filteredTemplateArray.sort(function(a,b) {
          if(a.dateAdded < b.dateAdded) {
            return 1;
          }
          if(a.dateAdded > b.dateAdded) {
            return -1;
          }
          return 0;
        });
      }

      if(this.sortBy == "renderTime") {
        this.filteredTemplateArray.sort(function(a,b) {
          return parseInt(a.renderTime) - parseInt(b.renderTime);
        });
      }
    }
  },
  mounted: function(){
      this.sortBy="renderTime";
  },
  methods: {
    filter: function() {
      var filteredCategoryArray = [];
      var filteredKeywordArray = [];
      if(this.selectedCategories.length != 0) {
        for(var i = 0; i < this.templateArray.length; i++) {
          for(var j = 0; j < this.selectedCategories.length; j++ ) {
            for(var k = 0; k < this.templateArray[i].categoryArray.length; k++ ) {
              if(this.templateArray[i].categoryArray[k] == this.selectedCategories[j]) {
                var arrayDuplicate = false;
                for(var l = 0; l < filteredKeywordArray.length; l++) {
                  if(filteredCategoryArray[l].id == this.templateArray[i].id) {
                    arrayDuplicate = true;
                  }
                }
                if(arrayDuplicate == false) {
                  filteredCategoryArray.push(this.templateArray[i]);
                }
              }
            }
          }
        }
      } else {
        for(var i = 0; i < this.templateArray.length; i++){
          filteredCategoryArray.push(this.templateArray[i]);
        }
      }

      if(this.selectedKeywords.length != 0) {
        for(var i = 0; i < filteredCategoryArray.length; i++) {
          for(var j = 0; j < this.selectedKeywords.length; j++ ) {
            for(var k = 0; k < filteredCategoryArray[i].keywordArray.length; k++ ) {
              if(filteredCategoryArray[i].keywordArray[k] == this.selectedKeywords[j]) {
                var arrayDuplicate = false;
                for(var l = 0; l < filteredKeywordArray.length; l++) {
                  if(filteredKeywordArray[l].id == filteredCategoryArray[i].id) {
                    arrayDuplicate = true;
                  }
                }
                if(arrayDuplicate == false) {
                  filteredKeywordArray.push(filteredCategoryArray[i]);
                }
              }
            }
          }
        }
      } else {
        for(var i = 0; i < filteredCategoryArray.length; i++){
          filteredKeywordArray.push(filteredCategoryArray[i]);
        }
      }

      if(this.sortBy == "az") {
        filteredKeywordArray.sort(function(a,b) {
          if(a.itemName > b.itemName) {
            return 1;
          }
          if(a.itemName < b.itemName) {
            return -1;
          }
          return 0;
        });
      }

      if(this.sortBy == "dateAdded") {
        filteredKeywordArray.sort(function(a,b) {
          if(a.dateAdded < b.dateAdded) {
            return 1;
          }
          if(a.dateAdded > b.dateAdded) {
            return -1;
          }
          return 0;
        });
      }

      if(this.sortBy == "renderTime") {
        filteredKeywordArray.sort(function(a,b) {
          return parseInt(a.renderTime) - parseInt(b.renderTime);
        });
      }

      this.filteredTemplateArray = filteredKeywordArray;
      $('html,body').scrollTop(0);
    },
    selectCategory: function(category) {
      var categoryButton = $('#' + category + 'Button');
      categoryButton.toggleClass('categoryButtonSelected');
      if(this.selectedCategories.includes(category)){
        var array = [];
        for(var i = 0; i < this.selectedCategories.length; i++) {
          if(this.selectedCategories[i] != category) {
            array.push(this.selectedCategories[i]);
          }
        }
        this.selectedCategories = array;
      } else {
        this.selectedCategories.push(category);
      }
      this.filter();
    },
    selectKeyword: function(keyword) {
      var categoryButton = $('#' + keyword + 'Button');
      categoryButton.toggleClass('categoryButtonSelected');
      if(this.selectedKeywords.includes(keyword)){
        var array = [];
        for(var i = 0; i < this.selectedKeywords.length; i++) {
          if(this.selectedKeywords[i] != keyword) {
            array.push(this.selectedKeywords[i]);
          }
        }
        this.selectedKeywords = array;
      } else {
        this.selectedKeywords.push(keyword);
      }
      this.filter();
    }
  }
});
</script>

Ionic2 : Uncaught (in promise): invalid link: calendar

I have implemented a side-menu in Ionic2.I am getting "Invalid link" when i click on the Event or Map button on the side-menu and sometimes i get the error as "Invalid Views to insert". I tried removing quotes from the calendar and gmap but it does not work out. Please guide.

This is my TS file:

import { Component } from '@angular/core';
import { Platform , IonicPage } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { CalendarPage } from '../pages/calendar/calendar'
import { GmapPage } from '../pages/gmap/gmap'
import firebase from 'firebase';
import { LoginPage } from '../pages/login/login';
import { ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular/navigation/nav-controller';
import { AuthProvider } from '../providers/auth/auth';
@IonicPage() 
@Component({
templateUrl: 'app.html'
})
export class MyApp {
calendar: CalendarPage;
gmap: GmapPage;
@ViewChild('nav') nav: NavController;
rootPage: any = CalendarPage;
pages = []

constructor(platform: Platform, statusBar: StatusBar, splashScreen:SplashScreen,
public authProvider: AuthProvider) {
platform.ready().then(() => {
  // Okay, so the platform is ready and our plugins are available.
  // Here you can do any higher level native things you might need.
  statusBar.styleDefault();
  splashScreen.hide();
  const unsubscribe = firebase.auth().onAuthStateChanged(user => {
    if (!user) {
      this.rootPage = 'LoginPage';
      unsubscribe();
    } else {
      this.rootPage = 'EventPage';
      unsubscribe();
    }
  });
});
}
    onLoad(page : string) {
  this.nav.setRoot(page);
  }
  onLogout(){
    this.authProvider.logoutUser();
 }
}

This is my HTML code :

<ion-menu [content] = "nav">
 <ion-header>
<ion-toolbar>
    <ion-title>Menu</ion-title>
      </ion-toolbar>
     </ion-header>
     <ion-content>
      <ion-list>
       <button ion-item  (click) = "onLoad('calendar')">Events</button>
       <button ion-item  (click) = "onLoad('gmap')">Maps</button> 
       <button ion-item  (click) = "onLogout()">Logout</button>

              </ion-list>
            </ion-content>
          </ion-menu>


  <ion-nav [root]="rootPage" #nav></ion-nav>

Related questions

How to disappear sidemenu without button in swift 4

1 answer

See also questions close to this topic