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
Graphics::Primitive::Component(3pm)			User Contributed Perl Documentation		       Graphics::Primitive::Component(3pm)

NAME
Graphics::Primitive::Component - Base graphical unit DESCRIPTION
A Component is an entity with a graphical representation. SYNOPSIS
my $c = Graphics::Primitive::Component->new({ origin => Geometry::Primitive::Point->new({ x => $x, y => $y }), width => 500, height => 350 }); LIFECYCLE
prepare Most components do the majority of their setup in the prepare. The goal of prepare is to establish it's minimum height and width so that it can be properly positioned by a layout manager. $driver->prepare($comp); layout This is not a method of Component, but a phase introduced by the use of Layout::Manager. If the component is a container then each of it's child components (even the containers) will be positioned according to the minimum height and width determined during prepare. Different layout manager implementations have different rules, so consult the documentation for each for details. After this phase has completed the origin, height and width should be set for all components. $lm->do_layout($comp); finalize This final phase provides and opportunity for the component to do any final changes to it's internals before being passed to a driver for drawing. An example might be a component that draws a fleuron at it's extremities. Since the final height and width isn't known until this phase, it was impossible for it to position these internal components until now. It may even defer creation of this components until now. It is not ok to defer all action to the finalize phase. If you do not establish a minimum hieght and width during prepare then the layout manager may not provide you with enough space to draw. $driver->finalize($comp); draw Handled by Graphics::Primitive::Driver. $driver->draw($comp); METHODS
Constructor new Creates a new Component. Instance Methods background_color Set this component's background color. border Set this component's border, which should be an instance of Border. callback Optional callback that is fired at the beginning of the "finalize" phase. This allows you to add some sort of custom code that can modify the component just before it is rendered. The only argument is the component itself. Note that changing the position or the dimensions of the component will not re-layout the scene. You may have weird results of you manipulate the component's dimensions here. class Set/Get this component's class, which is an abitrary string. Graphics::Primitive has no internal use for this attribute but provides it for outside use. color Set this component's foreground color. fire_callback Method to execute this component's "callback". get_tree Get a tree for this component. Since components are -- by definiton -- leaf nodes, this tree will only have the one member at it's root. has_callback Predicate that tells if this component has a "callback". height Set this component's height. inside_bounding_box Returns a Rectangle that defines the edges of the 'inside' box for this component. This box is relative to the origin of the component. inside_height Get the height available in this container after taking away space for padding, margin and borders. inside_width Get the width available in this container after taking away space for padding, margin and borders. margins Set this component's margins, which should be an instance of Insets. Margins are the space outside the component's bounding box, as in CSS. The margins should be outside the border. maximum_height Set/Get this component's maximum height. Used to inform a layout manager. maximum_width Set/Get this component's maximum width. Used to inform a layout manager. minimum_height Set/Get this component's minimum height. Used to inform a layout manager. minimum_inside_height Get the minimum height available in this container after taking away space for padding, margin and borders. minimum_inside_width Get the minimum width available in this container after taking away space for padding, margin and borders. minimum_width Set/Get this component's minimum width. Used to inform a layout manager. name Set this component's name. This is not required, but may inform consumers of a component. Pay attention to that library's documentation. origin Set/Get the origin point for this component. outside_height Get the height consumed by padding, margin and borders. outside_width Get the width consumed by padding, margin and borders. finalize Method provided to give component one last opportunity to put it's contents into the provided space. Called after prepare. padding Set this component's padding, which should be an instance of Insets. Padding is the space inside the component's bounding box, as in CSS. This padding should be between the border and the component's content. page If true then this component represents stand-alone page. This informs the driver that this component (and any children) are to be renderered on a single surface. This only really makes sense in formats that have pages such as PDF of PostScript. prepare Method to prepare this component for drawing. This is an empty sub and is meant to be overridden by a specific implementation. preferred_height Set/Get this component's preferred height. Used to inform a layout manager. preferred_width Set/Get this component's preferred width. Used to inform a layout manager. to_string Get a string representation of this component in the form of: $name $x,$y ($widthx$height) visible Set/Get this component's visible flag. width Set/Get this component's width. AUTHOR
Cory Watson, "<gphat@cpan.org>" BUGS
Please report any bugs or feature requests to "bug-geometry-primitive at rt.cpan.org", or through the web interface at http://rt.cpan.org/NoAuth/ReportBug.html?Queue=Geometry-Primitive <http://rt.cpan.org/NoAuth/ReportBug.html?Queue=Geometry-Primitive>. I will be notified, and then you'll automatically be notified of progress on your bug as I make changes. COPYRIGHT &; LICENSE Copyright 2008-2009 by Cory G Watson. This program is free software; you can redistribute it and/or modify it under the same terms as Perl itself. perl v5.12.3 2011-06-02 Graphics::Primitive::Component(3pm)
All times are GMT -4. The time now is 05:58 AM.
Unix & Linux Forums Content Copyright 1993-2022. All Rights Reserved.
Privacy Policy