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
FVWM-THEMES-CONFIG(1)						   FVWM Utility 					     FVWM-THEMES-CONFIG(1)

NAME
fvwm-themes-config - fvwm-themes manager and configurator SYNOPSIS
fvwm-themes-config [ --help|-h ] [ --version|-v ] [ --info|-i ] [ --site ] [ --pipe ] [ --show-themes ] [ --show-components ] [ --show-dir ] [ --theme|-t theme ] [ --show-info ] [ --show-cfg ] [ --show-value key ] [ --component component ] [ --only-site ] [ --only-user ] [ --fvwmscript ] [ --expand-rc|-e [file] ] [ --fresh|-fr ] [ --reset|-r ] [ --no-cfg-cache ] [ --load|-l component@theme ] [ --drop|-u component@theme ] [ --option|-o component:option=value ] [ --variant|-v component=variant ] [ --set-locked component=0|1 ] [ --install|-i file ... ] [ --force-install|-fo ] [ --create-pack name file ...] [ --pack-prefix prefix ] [ --pack-extra-version x.x ] [ --tmp-dir dir ] [ --com-mode ] [ --com-name name ] DESCRIPTION
This scripts creates and changes fvwm configuration to use with fvwm-themes accordingly to theme component definitions and user choices. It builds themes-rc in $FVWM_USERDIR, which is a replacement for .fvwm2rc. OPTIONS
--help - show the help and exit --version - show the version and exit --info - show the configured information and exit --site - use site configuration directory for output. The default is to use the user's directory. --pipe - generate fvwm commands suitable to use within fvwm's PipeRead (instead of error messages, for example). --show-themes - shows list of all themes (or ones specified by --theme). --show-components - shows all themes (or ones specified by --theme) with all their components (components are TAB justified). --show-dir - shows the theme directory of all themes (or ones specified by --theme). These directories sit in themes/ parent directory of either user or site place. --theme theme - only theme(s) given by this parameter are queried, if given. Several instances of --theme may be given. By default all themes are queried. --show-info - shows an info for the component given in "--component" parameter. --show-cfg - shows an entire configuration hash for the component given in "--component" parameter. To show only one or several specified named values, --show-value may be used. --show-value key - shows a value by the key for the component given in "--component" parameter. Several instances of --show-value may be given. --component component - a working component for other parameters, may be of form component@theme. Example: fvwm-themes-config --component colors --show-value theme --show-value read-file --only-site - when specified together with --show-themes or --show-components causes to take into account only the site directory. --only-user - when specified together with --show-themes or --show-components causes to take into account only the user directory. --fvwmscript - when specified together with --show-themes or --show-components causes the output to be formatted for FvwmScript. --expand-rc [file] - gets an FVWM configuration file and expands all includes in one very long file, printed to standard output. If the file is not given $FVWM_USERDIR/themes-rc is taken. This parameter can't be used with others. --fresh - refresh (regenerate) the fvwm configuration files needed to load themes, this includes files in the user's directory: $FVWM_USERDIR/themes-rc, $FVWM_USERDIR/themes-rc-2 and $FVWM_USERDIR/themes/current/theme.cfg. --reset - forget all the currently used components, use the components from the default theme and regenerate the user's configuration cache. --no-cfg-cache - don't use the existing configuration cache file, this file will be regenerated. --set-minimal-reload value - if value is 1, then minimal theme switching is used, if value is 0, then full theme switching is used. --load component - multiple "--load" parameters may be given. If the parameter is of form component@theme, this specific theme component is used, if it is of form @theme, all components of the given theme will be used. The process of "loading" components consists of adding new components or replacing existing ones in the current theme. It is possible that there will be conflicts during this operation. In this case, nothing is changed, negative status is returned and the error message is printed. --drop component - the opponent for "--load", these parameters may be mixed. Tries to unload the given component without breaking dependancies. [@theme] part of component name may be omitted. --option component:option=value - set another component option value. The option may be either the option name or its index in the option list starting from 1 (use 0 to represent the default option). The value may be either the value name or its index in the option value list starting from 1 (use 0 to represent the default option value). --variant component=variant - set another component variant if a given component has variants. The variant may be either the variant name or its index in the variant list starting from 1 (use 0 to represent the default component variant). --set-locked component=value - set (if value is 1) or unset (if value is 0) a locked state of the given component. When the component from the current theme is locked, "--load @theme" will not replace it, it can only be replaced by explicit "--load component@theme". Five last parameters may be combined together and multiple parameters are possible. If --load and --drop parameters are given, first it will be unloaded all given components and then loaded all given components, not vice versus. After that --variant and --option parameters will take place, i.e. it is possible to load a component and immediately change its options. --install theme.tar.{gz,bz2} ... - install the specified tarballs into the site (if --site is alos given) or into the user's themes directory by verifying and unpacking the contents of the tarballs. --force-install - during the installation of a theme remove existing theme with the same name without prompting. --create-pack pack theme1 theme2 ... - create a gzipped tarball named ft-pack-VERSION.tar.gz made of the specified theme(s) found in the user's themes directory or in the site directory if --site is also given. VERSION is the version of FVWM Themes. --pack-prefix prefix - replace "ft" by "prefix" in the name of the gzipped tarball created via the --create-pack option. --pack-extra-version x.x - add _x.x to VERSION in the name of the gzipped tarball created via the --create-pack option. --tmp-dir dir - full path to a directory that can be use as a temporary working directory. Default is /tmp. This option is used only with --create-pack. --com-mode - run fvwm-themes-config under the "communication mode". See, the fvwm-themes-com and fvwm-themes-menuapp manual pages for more information on this option. You need to read the code to know the communication commands. --com-name name - use name as name for communication with fvwm-themes-com. By default, "config" is used, but you should use "config-pid" as name where pid is the pid of the program that want to talk to fvwm-themes-config so that fvwm-themes-config can exit if this program exit and so that fvwm-themes-config can kill the program if an internal error happen in fvwm-themes-config. On the other hand, if you want to talk with fvwm-themes-config in, say, a terminal you must not give an name as "config-an_integer" as name. USAGE
Usually you don't need to run this script manually, it is called using different interfaces (menus and more). To start with fvwm-themes, run this: fvwm-themes-config --reset This command automatically called in fvwm-themes-start when needed, it will create the "current" theme in the user space, equivalent to the "default" one. If "--site" parameter is also given, it will be created in the system space instead. Info examples: fvwm-themes-config --show-themes # shows a list of all themes fvwm-themes-config --show-components # show all themes+components fvwm-themes-config --show-themes --component windowlook fvwm-themes-config --show-components --theme migo --theme default fvwm-themes-config --component colors --show-value theme --show-value read-file fvwm-themes-config --component colors@cde --show-value option fvwm-themes-config --component _core --show-value memory Other examples: fvwm-themes-config --load @afterstep # load theme "afterstep" fvwm-themes-config --drop modules@afterstep # unload component fvwm-themes-config --variant settings/stroke=2 # turn on stroke fvwm-themes-config --variant settings/stroke=0 # use default (1) fvwm-themes-config --option bindings:switch-mouse-2-3=no fvwm-themes-config --set-locked colors=1 --set-locked globalfeel=0 fvwm-themes-config --install --site metallic.tar.gz wooden.tar.gz fvwm-themes-config --create-pack martyns -tmp-dir . metallic wooden AUTHORS
Mikhael Goikhman <migo@homemail.com>, 31 Dec 1999. Olivier Chapuis <olivier.chapuis@free.fr> (some small things and the communication loop implementation). COPYING
The script is distributed by the same terms as fvwm-themes itself. See GNU General Public License for details. BUGS
Report bugs to fvwm-themes-devel@lists.sourceforge.net. perl v5.12.1 2010-07-05 FVWM-THEMES-CONFIG(1)
All times are GMT -4. The time now is 03:40 PM.
Unix & Linux Forums Content Copyright 1993-2022. All Rights Reserved.
Privacy Policy