Sponsored Content
Top Forums Web Development Turning jQuery Code into Vue.js Post 303025670 by Neo on Thursday 8th of November 2018 09:34:56 PM
Old 11-08-2018
OK... here is the cleaned up code for this header component for the navbar:

Vue.js:

Code:
Vue.component("unix-navbar", {
  template: `<div class="neo-table-border vue-navbar">
              <div  class="vue-site-info">
                <a class="vue-site-link" :href="url">{{name}}</a>
              </div>
              <div id="avatar"  v-html="theavatar" @click="OpenMemberPanel()"></div>
            </div>`,

  data() {
    return {
      name: "The UNIX and Linux Forums",
      url: "https://www.unix.com/",
      theavatar: ""
    };
  },
  methods: {
    GetAvatar() {
      if (vbuserId > 0)
        this.theavatar = '<img id="avatar-img" src="' + vbtheURL + '"></img>';
      else this.theavatar = '<i id="avatar-icon" class="fas fa-user"></span>';
    },
    OpenMemberPanel() {
      if (vbuserId > 0) openMemberPanel();
      else openLogin();
    }
  },
  created() {
    this.GetAvatar();
  }
});

var navbar = new Vue({
  el: "#vue-navbar"
});

CSS:

Code:
<style>
.vue-site-info{
   margin-bottom:10px;
   padding-top:10px;
}
#avatar{
   cursor:pointer;
}
#avatar-img{
   width="60px;
}
.vue-navbar{
   padding:30px 30px 30px 30px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}
.vue-site-link{
  font-size:1.2em;
  text-decoration:none;
  
}
#avatar-icon{
  color:#170072;
  font-size:2.5em;
}
</style>

Not sure if it a good idea to use the userid in the client-side code for security reasons, but it's worth a thought. Since the userid is only used to determine which panel is opened and which icon to show, it might be worth a bit of hacking in the dev console to see how this could be exploited.

Otherwise, the main goal of moving the jQuery to Vue.js has been accomplished (thanks and hats off to Scott for helping) and this demo header component for a navbar is basically done. Next would be to move the navbar menu to a Vue.js component and to also move the panels in the header to Vue components.

Obviously, it is much easier to design a new web site from the beginning with Vue other than trying to retrofit the old site into Vue; but on the other hand, having an existing site to modify does provide opportunities to improve the site along the way.
 

6 More Discussions You Might Find Interesting

1. What is on Your Mind?

JQuery and CSS Flex Code for Responsive WOL Page

I have just wrote this jQuery to the WOL page, so the table of users on line will not need scrollbars and will instead transform into a responsive table: <script> jQuery(document).ready(function (){ jQuery("#neo-who-flex-tcat"). css({"display":"flex","flex-flow":"row wrap", ... (0 Replies)
Discussion started by: Neo
0 Replies

2. What is on Your Mind?

JQuery and CSS Flex Code for Responsive Forum Home Page

So far, I have completed making the home page more responsive (except for the forum stats at the top and the WOL box at the bottom, they still use scroll bars). xevV3_iZ8-s For full screen use the link below and set your YT resolution to 1080p60 HD https://youtu.be/xevV3_iZ8-s Here is... (1 Reply)
Discussion started by: Neo
1 Replies

3. What is on Your Mind?

JQuery to Add Code Tags to Selected Text

Hey. Someone find or write some jQuery code where we can select text with our mouse and then click or double click the highlighted / selected text and then it will wrap code tags around the highlighted text (in our editors). :) (0 Replies)
Discussion started by: Neo
0 Replies

4. Web Development

Simple Vue.js Component to Redirect to External Web Page Using Vue Router

Vue Router has some quirks and on of the quirks is that it is not reliable when adding external links using the vue-router library. After struggling with many solutions, I have found that creating a simple Vue.js component like this one seems to work the best (so far): Component Example: ... (0 Replies)
Discussion started by: Neo
0 Replies

5. Web Development

Vue JS 2 Tutorial by The Net Ninja: A Recommended Vue.js Video Tutorial Series

A number of people have asked me how to get started with Vue.js and my reply before today was to Google "Vue.js". That has changed and my recommendation to anyone who wants to learn the fastest growing, easiest to learn and use Vue.js web dev framework is to watch this video tutorial series: ... (0 Replies)
Discussion started by: Neo
0 Replies

6. Web Development

Vue.js component: Beautiful code highlighter

Sooner than later I will render forum discussions in Vue.js to complement the standard way of showing forum threads. Today, I ran across this component, vue-code-highlight Beautiful code syntax highlighting as Vue.js component. https://www.unix.com/members/1-albums225-picture1199.jpg ... (1 Reply)
Discussion started by: Neo
1 Replies
Mason::Manual::Syntax(3pm)				User Contributed Perl Documentation				Mason::Manual::Syntax(3pm)

NAME
Mason::Manual::Syntax - Mason component syntax reference DESCRIPTION
A reference for all the syntax that can be used in components. SUBSTITUTION TAGS
<% expr %> Blocks of the form "<% expr %>" are replaced with the result of evaluating "expr" as a Perl expression in scalar context. Hello, <% $name %>! The current time is <% scalar(localtime) %>. Whitespace after '<%' and before '%>' is required. This gives us a little leeway in implementing variations on this tag in the future - it also just looks better. <% expr | filter,filter... %> A filter list may appear after a << | >> character in a substitution, containing one or more names separated by commas. The names are as filter methods on the current component class. The filters are applied to the result before it is output. <% $content | NoBlankLines,Trim %> See Mason::Manual::Filters for more information on filters. PERL LINES
%-lines Lines beginning with a single '%' are treated as Perl. The '%' must be followed by at least one whitespace character. <ul> % foreach my $item (@items) { <li><% $item %></li> % } </ul> % if ($.logged_in) { <div class="welcome"> Welcome, <% $.username %>. </div> % } % else { <a href="/login">Click here to log in</a> % } UNNAMED BLOCKS
Blocks that do not take a name argument. <%class> Contains Perl code code that executes once when the component is loaded, in the main body of the class outside of any methods. This is the place to use modules, declare attributes, and do other things on a class level. <%class> </%class> <%doc> Text in this section is treated as a comment and ignored. <%doc> Name: foo.mc Purpose: ... </%doc> <%flags> Specifies flags that affect the compilation of the component. Each flag is listed one per line in "key => value" form. <%flags> extends => '/foo/bar' </%flags> The "<%flags>" block is extracted in a special first pass through the component, so that it can affect the remainder of the compilation. The built-in flags are: extends Declares the component's superclass (another component). The path may be absolute as shown above, or relative to the component's path. This is the only way to declare the component's superclass; using an "extends" keyword directly will not work reliably. If not provided, the component's superclass is determined automatically via autobase components. Plugins may implement additional flags. <%init> Contains Perl code that is executed at the beginning of the current method. Equivalent to a "<%perl>" section at the top of the method. <%init> my $article = MyApp::Article->find($.article_id); my $title = $article->title; </%init> <%perl> Contains Perl code that is executed in place. The return value, if any, is discarded. May appear anywhere in the text and any number of times. <%perl> my $article = MyApp::Article->find($.article_id); my $title = $article->title; </%perl> <%text> Text in this section is printed as-is with all Mason syntax ignored. <%text> % This is an example of a Perl line. <% This is an example of an expression block. %> </%text> This works for almost everything, but doesn't let you output "</%text>" itself! When all else fails, use print: % $m->print('The tags are <%text> and </%text>.'); NAMED BLOCKS
Blocks that take a name argument. <%method name params> Creates a new method with the specified name and params. Uses Method::Signatures::Simple underneath, so $self and any other declared parameters are automatically shifted off of @_. <%method greet ($name, $color)> <div style="color: <% $color %>"> Hello, <% $name %>! </div> </%method> <%after name> <%augment name> <%around name> <%before name> <%override name> Modifies a content-producing method with the specified name. See Moose::Manual::MethodModifiers for a description of each modifier. $self is automatically shifted off for the body of "<%after>", "<%augment>", "<%before>" and " <%override" >. $orig and $self are automatically shifted off for the body of "<%around>". <%after render> <% # Add analytics line after everything has rendered %> <& /shared/google_analytics_line.mi &> </%after> <%augment wrap> <html> <body> <% inner() %> </body> </html> </%augment> <%around navbar> <div class="navbar_special"> <% $self->$orig() %> </div> </%around> <%override navbar> <% super() %> <a href="extra">extra</a> </%override> <%filter name params> Creates a filter method with the specified name and params. Works just like a "<%method>" block, except that you can call "$yield->()" to generate the original content. e.g. <%filter Row ($class)> <tr class="<% $class %>"> % foreach my $item (split(/s/, $yield->())) { <td><% $item %></td> % } </tr> </%filter> % $.Row('std') {{ First Second Third % }} generates <tr class="std"> <td>First</td> <td>Second</td> <td>Third</td> </tr> See Mason::Manual::Filters for more information on filters. CALLING COMPONENTS
<& path, args &> <& /path/to/comp.mi, name=>value, ... &> path is an absolute or relative component path. If the latter, it is considered relative to the location of the current component. args is a list of one or more name/value pairs. The path may be a literal string (quotes optional) or a Perl expression that evaluates to a string. To eliminate the need for quotes in most cases, Mason employs some magic parsing: If the first character is one of "[w/.]", comp_path is assumed to be a literal string running up to the first comma or &>. Otherwise, comp_path is evaluated as an expression. Here are some examples: # relative component paths <& topimage.mi &> <& tools/searchbox.mi &> # absolute component path <& /shared/masthead.mi, color=>'salmon' &> # this component path MUST have quotes because it contains a comma <& "sugar,eggs.mi", mix=>1 &> # variable component path <& $comp &> # variable component and attributes <& $comp, %args &> # you can use arbitrary expression for component path, but it cannot # begin with a letter or number; delimit with () to remedy this <& (int(rand(2)) ? 'thiscomp.mi' : 'thatcomp.mi'), id=>123 &> You can also call components with the comp and scomp methods. COMMENTS
<% # comment... %> A "<% %>" tag is considered a comment if all of its lines are either whitespace, or begin with a '#' optionally preceded by whitespace. For example, <% # This is a single-line comment %> <% # This is a # multi-line comment %> % # comment Because a line beginning with "%" is treated as Perl, "% #" automatically works as a comment. However we prefer the "<% # comment %>" form over "% #", because it stands out a little more as a comment and because it is more flexible with regards to preceding whitespace. % if(0) { } Anything between these two lines % if(0) { ... % } will be skipped by Mason, including component calls. While we don't recomend this for comments per se, it is a useful notation for "commenting out" code that you don't want to run. HTML/XML/... comments HTML and other markup languages will have their own comment markers, for example "<!-- -->". Note two important differences with these comments versus the above comments: o They will be sent to the client and appear in the source of the page. o They do not block component calls and other code from running, so don't try to use them to comment out code! <!-- Oops, the code below will still run <& /shared/expensive.mhtml &> --> WHITESPACE AND NEWLINES
Newlines between blocks Mason will ignore a single newline between blocks, so that you can space them nicely. Additional newlines beyond that will be displayed. <%class> ... </%class> <-- ignored <%method foo> ... </%method> <-- ignored <-- displayed <%method bar> ... </%method> Backslash at end of line A backslash () at the end of a line suppresses the newline. In HTML components, this is mostly useful for fixed width areas like "<pre>" tags, since browsers ignore white space for the most part. An example: <pre> foo % if(1) { bar % } baz </pre> outputs foo bar baz because of the newlines on lines 2 and 4. (Lines 3 and 5 do not generate a newline because the entire line is taken by Perl.) To suppress the newlines: <pre> foo % if(1) { bar % } baz </pre> which prints foobarbaz SEE ALSO
Mason AUTHOR
Jonathan Swartz <swartz@pobox.com> COPYRIGHT AND LICENSE
This software is copyright (c) 2011 by Jonathan Swartz. This is free software; you can redistribute it and/or modify it under the same terms as the Perl 5 programming language system itself. perl v5.14.2 2012-05-02 Mason::Manual::Syntax(3pm)
All times are GMT -4. The time now is 08:50 PM.
Unix & Linux Forums Content Copyright 1993-2022. All Rights Reserved.
Privacy Policy